docs: migrate UI docs (#13245)

* 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
2025-08-20 11:42:25 +03:00
parent 5b7a041246
commit d1a1135328
748 changed files with 13079 additions and 7319 deletions
@@ -0,0 +1,60 @@
+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>
+  )
+}