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
61 lines
1.2 KiB
TypeScript
61 lines
1.2 KiB
TypeScript
import {
|
|
createDataTableColumnHelper,
|
|
useDataTable,
|
|
DataTable,
|
|
Heading,
|
|
usePrompt,
|
|
} from "@medusajs/ui"
|
|
|
|
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 prompt = usePrompt()
|
|
|
|
const table = useDataTable({
|
|
columns,
|
|
data: products,
|
|
getRowId: (product) => product.id,
|
|
rowCount: products.length,
|
|
isLoading: false,
|
|
onRowClick: async (event, row) => {
|
|
await prompt({
|
|
title: "Row Clicked",
|
|
description: `You clicked row #${row.id}`,
|
|
})
|
|
},
|
|
})
|
|
|
|
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>
|
|
)
|
|
}
|