"use client"; import { type Column, FlexRender, type ReactTable, type Row, type RowData, Subscribe, type Table, type TableFeatures, } from "@tanstack/react-table"; import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, PlusCircleIcon, SearchIcon, Settings2Icon, } from "lucide-react"; import type * as React from "react"; import { cn } from "@/registry/default/lib/utils"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { Checkbox } from "@/registry/default/ui/checkbox"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/default/ui/input-group"; import { Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuSeparator, MenuTrigger, } from "@/registry/default/ui/menu"; import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue, } from "@/registry/default/ui/select"; import { TableBody, TableCell, TableHead, TableHeader, Table as TableRoot, TableRow, type TableVariant, } from "@/registry/default/ui/table"; // TanStack Table v9 only installs a feature's APIs when that feature is // registered with `tableFeatures()`. Each part below requires the features it // uses at the call site, then narrows the table once internally, because // feature-gated methods can't be resolved on a still-generic table type. type FeatureKey = keyof TableFeatures; type WithFeatures = Pick, K>; type AnyTable = Table, TData>; // State is read through `Subscribe` rather than `table.state`, so every part // stays current even when the caller narrows `useTable`'s selector, and the // React Compiler can't memoize away a read hidden behind a table method. function hasFeature(target: object, method: string): boolean { return method in target; } function ariaSort( column: Column, TData, unknown>, ): React.AriaAttributes["aria-sort"] { if (!hasFeature(column, "getIsSorted") || !column.getCanSort()) { return undefined; } const sorted = column.getIsSorted(); if (sorted === "asc") return "ascending"; if (sorted === "desc") return "descending"; return "none"; } export interface DataTableProps< TFeatures extends TableFeatures, TData extends RowData, TSelected, > extends Omit, "children"> { table: ReactTable; /** Shown in a full-width row when there are no rows to display. */ emptyMessage?: React.ReactNode; variant?: TableVariant; } export function DataTable< TFeatures extends TableFeatures, TData extends RowData, TSelected, >({ table: tableProp, emptyMessage = "No results.", ...props }: DataTableProps): React.ReactElement { "use no memo"; const table = tableProp as unknown as ReactTable< WithFeatures, TData >; return ( state}> {() => { const rows = table.getRowModel().rows; const leafColumns = hasFeature(table, "getVisibleLeafColumns") ? table.getVisibleLeafColumns() : table.getAllLeafColumns(); return ( {table.getHeaderGroups().map((group) => ( {group.headers.map((header) => ( {header.isPlaceholder ? null : ( )} ))} ))} {rows.length > 0 ? ( rows.map((row) => ( {(hasFeature(row, "getVisibleCells") ? row.getVisibleCells() : row.getAllCells() ).map((cell) => ( ))} )) ) : ( {emptyMessage} )} ); }} ); } export function DataTableColumnHeader< TFeatures extends TableFeatures & WithFeatures<"rowSortingFeature">, TData extends RowData, TValue, >({ column: columnProp, title, className, }: { column: Column; title: React.ReactNode; className?: string; }): React.ReactElement { const column = columnProp as unknown as Column< WithFeatures<"rowSortingFeature">, TData, TValue >; if (!column.getCanSort()) { return {title}; } return ( column.getIsSorted()} source={column.table.atoms.sorting} > {(sorted) => ( )} ); } export function DataTableSelectAll< TFeatures extends TableFeatures & WithFeatures<"rowSelectionFeature">, TData extends RowData, >({ table: tableProp, label = "Select all rows on this page", }: { table: Table; label?: string; }): React.ReactElement { const table = tableProp as unknown as Table< WithFeatures<"rowSelectionFeature">, TData >; return ( ({ all: table.getIsAllPageRowsSelected(), some: table.getIsSomePageRowsSelected(), })} source={table.store} > {({ all, some }) => ( table.toggleAllPageRowsSelected(checked) } /> )} ); } export function DataTableRowCheckbox< TFeatures extends TableFeatures & WithFeatures<"rowSelectionFeature">, TData extends RowData, >({ row: rowProp, label = "Select row", }: { row: Row; label?: string; }): React.ReactElement { const row = rowProp as unknown as Row< WithFeatures<"rowSelectionFeature">, TData >; return ( row.getIsSelected()} source={row.table.atoms.rowSelection} > {(selected) => ( // The handler reads `target.checked` and Shift for range selection. row.getToggleSelectedHandler()({ shiftKey: (details.event as MouseEvent | undefined)?.shiftKey, target: { checked }, }) } // Shift-click range selection would otherwise also select the text // between the two clicks. onMouseDown={(event) => { if (event.shiftKey) event.preventDefault(); }} /> )} ); } export function DataTableSearch< TFeatures extends TableFeatures & WithFeatures<"globalFilteringFeature">, TData extends RowData, >({ table: tableProp, placeholder = "Search…", className, }: { table: Table; placeholder?: string; className?: string; }): React.ReactElement { const table = tableProp as unknown as Table< WithFeatures<"globalFilteringFeature">, TData >; return ( {(globalFilter) => ( table.setGlobalFilter(event.target.value)} placeholder={placeholder} size="sm" type="search" value={(globalFilter as string | undefined) ?? ""} /> )} ); } export interface DataTableFilterOption { label: string; value: string; icon?: React.ComponentType<{ className?: string }>; } /** * Multi-select filter for one column. Give the column * `filterFn: "arrHas"` (registered from `filterFn_arrHas`), which keeps rows * whose value equals any selected option. (`arrIncludesSome` expects the * row's value itself to be an array.) * Counts appear when the column faceting feature is registered. */ export function DataTableFacetedFilter< TFeatures extends TableFeatures & WithFeatures<"columnFilteringFeature">, TData extends RowData, TValue, >({ column: columnProp, title, options, }: { column: Column; title: string; options: DataTableFilterOption[]; }): React.ReactElement { const column = columnProp as unknown as Column< WithFeatures<"columnFilteringFeature" | "columnFacetingFeature">, TData, TValue >; const facets = hasFeature(column, "getFacetedUniqueValues") ? column.getFacetedUniqueValues() : undefined; return ( (column.getFilterValue() as string[] | undefined) ?? []} source={column.table.atoms.columnFilters} > {(selected) => { const toggle = (value: string, checked: boolean) => { const next = checked ? [...selected, value] : selected.filter((v) => v !== value); column.setFilterValue(next.length > 0 ? next : undefined); }; return ( } > {title} {options.map((option) => ( toggle(option.value, checked)} > {option.icon && ( )} {option.label} {facets && ( {facets.get(option.value) ?? 0} )} ))} {selected.length > 0 && ( <> column.setFilterValue(undefined)}> Clear filter )} ); }} ); } export function DataTableViewOptions< TFeatures extends TableFeatures & WithFeatures<"columnVisibilityFeature">, TData extends RowData, >({ table: tableProp, }: { table: Table; }): React.ReactElement { const table = tableProp as unknown as Table< WithFeatures<"columnVisibilityFeature">, TData >; return ( {() => ( } > Toggle columns {table .getAllLeafColumns() .filter((column) => column.getCanHide()) .map((column) => ( column.toggleVisibility(checked) } > {typeof column.columnDef.header === "string" ? column.columnDef.header : column.id} ))} )} ); } export function DataTablePagination< TFeatures extends TableFeatures & WithFeatures<"rowPaginationFeature">, TData extends RowData, >({ table: tableProp, pageSizeOptions = [10, 20, 50], className, }: { table: Table; pageSizeOptions?: number[]; className?: string; }): React.ReactElement { const table = tableProp as unknown as AnyTable; const canSelect = hasFeature(table, "getFilteredSelectedRowModel"); return ( ({ filteredCount: table.getPrePaginatedRowModel().rows.length, pageCount: Math.max(table.getPageCount(), 1), pageIndex: state.pagination.pageIndex, pageSize: state.pagination.pageSize, selectedCount: canSelect ? table.getFilteredSelectedRowModel().rows.length : 0, })} source={table.store} > {({ filteredCount, pageCount, pageIndex, pageSize, selectedCount }) => (

{canSelect && selectedCount > 0 ? `${selectedCount} of ${filteredCount} row(s) selected` : `${filteredCount} row(s)`}

Rows per page

Page {pageIndex + 1} of {pageCount}

)} ); }