d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { createDataTableColumnHelper, useDataTable, DataTable, Heading } from "@medusajs/ui"
|
|
import { useMemo, useState } from "react"
|
|
|
|
const products = [
|
|
{
|
|
id: "1",
|
|
title: "Shirt",
|
|
price: 10
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Pants",
|
|
price: 20
|
|
}
|
|
]
|
|
|
|
const columnHelper = createDataTableColumnHelper<typeof products[0]>()
|
|
|
|
const columns = [
|
|
columnHelper.accessor("title", {
|
|
header: "Title",
|
|
enableSorting: true,
|
|
}),
|
|
columnHelper.accessor("price", {
|
|
header: "Price",
|
|
enableSorting: true,
|
|
}),
|
|
]
|
|
|
|
export default function ProductTable () {
|
|
const [search, setSearch] = useState<string>("")
|
|
|
|
const shownProducts = useMemo(() => {
|
|
return products.filter((product) => product.title.toLowerCase().includes(search.toLowerCase()))
|
|
}, [search])
|
|
|
|
const table = useDataTable({
|
|
columns,
|
|
data: shownProducts,
|
|
getRowId: (product) => product.id,
|
|
rowCount: products.length,
|
|
isLoading: false,
|
|
// Pass the state and onSearchChange to the table instance.
|
|
search: {
|
|
state: search,
|
|
onSearchChange: setSearch
|
|
}
|
|
})
|
|
|
|
return (
|
|
<DataTable instance={table}>
|
|
<DataTable.Toolbar className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center">
|
|
<Heading>Products</Heading>
|
|
{/* This component renders the search bar */}
|
|
<DataTable.Search placeholder="Search..." />
|
|
</DataTable.Toolbar>
|
|
<DataTable.Table />
|
|
</DataTable>
|
|
)
|
|
} |