{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-16",
  "title": "Resizable columns",
  "description": "TanStack Table, drag the header edge to resize column widths.",
  "dependencies": [
    "@tanstack/react-table"
  ],
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "registry/patterns/table/table-16.tsx",
      "content": "'use client'\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\nimport { cn } from '@/lib/utils'\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\n\ntype Task = {\n  id: string\n  title: string\n  assignee: string\n  status: string\n}\n\nconst data: Task[] = [\n  {\n    id: 'T-101',\n    title: 'Set up CI pipeline',\n    assignee: 'Ava Carter',\n    status: 'In progress',\n  },\n  {\n    id: 'T-102',\n    title: 'Design empty states',\n    assignee: 'Ben Lopez',\n    status: 'Todo',\n  },\n  {\n    id: 'T-103',\n    title: 'Audit accessibility',\n    assignee: 'Cara Diaz',\n    status: 'Done',\n  },\n  {\n    id: 'T-104',\n    title: 'Write API docs',\n    assignee: 'Dan Wells',\n    status: 'In progress',\n  },\n]\n\nconst columns: ColumnDef<Task>[] = [\n  { accessorKey: 'id', header: 'ID', size: 80 },\n  {\n    accessorKey: 'title',\n    header: 'Title',\n    size: 240,\n    cell: ({ row }) => (\n      <span className=\"font-medium\">{row.getValue('title')}</span>\n    ),\n  },\n  { accessorKey: 'assignee', header: 'Assignee', size: 160 },\n  { accessorKey: 'status', header: 'Status', size: 120 },\n]\n\nexport function Table16() {\n  const table = useReactTable({\n    data,\n    columns,\n    columnResizeMode: 'onChange',\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  return (\n    <div className=\"w-full max-w-2xl\">\n      <div className=\"overflow-x-auto rounded-lg border\">\n        <Table style={{ width: table.getTotalSize() }} className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id} className=\"hover:bg-transparent\">\n                {headerGroup.headers.map((header, index) => {\n                  const isLastColumn = index === headerGroup.headers.length - 1\n\n                  return (\n                    <TableHead\n                      key={header.id}\n                      style={{ width: header.getSize() }}\n                      className={cn(\n                        'relative',\n                        !isLastColumn && 'border-border border-r',\n                      )}\n                    >\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )}\n                      {header.column.getCanResize() && !isLastColumn && (\n                        <button\n                          type=\"button\"\n                          aria-label={`Resize ${header.column.id}`}\n                          onMouseDown={header.getResizeHandler()}\n                          onTouchStart={header.getResizeHandler()}\n                          className={cn(\n                            'absolute inset-y-0 right-0 z-20 flex w-4 translate-x-1/2 cursor-col-resize touch-none justify-center select-none',\n                          )}\n                        ></button>\n                      )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id} className=\"hover:bg-transparent\">\n                {row.getVisibleCells().map((cell, index) => {\n                  const isLastColumn =\n                    index === row.getVisibleCells().length - 1\n\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      style={{ width: cell.column.getSize() }}\n                      className={cn(\n                        'truncate',\n                        !isLastColumn && 'border-border border-r',\n                      )}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/table/table-16.tsx"
    }
  ],
  "type": "registry:block"
}