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,76 @@
+import { DataTable, DataTableRowSelectionState, Heading, createDataTableColumnHelper, createDataTableCommandHelper, useDataTable } from "@medusajs/ui"
+import { useState } from "react"
+
+let products = [
+  {
+    id: "1",
+    title: "Shirt",
+    price: 10,
+  },
+  {
+    id: "2",
+    title: "Pants",
+    price: 20,
+  }
+]
+
+const columnHelper = createDataTableColumnHelper<typeof products[0]>()
+
+const columns = [
+  // Commands requires a select column.
+  columnHelper.select(),
+  columnHelper.accessor("title", {
+    header: "Title",
+    enableSorting: true,
+  }),
+  columnHelper.accessor("price", {
+    header: "Price",
+    enableSorting: true,
+  }),
+]
+
+const commandHelper = createDataTableCommandHelper()
+
+const useCommands = () => {
+  return [
+    commandHelper.command({
+      label: "Delete",
+      shortcut: "D",
+      action: async (selection) => {
+        const productsToDeleteIds = Object.keys(selection)
+
+        alert(`You deleted product(s) with IDs: ${productsToDeleteIds.join()}`)
+      }
+    })
+  ]
+}
+
+export default function ProductTable () {
+	const [rowSelection, setRowSelection] = useState<DataTableRowSelectionState>({})
+
+  const commands = useCommands()
+
+  const instance = useDataTable({
+    data: products,
+    columns,
+    getRowId: (product) => product.id,
+    rowCount: products.length,
+    isLoading: false,
+    commands,
+    rowSelection: {
+      state: rowSelection,
+      onRowSelectionChange: setRowSelection,
+    },
+  });
+
+  return (
+    <DataTable instance={instance}>
+      <DataTable.Toolbar className="flex justify-between items-center">
+        <Heading>Products</Heading>
+      </DataTable.Toolbar>
+	    <DataTable.Table />
+      {/** This component will the command bar when the user has selected at least one row. **/}
+	    <DataTable.CommandBar selectedLabel={(count) => `${count} selected`} />
+    </DataTable>
+  );
+};