docs: add section on row click in DataTable (#11694)

* docs: add section on row click in DataTable * update subscriptions example
2025-03-03 18:08:06 +02:00
parent ab96ad3b82
commit 92514885e4
12 changed files with 10972 additions and 10678 deletions
@@ -0,0 +1,49 @@
+import { createDataTableColumnHelper, useDataTable, DataTable, Heading } 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 table = useDataTable({
+    columns,
+    data: products,
+    getRowId: (product) => product.id,
+    rowCount: products.length,
+    isLoading: false,
+    onRowClick: (event, row) => {
+      alert(`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>
+  )
+}