{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table",
  "title": "Data Table",
  "description": "Powerful table and datagrid built with TanStack Table.",
  "dependencies": [
    "@tanstack/react-table",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/table.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/data-table.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n\tflexRender,\n\tgetCoreRowModel,\n\tgetFilteredRowModel,\n\tgetPaginationRowModel,\n\tgetSortedRowModel,\n\tuseReactTable,\n} from \"@tanstack/react-table\";\n\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/registry/optics/table\";\n\nfunction DataTable({ columns = [], data = [], ...props }) {\n\tconst [sorting, setSorting] = React.useState([]);\n\tconst [columnFilters, setColumnFilters] = React.useState([]);\n\tconst [columnVisibility, setColumnVisibility] = React.useState({});\n\tconst [rowSelection, setRowSelection] = React.useState({});\n\n\tconst table = useReactTable({\n\t\tdata,\n\t\tcolumns,\n\t\tonSortingChange: setSorting,\n\t\tonColumnFiltersChange: setColumnFilters,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\tgetPaginationRowModel: getPaginationRowModel(),\n\t\tgetSortedRowModel: getSortedRowModel(),\n\t\tgetFilteredRowModel: getFilteredRowModel(),\n\t\tonColumnVisibilityChange: setColumnVisibility,\n\t\tonRowSelectionChange: setRowSelection,\n\t\tstate: {\n\t\t\tsorting,\n\t\t\tcolumnFilters,\n\t\t\tcolumnVisibility,\n\t\t\trowSelection,\n\t\t},\n\t\t...props,\n\t});\n\n\treturn (\n\t\t<div className=\"w-full\">\n\t\t\t<div className=\"overflow-hidden rounded-md border\">\n\t\t\t\t<Table>\n\t\t\t\t\t<TableHeader>\n\t\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TableHead key={header.id}>\n\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody>\n\t\t\t\t\t\t{table.getRowModel().rows?.length ? (\n\t\t\t\t\t\t\ttable.getRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t\t<TableCell key={cell.id}>\n\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t))\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\tcolSpan={columns.length}\n\t\t\t\t\t\t\t\t\tclassName=\"h-24 text-center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tNo results.\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</Table>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\n",
      "type": "registry:component",
      "target": "components/optics/data-table.jsx"
    }
  ],
  "type": "registry:component"
}