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
59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import { createDataTableColumnHelper, useDataTable, DataTable, Heading, Badge } from "@medusajs/ui"
|
|
|
|
const products = [
|
|
{
|
|
id: "1",
|
|
title: "Shirt",
|
|
price: 10,
|
|
is_active: true
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Pants",
|
|
price: 20,
|
|
is_active: false
|
|
}
|
|
]
|
|
|
|
const columnHelper = createDataTableColumnHelper<typeof products[0]>()
|
|
|
|
const columns = [
|
|
columnHelper.accessor("title", {
|
|
header: "Title",
|
|
enableSorting: true,
|
|
}),
|
|
columnHelper.accessor("price", {
|
|
header: "Price",
|
|
enableSorting: true,
|
|
}),
|
|
columnHelper.accessor("is_active", {
|
|
header: "Status",
|
|
cell: ({ getValue }) => {
|
|
const isActive = getValue()
|
|
return (
|
|
<Badge color={isActive ? "green" : "grey"} size="xsmall">
|
|
{isActive ? "Active" : "Inactive"}
|
|
</Badge>
|
|
)
|
|
}
|
|
})
|
|
]
|
|
|
|
export default function ProductTable () {
|
|
const table = useDataTable({
|
|
columns,
|
|
data: products,
|
|
getRowId: (product) => product.id,
|
|
rowCount: products.length,
|
|
isLoading: false,
|
|
})
|
|
|
|
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>
|
|
</DataTable.Toolbar>
|
|
<DataTable.Table />
|
|
</DataTable>
|
|
)
|
|
} |