{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table",
  "title": "Data Table",
  "description": "A data table built on TanStack Table with sorting, filtering, pagination, and skeleton loading.",
  "dependencies": [
    "@tanstack/react-table",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ds.formance.com/r/badge.json",
    "https://ds.formance.com/r/button.json",
    "https://ds.formance.com/r/command.json",
    "https://ds.formance.com/r/dropdown-menu.json",
    "https://ds.formance.com/r/popover.json",
    "https://ds.formance.com/r/select.json",
    "https://ds.formance.com/r/skeleton.json",
    "https://ds.formance.com/r/table.json"
  ],
  "files": [
    {
      "path": "registry/default/ui-fragments/data-table.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  Column,\n  ColumnDef,\n  ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  InitialTableState,\n  Row,\n  SortingState,\n  Table as TanstackTable,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport {\n  ArrowDown,\n  ArrowUp,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  CirclePlus,\n  Ellipsis,\n  EyeOff,\n  Settings2,\n  X,\n} from 'lucide-react';\n\nimport { CSSProperties } from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Badge, type TBadgeProps } from '@/registry/default/ui/badge';\nimport { Button } from '@/registry/default/ui/button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/default/ui/command';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu';\nimport { Input } from '@/registry/default/ui/input';\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select';\nimport { Separator } from '@/registry/default/ui/separator';\nimport { Skeleton } from '@/registry/default/ui/skeleton';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table';\n\n// ---------------------------------------------------------------------------\n// Cell border styles (matches platform-ui column/row separators)\n// ---------------------------------------------------------------------------\n\nfunction getCellBorderStyles(\n  column: Column<any, any>,\n  isLastRow: boolean\n): CSSProperties {\n  const isFirstColumn = column.getIsFirstColumn();\n\n  return {\n    borderLeft: !isFirstColumn ? '1px solid var(--border)' : undefined,\n    borderBottom: !isLastRow ? '1px solid var(--border)' : undefined,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// DataTableColumnHeader\n// ---------------------------------------------------------------------------\n\ntype TDataTableColumnHeaderProps<TData, TValue> =\n  React.HTMLAttributes<HTMLDivElement> & {\n    column: Column<TData, TValue>;\n    title: string;\n  };\n\nfunction DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: TDataTableColumnHeaderProps<TData, TValue>) {\n  if (!column.getCanSort()) {\n    return <div className={cn(className)}>{title}</div>;\n  }\n\n  return (\n    <div className={cn('flex items-center space-x-2', className)}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"-ml-3 h-8 data-[state=open]:bg-accent\"\n          >\n            <span>{title}</span>\n            {column.getIsSorted() === 'desc' ? (\n              <ArrowDown className=\"ml-2 h-4 w-4\" />\n            ) : column.getIsSorted() === 'asc' ? (\n              <ArrowUp className=\"ml-2 h-4 w-4\" />\n            ) : (\n              <ChevronDown className=\"ml-2 h-4 w-4\" />\n            )}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>\n            <ArrowUp className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n            Asc\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>\n            <ArrowDown className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n            Desc\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>\n            <EyeOff className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n            Hide\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// DataTableFacetedFilter\n// ---------------------------------------------------------------------------\n\ntype TFacetedFilterOption = {\n  label: string;\n  value: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  variant?: TBadgeProps['variant'];\n};\n\ntype TDataTableFacetedFilterProps<TData, TValue> = {\n  column?: Column<TData, TValue>;\n  title?: string;\n  options: TFacetedFilterOption[];\n};\n\nfunction DataTableFacetedFilter<TData, TValue>({\n  column,\n  title,\n  options,\n}: TDataTableFacetedFilterProps<TData, TValue>) {\n  const facets = column?.getFacetedUniqueValues();\n  const selectedValues = new Set(column?.getFilterValue() as string[]);\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outlineDashed\"\n          data-testid={`datatable-filter-${title?.toLowerCase()}`}\n        >\n          <CirclePlus className=\"mr-2 h-4 w-4\" />\n          <span>{title}</span>\n          {selectedValues?.size > 0 && (\n            <>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-4\" />\n              <div className=\"space-x-1 flex\">\n                {selectedValues.size > 2 ? (\n                  <Badge variant=\"secondary\">\n                    {selectedValues.size} selected\n                  </Badge>\n                ) : (\n                  options\n                    .filter((option) => selectedValues.has(option.value))\n                    .map((option) => (\n                      <Badge\n                        variant={option.variant ?? 'primary'}\n                        key={option.value}\n                      >\n                        {option.label}\n                      </Badge>\n                    ))\n                )}\n              </div>\n            </>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder={title} />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const isSelected = selectedValues.has(option.value);\n\n                return (\n                  <CommandItem\n                    key={option.value}\n                    onSelect={() => {\n                      if (isSelected) {\n                        selectedValues.delete(option.value);\n                      } else {\n                        selectedValues.add(option.value);\n                      }\n                      const filterValues = Array.from(selectedValues);\n                      column?.setFilterValue(\n                        filterValues.length ? filterValues : undefined\n                      );\n                    }}\n                  >\n                    <div\n                      className={cn(\n                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',\n                        isSelected\n                          ? \"bg-primary text-primary-foreground! [&_svg:not([class*='text-'])]:text-primary-foreground\"\n                          : 'opacity-50 [&_svg]:invisible'\n                      )}\n                    >\n                      {isSelected && <Check className={cn('h-4 w-4')} />}\n                    </div>\n                    {option.icon && (\n                      <option.icon className=\"mr-2 h-4 w-4 text-muted-foreground\" />\n                    )}\n                    <span>{option.label}</span>\n                    {facets?.get(option.value) && (\n                      <span className=\"ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs\">\n                        {facets.get(option.value)}\n                      </span>\n                    )}\n                  </CommandItem>\n                );\n              })}\n            </CommandGroup>\n            {selectedValues.size > 0 && (\n              <>\n                <CommandSeparator />\n                <CommandGroup>\n                  <CommandItem\n                    onSelect={() => column?.setFilterValue(undefined)}\n                    className=\"justify-center text-center\"\n                  >\n                    Clear filters\n                  </CommandItem>\n                </CommandGroup>\n              </>\n            )}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// DataTableViewOptions\n// ---------------------------------------------------------------------------\n\ntype TDataTableViewOptionsProps<TData> = {\n  table: TanstackTable<TData>;\n};\n\nfunction DataTableViewOptions<TData>({\n  table,\n}: TDataTableViewOptionsProps<TData>) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\" className=\"ml-auto h-8 flex\">\n          <Settings2 className=\"mr-2 h-4 w-4\" />\n          All columns\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {table\n          .getAllColumns()\n          .filter(\n            (column) =>\n              typeof column.accessorFn !== 'undefined' && column.getCanHide()\n          )\n          .map((column) => (\n            <DropdownMenuCheckboxItem\n              key={column.id}\n              className=\"capitalize\"\n              checked={column.getIsVisible()}\n              onCheckedChange={(value) => column.toggleVisibility(!!value)}\n            >\n              {column.id}\n            </DropdownMenuCheckboxItem>\n          ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// DataTableToolbar\n// ---------------------------------------------------------------------------\n\ntype TDataTableToolbarProps<TData> = {\n  table: TanstackTable<TData>;\n  searchConfig?: {\n    placeholder: string;\n    columnKey: string;\n    size?: 'sm' | 'md' | 'lg';\n  }[];\n  filtersConfig?: {\n    title: string;\n    column: string;\n    options: TFacetedFilterOption[];\n  }[];\n  toolbarLeft?: React.ReactNode;\n  toolbarRight?: React.ReactNode;\n};\n\nfunction DataTableToolbar<TData>({\n  table,\n  searchConfig,\n  filtersConfig,\n  toolbarLeft,\n  toolbarRight,\n}: TDataTableToolbarProps<TData>) {\n  const isFiltered = table.getState().columnFilters.length > 0;\n\n  return (\n    <div className=\"flex items-center gap-2 justify-between\">\n      <div className=\"flex items-center gap-2\">\n        {toolbarLeft}\n        {searchConfig?.map((search, index) => (\n          <Input\n            key={index}\n            placeholder={search.placeholder}\n            value={\n              (table.getColumn(search.columnKey)?.getFilterValue() as string) ??\n              ''\n            }\n            onChange={(event) =>\n              table\n                .getColumn(search.columnKey)\n                ?.setFilterValue(event.target.value)\n            }\n            className={cn('', {\n              'w-28': search.size === 'sm',\n              'w-40 lg:w-52': search.size === 'md' || !search.size,\n              'w-56': search.size === 'lg',\n            })}\n          />\n        ))}\n        {filtersConfig?.map((filter, index) => {\n          const col = table.getColumn(filter.column);\n          if (!col) return null;\n\n          return (\n            <DataTableFacetedFilter\n              key={index}\n              column={col}\n              title={filter.title}\n              options={filter.options}\n            />\n          );\n        })}\n        {isFiltered && (\n          <Button\n            variant=\"ghost\"\n            onClick={() => table.setColumnFilters([])}\n            className=\"h-8 px-2 lg:px-3 ml-3\"\n          >\n            Reset\n            <X className=\"ml-2 h-4 w-4\" />\n          </Button>\n        )}\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {toolbarRight}\n        <DataTableViewOptions table={table} />\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// DataTablePagination\n// ---------------------------------------------------------------------------\n\ntype TDataTablePaginationProps<TData> = {\n  table: TanstackTable<TData>;\n};\n\nfunction DataTablePagination<TData>({\n  table,\n}: TDataTablePaginationProps<TData>) {\n  return (\n    <div className=\"flex items-center justify-end px-2\">\n      <div className=\"flex items-center space-x-6 lg:space-x-8\">\n        <div className=\"flex items-center space-x-2 mr-2\">\n          <p className=\"text-sm font-medium\">Rows per page</p>\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => table.setPageSize(Number(value))}\n          >\n            <SelectTrigger className=\"h-8 w-[70px]\">\n              <SelectValue placeholder={table.getState().pagination.pageSize} />\n            </SelectTrigger>\n            <SelectContent side=\"top\">\n              {[5, 10, 15, 20, 30, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div className=\"flex items-center justify-center text-sm font-medium mr-2\">\n          Page {table.getState().pagination.pageIndex + 1} of{' '}\n          {table.getPageCount()}\n        </div>\n\n        <div className=\"flex items-center space-x-2\">\n          <Button\n            variant=\"outline\"\n            className=\"h-8 w-8 p-0\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n            type=\"button\"\n          >\n            <ChevronLeft className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            className=\"h-8 w-8 p-0\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n            type=\"button\"\n          >\n            <ChevronRight className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// DataTableRowActions\n// ---------------------------------------------------------------------------\n\ntype TDataTableRowActionsProps = {\n  children: React.ReactNode;\n};\n\nfunction DataTableRowActions({ children }: TDataTableRowActionsProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          className=\"flex h-8 w-8 p-0 data-[state=open]:bg-muted\"\n        >\n          <Ellipsis className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Open menu</span>\n        </Button>\n      </DropdownMenuTrigger>\n      {children}\n    </DropdownMenu>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// DataTableSkeleton\n// ---------------------------------------------------------------------------\n\ntype TDataTableSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {\n  columnCount: number;\n  rowCount?: number;\n  searchableColumnCount?: number;\n  filterableColumnCount?: number;\n  showViewOptions?: boolean;\n  cellWidths?: string[];\n  withHeader?: boolean;\n  withPagination?: boolean;\n  shrinkZero?: boolean;\n};\n\nfunction DataTableSkeleton({\n  columnCount,\n  rowCount = 10,\n  searchableColumnCount = 0,\n  filterableColumnCount = 0,\n  showViewOptions = true,\n  cellWidths = ['auto'],\n  withHeader = true,\n  withPagination = true,\n  shrinkZero = false,\n  className,\n  ...props\n}: TDataTableSkeletonProps) {\n  return (\n    <div\n      className={cn('w-full space-y-2.5 overflow-auto', className)}\n      {...props}\n    >\n      <div className=\"flex w-full items-center justify-between space-x-2 overflow-auto p-1\">\n        <div className=\"flex flex-1 items-center space-x-2\">\n          {searchableColumnCount > 0\n            ? Array.from({ length: searchableColumnCount }).map((_, i) => (\n                <Skeleton key={i} className=\"h-7 w-40 lg:w-60\" />\n              ))\n            : null}\n          {filterableColumnCount > 0\n            ? Array.from({ length: filterableColumnCount }).map((_, i) => (\n                <Skeleton key={i} className=\"h-7 w-[4.5rem] border-dashed\" />\n              ))\n            : null}\n        </div>\n        {showViewOptions ? (\n          <Skeleton className=\"ml-auto hidden h-7 w-[4.5rem] lg:flex\" />\n        ) : null}\n      </div>\n      <div className=\"rounded-md border border-border\">\n        <Table>\n          {withHeader && (\n            <TableHeader>\n              <TableRow className=\"hover:bg-transparent\">\n                {Array.from({ length: columnCount }).map((_, j) => (\n                  <TableHead\n                    key={j}\n                    style={{\n                      width: cellWidths[j],\n                      minWidth: shrinkZero ? cellWidths[j] : 'auto',\n                    }}\n                  >\n                    <Skeleton className=\"h-6 w-full\" />\n                  </TableHead>\n                ))}\n              </TableRow>\n            </TableHeader>\n          )}\n          <TableBody>\n            {Array.from({\n              length: withHeader ? Math.max(0, rowCount - 1) : rowCount,\n            }).map((_, i) => (\n              <TableRow key={i} className=\"hover:bg-transparent\">\n                {Array.from({ length: columnCount }).map((_, j) => (\n                  <TableCell\n                    key={j}\n                    style={{\n                      width: cellWidths[j],\n                      minWidth: shrinkZero ? cellWidths[j] : 'auto',\n                    }}\n                  >\n                    <Skeleton className=\"h-6 w-full\" />\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      {withPagination ? (\n        <div className=\"flex w-full items-center justify-between gap-4 overflow-auto p-1 sm:gap-8\">\n          <Skeleton className=\"h-7 w-40 shrink-0\" />\n          <div className=\"flex items-center gap-4 sm:gap-6 lg:gap-8\">\n            <div className=\"flex items-center space-x-2\">\n              <Skeleton className=\"h-7 w-24\" />\n              <Skeleton className=\"h-7 w-[4.5rem]\" />\n            </div>\n            <div className=\"flex items-center justify-center text-sm font-medium\">\n              <Skeleton className=\"h-7 w-20\" />\n            </div>\n            <div className=\"flex items-center space-x-2\">\n              <Skeleton className=\"size-7\" />\n              <Skeleton className=\"size-7\" />\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// DataTable\n// ---------------------------------------------------------------------------\n\ntype TDataTableProps<TData, TValue> = {\n  columns: ColumnDef<TData, TValue>[];\n  data: TData[];\n  initialState?: InitialTableState;\n  displayPagination?: boolean;\n  emptyState?: React.ReactNode;\n  renderExpandedRow?: (row: Row<TData>) => React.ReactNode;\n  getRowCanExpand?: (row: Row<TData>) => boolean;\n  // Passthrough to TanStack. Left `undefined` (its defaults) unless a consumer\n  // opts out — e.g. to silence the StrictMode \"update on a not-yet-mounted\n  // component\" dev warning caused by TanStack's microtask-queued auto-resets.\n  autoResetPageIndex?: boolean;\n  autoResetExpanded?: boolean;\n  searchConfig?: TDataTableToolbarProps<TData>['searchConfig'];\n  filtersConfig?: TDataTableToolbarProps<TData>['filtersConfig'];\n  toolbarLeft?: React.ReactNode;\n  toolbarRight?: React.ReactNode;\n  hideToolbar?: boolean;\n  onTableReady?: (table: TanstackTable<TData>) => void;\n};\n\nfunction DataTable<TData, TValue>({\n  columns,\n  data,\n  searchConfig,\n  filtersConfig,\n  initialState,\n  displayPagination = true,\n  toolbarRight,\n  toolbarLeft,\n  emptyState,\n  autoResetPageIndex,\n  autoResetExpanded,\n  hideToolbar = false,\n  onTableReady,\n}: TDataTableProps<TData, TValue>) {\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialState?.columnVisibility ?? {}\n  );\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(\n    initialState?.columnFilters ?? []\n  );\n  const [sorting, setSorting] = useState<SortingState>([]);\n\n  const table = useReactTable({\n    data,\n    columns,\n    initialState,\n    state: {\n      sorting,\n      columnVisibility,\n      columnFilters,\n    },\n    enableRowSelection: true,\n    autoResetPageIndex,\n    autoResetExpanded,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  });\n\n  const hasData = data.length > 0;\n\n  useEffect(() => {\n    onTableReady?.(table);\n  }, [onTableReady, table]);\n\n  return (\n    <div className=\"space-y-4 w-full\">\n      {!hideToolbar && (\n        <DataTableToolbar\n          table={table}\n          filtersConfig={filtersConfig}\n          searchConfig={searchConfig}\n          toolbarRight={toolbarRight}\n          toolbarLeft={toolbarLeft}\n        />\n      )}\n\n      {hasData ? (\n        <div className=\"rounded-md border border-border\">\n          <Table style={{ borderCollapse: 'separate', borderSpacing: 0 }}>\n            <TableHeader>\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  {headerGroup.headers.map((header) => (\n                    <TableHead\n                      key={header.id}\n                      colSpan={header.colSpan}\n                      className=\"whitespace-nowrap\"\n                      style={getCellBorderStyles(header.column, false)}\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                  const isLastRow =\n                    rowIndex === table.getRowModel().rows.length - 1;\n\n                  return (\n                    <TableRow\n                      key={row.id}\n                      data-state={row.getIsSelected() && 'selected'}\n                    >\n                      {row.getVisibleCells().map((cell) => (\n                        <TableCell\n                          key={cell.id}\n                          style={getCellBorderStyles(cell.column, isLastRow)}\n                        >\n                          {flexRender(\n                            cell.column.columnDef.cell,\n                            cell.getContext()\n                          )}\n                        </TableCell>\n                      ))}\n                    </TableRow>\n                  );\n                })\n              ) : (\n                <TableRow>\n                  <TableCell\n                    colSpan={columns.length}\n                    className=\"h-24 text-center\"\n                  >\n                    No results.\n                  </TableCell>\n                </TableRow>\n              )}\n            </TableBody>\n          </Table>\n        </div>\n      ) : emptyState ? (\n        emptyState\n      ) : (\n        <div className=\"rounded-md border border-border\">\n          <Table style={{ borderCollapse: 'separate', borderSpacing: 0 }}>\n            <TableHeader>\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  {headerGroup.headers.map((header) => (\n                    <TableHead\n                      key={header.id}\n                      colSpan={header.colSpan}\n                      className=\"whitespace-nowrap\"\n                      style={getCellBorderStyles(header.column, false)}\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              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      )}\n\n      {displayPagination && <DataTablePagination table={table} />}\n    </div>\n  );\n}\n\nexport {\n  DataTable,\n  DataTableColumnHeader,\n  DataTableFacetedFilter,\n  DataTablePagination,\n  DataTableRowActions,\n  DataTableSkeleton,\n  DataTableToolbar,\n  DataTableViewOptions,\n};\n\nexport type {\n  TDataTableColumnHeaderProps,\n  TDataTablePaginationProps,\n  TDataTableProps,\n  TDataTableRowActionsProps,\n  TDataTableSkeletonProps,\n  TDataTableToolbarProps,\n  TDataTableViewOptionsProps,\n  TFacetedFilterOption,\n};\n",
      "type": "registry:component",
      "target": "components/ui-fragments/data-table.tsx"
    }
  ],
  "type": "registry:component"
}