{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table",
  "title": "Data Table",
  "description": "Feature-rich TanStack data table with sorting, text and faceted filters, pagination, row selection, column visibility, pinning, and empty/action states.",
  "dependencies": [
    "@tanstack/react-table"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "utils",
    "https://zeron-ui.vercel.app/r/shape-context.json",
    "https://zeron-ui.vercel.app/r/icon-context.json",
    "https://zeron-ui.vercel.app/r/badge.json",
    "https://zeron-ui.vercel.app/r/button.json",
    "https://zeron-ui.vercel.app/r/checkbox.json",
    "https://zeron-ui.vercel.app/r/checkbox-group.json",
    "https://zeron-ui.vercel.app/r/dropdown.json",
    "https://zeron-ui.vercel.app/r/input.json",
    "https://zeron-ui.vercel.app/r/popover.json",
    "https://zeron-ui.vercel.app/r/select.json",
    "https://zeron-ui.vercel.app/r/table.json"
  ],
  "files": [
    {
      "path": "src/components/ui/data-table.tsx",
      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type ColumnPinningState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type RowSelectionState,\n  type SortingState,\n  type Table as TanstackTable,\n  type TableOptions,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport * as React from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  CheckboxGroup,\n  CheckboxItem,\n} from \"@/components/ui/checkbox-group\";\nimport {\n  DropdownContent,\n  DropdownLabel,\n  DropdownMenu,\n  DropdownSeparator,\n  DropdownTrigger,\n} from \"@/components/ui/dropdown\";\nimport { MenuItem } from \"@/components/ui/menu-item\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n} from \"@/components/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\nimport { useIcon, type IconComponent } from \"@/lib/icon-context\";\nimport { useShape } from \"@/lib/shape-context\";\n\nexport type DataTableColumnMeta = {\n  label?: string;\n  options?: DataTableFilterOption[];\n  placeholder?: string;\n  unit?: string;\n  variant?: \"text\" | \"number\" | \"select\" | \"multiSelect\";\n};\n\nexport type DataTableFilterOption = {\n  icon?: IconComponent;\n  label: string;\n  value: string;\n};\n\ndeclare module \"@tanstack/react-table\" {\n  // TanStack exposes this empty interface specifically for declaration\n  // merging; the type parameters must match its upstream declaration.\n  // eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData, TValue> extends DataTableColumnMeta {}\n}\n\nexport type UseDataTableProps<TData> = Omit<\n  TableOptions<TData>,\n  | \"getCoreRowModel\"\n  | \"getFacetedRowModel\"\n  | \"getFacetedUniqueValues\"\n  | \"getFilteredRowModel\"\n  | \"getPaginationRowModel\"\n  | \"getSortedRowModel\"\n  | \"onColumnFiltersChange\"\n  | \"onColumnPinningChange\"\n  | \"onColumnVisibilityChange\"\n  | \"onPaginationChange\"\n  | \"onRowSelectionChange\"\n  | \"onSortingChange\"\n  | \"state\"\n> & {\n  columns: ColumnDef<TData, unknown>[];\n  initialState?: TableOptions<TData>[\"initialState\"];\n};\n\nfunction useDataTable<TData>({\n  initialState,\n  ...options\n}: UseDataTableProps<TData>) {\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    initialState?.columnFilters ?? []\n  );\n  const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>(\n    initialState?.columnPinning ?? {}\n  );\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>(initialState?.columnVisibility ?? {});\n  const [pagination, setPagination] = React.useState<PaginationState>({\n    pageIndex: initialState?.pagination?.pageIndex ?? 0,\n    pageSize: initialState?.pagination?.pageSize ?? 10,\n  });\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(\n    initialState?.rowSelection ?? {}\n  );\n  const [sorting, setSorting] = React.useState<SortingState>(\n    initialState?.sorting ?? []\n  );\n\n  const table = useReactTable({\n    ...options,\n    getCoreRowModel: getCoreRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnPinningChange: setColumnPinning,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      columnPinning,\n      columnVisibility,\n      pagination,\n      rowSelection,\n      sorting,\n    },\n  });\n\n  return { table };\n}\n\nexport type DataTableProps<TData> = React.ComponentProps<\"div\"> & {\n  actionBar?: React.ReactNode;\n  emptyMessage?: React.ReactNode;\n  table: TanstackTable<TData>;\n};\n\nfunction DataTable<TData>({\n  actionBar,\n  children,\n  className,\n  emptyMessage = \"No results.\",\n  table,\n  ...props\n}: DataTableProps<TData>) {\n  const shape = useShape();\n\n  return (\n    <div\n      className={cn(\"flex w-full min-w-0 flex-col gap-2\", className)}\n      data-slot=\"data-table\"\n      {...props}\n    >\n      {children}\n      <div\n        className={cn(\n          \"overflow-hidden border border-border-subtle bg-surface-floating\",\n          shape.container\n        )}\n      >\n        <div className=\"overflow-x-auto\">\n          <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    className=\"h-control-md whitespace-nowrap\"\n                    colSpan={header.colSpan}\n                    key={header.id}\n                    style={getCommonPinningStyles(header.column)}\n                  >\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, rowIndex) => (\n                <TableRow\n                  data-state={row.getIsSelected() ? \"selected\" : undefined}\n                  index={rowIndex}\n                  key={row.id}\n                  className=\"data-[state=selected]:bg-selection\"\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className={cn(\n                        \"whitespace-nowrap\",\n                        cell.column.getIsPinned() &&\n                          \"group-[.is-active]/row:[background-image:linear-gradient(var(--hover),var(--hover))]\"\n                      )}\n                      key={cell.id}\n                      style={getCommonPinningStyles(cell.column, {\n                        backgroundImage: row.getIsSelected()\n                          ? \"linear-gradient(var(--selection), var(--selection))\"\n                          : undefined,\n                      })}\n                    >\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center text-fg-muted\"\n                  colSpan={Math.max(table.getVisibleLeafColumns().length, 1)}\n                >\n                  {emptyMessage}\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n          </Table>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2.5\">\n        <DataTablePagination table={table} />\n        {actionBar &&\n          table.getFilteredSelectedRowModel().rows.length > 0 &&\n          actionBar}\n      </div>\n    </div>\n  );\n}\n\nexport type DataTableColumnHeaderProps<TData, TValue> =\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    column: Column<TData, TValue>;\n    label: string;\n  };\n\nfunction DataTableColumnHeader<TData, TValue>({\n  className,\n  column,\n  label,\n  ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  const [open, setOpen] = React.useState(false);\n  const ChevronUp = useIcon(\"chevron-up\");\n  const ChevronDown = useIcon(\"chevron-down\");\n  const ChevronsUpDown = useIcon(\"chevrons-up-down\");\n  const EyeOff = useIcon(\"eye-off\");\n  const X = useIcon(\"x\");\n  const sorted = column.getIsSorted();\n  const canSort = column.getCanSort();\n  const canHide = column.getCanHide();\n  const SortIcon = !canSort\n    ? ChevronDown\n    : sorted === \"asc\"\n      ? ChevronUp\n      : sorted === \"desc\"\n        ? ChevronDown\n        : ChevronsUpDown;\n\n  if (!canSort && !canHide) {\n    return <div className={cn(className)}>{label}</div>;\n  }\n\n  return (\n    <DropdownMenu open={open} onOpenChange={setOpen}>\n      <DropdownTrigger\n        render={\n          <Button\n            active={open}\n            className={cn(\"-ml-2 px-2 text-body font-medium text-fg-default\", className)}\n            size=\"sm\"\n            trailingIcon={SortIcon}\n            variant=\"ghost\"\n            {...props}\n          >\n            {label}\n          </Button>\n        }\n      />\n      <DropdownContent\n        align=\"start\"\n        checkedIndex={sorted === \"asc\" ? 0 : sorted === \"desc\" ? 1 : undefined}\n        className=\"w-40\"\n      >\n        <DropdownLabel>{label}</DropdownLabel>\n        {canSort && (\n          <>\n            <MenuItem\n              checked={sorted === \"asc\"}\n              icon={ChevronUp}\n              index={0}\n              label=\"Ascending\"\n              onSelect={() => column.toggleSorting(false)}\n            />\n            <MenuItem\n              checked={sorted === \"desc\"}\n              icon={ChevronDown}\n              index={1}\n              label=\"Descending\"\n              onSelect={() => column.toggleSorting(true)}\n            />\n            {sorted && (\n              <MenuItem\n                icon={X}\n                index={2}\n                label=\"Reset sorting\"\n                onSelect={() => column.clearSorting()}\n              />\n            )}\n          </>\n        )}\n        {canSort && canHide && <DropdownSeparator />}\n        {canHide && (\n          <MenuItem\n            icon={EyeOff}\n            index={3}\n            label=\"Hide column\"\n            onSelect={() => column.toggleVisibility(false)}\n          />\n        )}\n      </DropdownContent>\n    </DropdownMenu>\n  );\n}\n\nexport type DataTableToolbarProps<TData> = React.ComponentProps<\"div\"> & {\n  table: TanstackTable<TData>;\n};\n\nfunction DataTableToolbar<TData>({\n  children,\n  className,\n  table,\n  ...props\n}: DataTableToolbarProps<TData>) {\n  const CircleX = useIcon(\"circle-x\");\n  const isFiltered = table.getState().columnFilters.length > 0;\n  const columns = React.useMemo(\n    () =>\n      table\n        .getAllColumns()\n        .filter(\n          (column) => column.getCanFilter() && column.columnDef.meta?.variant\n        ),\n    [table]\n  );\n\n  return (\n    <div\n      aria-orientation=\"horizontal\"\n      className={cn(\n        \"flex w-full flex-wrap items-center justify-between gap-2 overflow-visible p-1\",\n        className\n      )}\n      role=\"toolbar\"\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n        {columns.map((column) => (\n          <DataTableToolbarFilter column={column} key={column.id} />\n        ))}\n        {isFiltered && (\n          <Button\n            aria-label=\"Reset filters\"\n            className=\"border-dashed\"\n            leadingIcon={CircleX}\n            onClick={() => table.resetColumnFilters()}\n            size=\"md\"\n            variant=\"tertiary\"\n          >\n            Reset\n          </Button>\n        )}\n      </div>\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {children}\n        <DataTableViewOptions table={table} />\n      </div>\n    </div>\n  );\n}\n\ntype DataTableToolbarFilterProps<TData> = {\n  column: Column<TData>;\n};\n\nfunction DataTableToolbarFilter<TData>({\n  column,\n}: DataTableToolbarFilterProps<TData>) {\n  const meta = column.columnDef.meta;\n  const variant = meta?.variant;\n\n  if (!variant) return null;\n\n  if (variant === \"select\" || variant === \"multiSelect\") {\n    return (\n      <DataTableFacetedFilter\n        column={column}\n        multiple={variant === \"multiSelect\"}\n        options={meta?.options ?? []}\n        title={meta?.label ?? column.id}\n      />\n    );\n  }\n\n  if (variant === \"number\") {\n    return (\n      <div className=\"relative shrink-0\">\n        <Input\n          className={cn(\"w-32\", meta?.unit && \"pr-10\")}\n          inputMode=\"numeric\"\n          onChange={(event) => column.setFilterValue(event.target.value)}\n          placeholder={meta?.placeholder ?? meta?.label ?? column.id}\n          size=\"default\"\n          type=\"number\"\n          value={(column.getFilterValue() as string) ?? \"\"}\n        />\n        {meta?.unit && (\n          <span className=\"pointer-events-none absolute inset-y-0 right-2 flex items-center text-label text-fg-muted\">\n            {meta.unit}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <Input\n      className=\"w-40 lg:w-56\"\n      onChange={(event) => column.setFilterValue(event.target.value)}\n      placeholder={meta?.placeholder ?? meta?.label ?? column.id}\n      size=\"default\"\n      value={(column.getFilterValue() as string) ?? \"\"}\n    />\n  );\n}\n\nexport type DataTableFacetedFilterProps<TData, TValue> = {\n  column: Column<TData, TValue>;\n  multiple?: boolean;\n  options: DataTableFilterOption[];\n  title: string;\n};\n\nfunction DataTableFacetedFilter<TData, TValue>({\n  column,\n  multiple = false,\n  options,\n  title,\n}: DataTableFacetedFilterProps<TData, TValue>) {\n  const [open, setOpen] = React.useState(false);\n  const CirclePlus = useIcon(\"circle-plus\");\n  const CircleX = useIcon(\"circle-x\");\n  const columnFilterValue = column.getFilterValue();\n  const selectedValues = new Set(\n    Array.isArray(columnFilterValue) ? columnFilterValue : []\n  );\n  const checkedIndices = new Set(\n    options.flatMap((option, index) =>\n      selectedValues.has(option.value) ? [index] : []\n    )\n  );\n  const selectedOptions = options.filter((option) =>\n    selectedValues.has(option.value)\n  );\n\n  const toggleOption = (option: DataTableFilterOption) => {\n    const isSelected = selectedValues.has(option.value);\n    if (multiple) {\n      const nextValues = new Set(selectedValues);\n      if (isSelected) nextValues.delete(option.value);\n      else nextValues.add(option.value);\n      const filterValue = Array.from(nextValues);\n      column.setFilterValue(filterValue.length ? filterValue : undefined);\n    } else {\n      column.setFilterValue(isSelected ? undefined : [option.value]);\n      setOpen(false);\n    }\n  };\n\n  return (\n    <Popover onOpenChange={setOpen} open={open}>\n      <PopoverTrigger\n        render={\n          <Button\n            active={open}\n            aria-label={\n              selectedOptions.length > 0\n                ? `${title}: ${selectedOptions.map((option) => option.label).join(\", \")}`\n                : title\n            }\n            className=\"shrink-0 border-dashed\"\n            leadingIcon={selectedValues.size > 0 ? CircleX : CirclePlus}\n            size=\"md\"\n            variant=\"tertiary\"\n          >\n            {selectedValues.size === 0 ? (\n              title\n            ) : (\n              <>\n                {selectedOptions.slice(0, 2).map((option) => (\n                  <Badge color=\"gray\" key={option.value} size=\"sm\">\n                    {option.label}\n                  </Badge>\n                ))}\n                {selectedOptions.length > 2 && (\n                  <Badge color=\"gray\" size=\"sm\">\n                    +{selectedOptions.length - 2}\n                  </Badge>\n                )}\n              </>\n            )}\n          </Button>\n        }\n      />\n      <PopoverContent align=\"start\" className=\"w-52 p-1\" sideOffset={4}>\n        <div className=\"px-2 py-1.5 text-label text-fg-muted\">\n          {title}\n        </div>\n        <div className=\"-mx-1 my-1 h-px\" />\n        <CheckboxGroup\n          aria-label={title}\n          checkedIndices={checkedIndices}\n          className=\"w-full\"\n        >\n          {options.map((option, index) => (\n            <CheckboxItem\n              checked={selectedValues.has(option.value)}\n              icon={option.icon}\n              index={index}\n              key={option.value}\n              label={option.label}\n              onToggle={() => toggleOption(option)}\n              trailing={column.getFacetedUniqueValues().get(option.value) ?? 0}\n            />\n          ))}\n        </CheckboxGroup>\n        {selectedValues.size > 0 && (\n          <Button\n            className=\"mt-0.5 w-full border-t border-border-subtle\"\n            onClick={() => {\n              column.setFilterValue(undefined);\n              setOpen(false);\n            }}\n            size=\"md\"\n            variant=\"ghost\"\n          >\n            Clear filters\n          </Button>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport type DataTablePaginationProps<TData> = React.ComponentProps<\"div\"> & {\n  pageSizeOptions?: number[];\n  table: TanstackTable<TData>;\n};\n\nfunction DataTablePagination<TData>({\n  className,\n  pageSizeOptions = [10, 20, 30, 40, 50],\n  table,\n  ...props\n}: DataTablePaginationProps<TData>) {\n  const ChevronLeft = useIcon(\"chevron-left\");\n  const ChevronRight = useIcon(\"chevron-right\");\n  const ChevronsLeft = useIcon(\"chevrons-left\");\n  const ChevronsRight = useIcon(\"chevrons-right\");\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 text-body sm:flex-row sm:gap-8\",\n        className\n      )}\n      data-slot=\"data-table-pagination\"\n      {...props}\n    >\n      <div className=\"flex-1 whitespace-nowrap text-fg-muted\">\n        {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n        {table.getFilteredRowModel().rows.length} row(s) selected.\n      </div>\n      <div className=\"flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8\">\n        <div className=\"flex items-center gap-2 whitespace-nowrap\">\n          <span className=\"text-label text-fg-default\">Rows per page</span>\n          <Select\n            onValueChange={(value) => table.setPageSize(Number(value))}\n            value={`${table.getState().pagination.pageSize}`}\n          >\n            <SelectTrigger\n              aria-label=\"Rows per page\"\n              className=\"min-w-18 w-18 px-2 text-label\"\n              placeholder={`${table.getState().pagination.pageSize}`}\n              size=\"md\"\n            />\n            <SelectContent>\n            {pageSizeOptions.map((pageSize) => (\n              <SelectItem\n                index={pageSizeOptions.indexOf(pageSize)}\n                key={pageSize}\n                value={`${pageSize}`}\n              >\n                {pageSize}\n              </SelectItem>\n            ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"whitespace-nowrap text-label tabular-nums text-fg-default\">\n          Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n          {Math.max(table.getPageCount(), 1)}\n        </div>\n        <div className=\"flex items-center gap-1.5\">\n          <Button\n            aria-label=\"Go to first page\"\n            className=\"hidden lg:inline-flex\"\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.setPageIndex(0)}\n            size=\"icon-sm\"\n            variant=\"tertiary\"\n          >\n            <ChevronsLeft />\n          </Button>\n          <Button\n            aria-label=\"Go to previous page\"\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.previousPage()}\n            size=\"icon-sm\"\n            variant=\"tertiary\"\n          >\n            <ChevronLeft />\n          </Button>\n          <Button\n            aria-label=\"Go to next page\"\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.nextPage()}\n            size=\"icon-sm\"\n            variant=\"tertiary\"\n          >\n            <ChevronRight />\n          </Button>\n          <Button\n            aria-label=\"Go to last page\"\n            className=\"hidden lg:inline-flex\"\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.setPageIndex(Math.max(table.getPageCount() - 1, 0))}\n            size=\"icon-sm\"\n            variant=\"tertiary\"\n          >\n            <ChevronsRight />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport type DataTableViewOptionsProps<TData> = {\n  className?: string;\n  table: TanstackTable<TData>;\n};\n\nfunction DataTableViewOptions<TData>({\n  className,\n  table,\n}: DataTableViewOptionsProps<TData>) {\n  const [open, setOpen] = React.useState(false);\n  const Settings = useIcon(\"settings\");\n  const columns = React.useMemo(\n    () =>\n      table\n        .getAllColumns()\n        .filter(\n          (column) =>\n            typeof column.accessorFn !== \"undefined\" && column.getCanHide()\n        ),\n    [table]\n  );\n\n  if (!columns.length) return null;\n\n  const checkedIndices = new Set(\n    columns.flatMap((column, index) => (column.getIsVisible() ? [index] : []))\n  );\n\n  return (\n    <Popover onOpenChange={setOpen} open={open}>\n      <PopoverTrigger\n        render={\n          <Button\n            active={open}\n            aria-label=\"Toggle columns\"\n            className={cn(\"shrink-0\", className)}\n            leadingIcon={Settings}\n            size=\"md\"\n            variant=\"tertiary\"\n          >\n            View\n          </Button>\n        }\n      />\n      <PopoverContent align=\"end\" className=\"w-48 p-1\" sideOffset={4}>\n        <div className=\"px-2 py-1.5 text-label text-fg-muted\">\n          Toggle columns\n        </div>\n        <div className=\"-mx-1 my-1\" />\n        <CheckboxGroup\n          aria-label=\"Toggle columns\"\n          checkedIndices={checkedIndices}\n          className=\"w-full\"\n        >\n          {columns.map((column, index) => (\n            <CheckboxItem\n              checked={column.getIsVisible()}\n              index={index}\n              key={column.id}\n              label={column.columnDef.meta?.label ?? column.id}\n              onToggle={() => column.toggleVisibility(!column.getIsVisible())}\n            />\n          ))}\n        </CheckboxGroup>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nfunction getCommonPinningStyles<TData, TValue>(\n  column: Column<TData, TValue>,\n  {\n    backgroundColor = \"var(--surface-floating)\",\n    backgroundImage,\n  }: {\n    backgroundColor?: string;\n    backgroundImage?: string;\n  } = {}\n): React.CSSProperties {\n  const isPinned = column.getIsPinned();\n  const isLastLeftPinnedColumn =\n    isPinned === \"left\" && column.getIsLastColumn(\"left\");\n  const isFirstRightPinnedColumn =\n    isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n  return {\n    backgroundColor: isPinned ? backgroundColor : undefined,\n    backgroundImage: isPinned ? backgroundImage : undefined,\n    boxShadow: isLastLeftPinnedColumn\n      ? \"-4px 0 4px -4px var(--border) inset\"\n      : isFirstRightPinnedColumn\n        ? \"4px 0 4px -4px var(--border) inset\"\n        : undefined,\n    left: isPinned === \"left\" ? `${column.getStart(\"left\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    right: isPinned === \"right\" ? `${column.getAfter(\"right\")}px` : undefined,\n    width: column.getSize(),\n    zIndex: isPinned ? \"var(--layer-control)\" : undefined,\n  };\n}\n\nexport {\n  DataTable,\n  DataTableColumnHeader,\n  DataTableFacetedFilter,\n  DataTablePagination,\n  DataTableToolbar,\n  DataTableViewOptions,\n  useDataTable,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/data-table.tsx"
    }
  ],
  "type": "registry:ui"
}