From 3fbb9a18372f2b6a675dd6c039ba52be76f3eeb4 Mon Sep 17 00:00:00 2001
From: TheSiahxyz <164138827+TheSiahxyz@users.noreply.github.com>
Date: Fri, 16 Jan 2026 08:30:14 +0900
Subject: updates

---
 ui/shadcn/.claude/commands/create-data-table.md | 231 ++++++++++++++++++++++++
 1 file changed, 231 insertions(+)
 create mode 100644 ui/shadcn/.claude/commands/create-data-table.md

(limited to 'ui/shadcn/.claude/commands/create-data-table.md')

diff --git a/ui/shadcn/.claude/commands/create-data-table.md b/ui/shadcn/.claude/commands/create-data-table.md
new file mode 100644
index 0000000..cd1273b
--- /dev/null
+++ b/ui/shadcn/.claude/commands/create-data-table.md
@@ -0,0 +1,231 @@
+---
+description: Create an advanced data table with sorting, filtering, and pagination
+argument-hint: <table-name>
+allowed-tools: Read, Write, Bash
+---
+
+Create a fully-featured data table using TanStack Table and shadcn/ui components.
+
+## Instructions
+
+1. Install required dependencies:
+   - `@tanstack/react-table`
+   - Required shadcn components: `table`, `button`, `input`, `dropdown-menu`
+
+2. Create data table with features:
+   - Column definitions with proper types
+   - Sorting functionality
+   - Filtering (global and column)
+   - Pagination
+   - Row selection
+   - Column visibility toggle
+   - Export functionality (optional)
+
+## Template Structure
+
+```tsx
+// components/[table-name]/columns.tsx
+import { ColumnDef } from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
+import { ArrowUpDown, MoreHorizontal } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export type [DataType] = {
+  id: string
+  // Define data structure
+}
+
+export const columns: ColumnDef<[DataType]>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "field",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Field Name
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => <div>{row.getValue("field")}</div>,
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => {
+      const item = row.original
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem>Edit</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+// components/[table-name]/data-table.tsx
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { DataTableViewOptions } from "./data-table-view-options"
+import { DataTablePagination } from "./data-table-pagination"
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  searchKey?: string
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  searchKey,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  })
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        {searchKey && (
+          <Input
+            placeholder={`Filter by ${searchKey}...`}
+            value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
+            onChange={(event) =>
+              table.getColumn(searchKey)?.setFilterValue(event.target.value)
+            }
+            className="max-w-sm"
+          />
+        )}
+        <DataTableViewOptions table={table} />
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} />
+    </div>
+  )
+}
+```
+
+## Features to Include
+
+- **Sorting**: Click column headers to sort
+- **Filtering**: Global search and column filters
+- **Pagination**: Navigate through pages
+- **Selection**: Select individual or all rows
+- **Column Visibility**: Show/hide columns
+- **Row Actions**: Edit, delete, view details
+- **Export**: CSV/Excel export
+- **Responsive**: Mobile-friendly view
+
+## Example
+
+If the user says: `/create-data-table users`
+
+1. Install dependencies:
+```bash
+npm install @tanstack/react-table
+npx shadcn@latest add table button input dropdown-menu checkbox
+```
+
+2. Create column definitions for users table
+3. Create data table component
+4. Add pagination component
+5. Add column visibility toggle
+6. Provide usage example
\ No newline at end of file
-- 
cgit v1.2.3