{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-12",
  "title": "With filters",
  "description": "TanStack Table, global search input plus a status column filter dropdown.",
  "dependencies": [
    "@tanstack/react-table"
  ],
  "registryDependencies": [
    "table",
    "input",
    "select"
  ],
  "files": [
    {
      "path": "registry/patterns/table/table-12.tsx",
      "content": "'use client'\n\nimport { Input } from '@/components/ui/input'\nimport {\n  Select,\n  SelectGroup,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { useState } from 'react'\n\ntype Invoice = {\n  id: string\n  customer: string\n  status: 'paid' | 'pending' | 'overdue'\n  amount: string\n}\n\nconst data: Invoice[] = [\n  { id: 'INV-001', customer: 'Acme Inc.', status: 'paid', amount: '$1,200.00' },\n  { id: 'INV-002', customer: 'Globex', status: 'pending', amount: '$640.00' },\n  { id: 'INV-003', customer: 'Soylent', status: 'paid', amount: '$320.00' },\n  { id: 'INV-004', customer: 'Initech', status: 'overdue', amount: '$980.00' },\n  { id: 'INV-005', customer: 'Umbrella', status: 'pending', amount: '$540.00' },\n  { id: 'INV-006', customer: 'Stark', status: 'paid', amount: '$2,100.00' },\n]\n\nconst columns: ColumnDef<Invoice>[] = [\n  {\n    accessorKey: 'id',\n    header: 'Invoice',\n    cell: ({ row }) => (\n      <span className=\"font-medium\">{row.getValue('id')}</span>\n    ),\n  },\n  { accessorKey: 'customer', header: 'Customer' },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => (\n      <span className=\"text-muted-foreground capitalize\">\n        {row.getValue('status')}\n      </span>\n    ),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => (\n      <div className=\"text-right tabular-nums\">{row.getValue('amount')}</div>\n    ),\n  },\n]\n\nexport function Table12() {\n  const [globalFilter, setGlobalFilter] = useState('')\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { globalFilter, columnFilters },\n    onGlobalFilterChange: setGlobalFilter,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n  })\n\n  const statusFilter =\n    (table.getColumn('status')?.getFilterValue() as string) ?? 'all'\n\n  return (\n    <div className=\"flex w-full max-w-xl flex-col gap-3\">\n      <div className=\"flex items-center gap-2\">\n        <Input\n          placeholder=\"Search invoices...\"\n          value={globalFilter}\n          onChange={(event) => setGlobalFilter(event.target.value)}\n          className=\"max-w-xs\"\n        />\n        <Select\n          value={statusFilter}\n          onValueChange={(value) =>\n            table\n              .getColumn('status')\n              ?.setFilterValue(value === 'all' ? undefined : value)\n          }\n        >\n          <SelectTrigger className=\"w-36\">\n            <SelectValue placeholder=\"Status\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All statuses</SelectItem>\n              <SelectItem value=\"paid\">Paid</SelectItem>\n              <SelectItem value=\"pending\">Pending</SelectItem>\n              <SelectItem value=\"overdue\">Overdue</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"overflow-hidden rounded-lg border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow key={row.id}>\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"text-muted-foreground h-20 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/table/table-12.tsx"
    }
  ],
  "type": "registry:block"
}