{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-table", "title": "Data Table", "description": "A virtualized data table with row and column virtualization.", "dependencies": [ "@virtuoso.dev/data-table" ], "files": [ { "path": "registry/new-york/data-table/data-table.tsx", "content": "'use client'\n\nimport * as React from 'react'\n\nimport {\n VirtuosoDataTable,\n Column,\n ColumnHeader,\n HeaderEdge,\n HeaderEnd,\n HeaderOverlay,\n HeaderStart,\n Cell,\n GroupHeaderCell,\n ColumnGroup,\n ColumnGroupHeader,\n setColumnSticky$,\n loadingState$,\n useVirtuosoLocation,\n useCurrentlyRenderedData,\n useVirtuosoLoadingState,\n} from '@virtuoso.dev/data-table'\nimport { reorderColumns$ } from '@virtuoso.dev/data-table/column-reorder'\nimport { AlertCircle, Loader2 } from 'lucide-react'\nimport '@virtuoso.dev/data-table/styles.css'\nimport { cn } from '@/lib/utils'\n\nimport type {\n VirtuosoDataTableProps,\n CellRenderParams,\n CellRenderFunction,\n ColumnHeaderChildren,\n ColumnHeaderRenderParams,\n ColumnHeaderRenderFunction,\n ColumnHeaderCustomComponent,\n HeaderSlotRenderParams,\n HeaderSlotRenderFunction,\n HeaderSlotCustomComponent,\n ColumnState,\n ColumnInfo,\n RowLocation,\n ListScrollLocation,\n Row,\n GroupHeaderCellProps,\n GroupHeaderRenderParams,\n GroupHeaderRenderFunction,\n GroupHeaderCustomComponent,\n ColumnGroupInfo,\n ColumnGroupHeaderRenderParams,\n ColumnGroupHeaderRenderFunction,\n ColumnGroupHeaderCustomComponent,\n SetColumnStickyPayload,\n DataTableComponents,\n RowComponentProps,\n StickyHeaderComponentProps,\n StickyColumnContainerComponentProps,\n LoadingComponentProps,\n DataTableLoadingState,\n} from '@virtuoso.dev/data-table'\nimport type { ReorderColumnsPayload } from '@virtuoso.dev/data-table/column-reorder'\n\nconst TableRow = React.forwardRef(function TableRow(\n { context: _context, ...props },\n ref\n) {\n return (\n \n )\n})\n\nconst TableStickyHeader = React.forwardRef(function TableStickyHeader(\n { context: _context, style, ...props },\n ref\n) {\n const mergedStyle = React.useMemo(() => ({ position: 'sticky' as const, top: 0, zIndex: 1, ...style }), [style])\n return
\n})\n\nconst TableStickyColumnContainer = React.forwardRef(\n function TableStickyColumnContainer({ context: _context, ...props }, ref) {\n return
\n }\n)\n\nfunction TableLoadingOverlay({ loadingState }: LoadingComponentProps) {\n const isError = loadingState.refresh.status === 'error'\n const message = isError ? (loadingState.refresh.errorMessage ?? 'Update failed') : 'Refreshing rows...'\n\n return (\n
\n
\n {isError ? : }\n {message}\n
\n
\n )\n}\n\nfunction TableLoadingPlaceholder({ loadingState }: LoadingComponentProps) {\n const isError = loadingState.initial.status === 'error'\n const message = isError ? (loadingState.initial.errorMessage ?? 'Failed to load rows') : 'Loading rows...'\n\n return (\n
\n
\n
\n {isError ? : }\n {message}\n
\n {!isError ? (\n
\n {Array.from({ length: 6 }, (_, index) => (\n
\n
\n
\n
\n
\n ))}\n
\n ) : null}\n
\n
\n )\n}\n\nfunction TableLoadingFooter({ loadingState }: LoadingComponentProps) {\n const isError = loadingState.end.status === 'error'\n const message = isError ? (loadingState.end.errorMessage ?? 'Failed to load more rows') : 'Loading more rows...'\n\n return (\n \n
\n {isError ? : }\n {message}\n
\n
\n )\n}\n\nconst TABLE_COMPONENTS: DataTableComponents = {\n Row: TableRow,\n StickyHeader: TableStickyHeader,\n StickyColumnContainer: TableStickyColumnContainer,\n LoadingPlaceholder: TableLoadingPlaceholder,\n LoadingOverlay: TableLoadingOverlay,\n LoadingFooter: TableLoadingFooter,\n}\n\nfunction DataTable({\n className,\n components,\n ...props\n}: VirtuosoDataTableProps & { className?: string }) {\n const mergedComponents = React.useMemo(() => ({ ...TABLE_COMPONENTS, ...components }) as DataTableComponents, [components])\n\n return (\n \n )\n}\n\nfunction DataTableColumn(props: Column.Props) {\n return \n}\n\ninterface DataTableColumnHeaderProps {\n children?: unknown\n component?: ColumnHeaderCustomComponent\n className?: string\n}\n\nfunction DataTableColumnHeader(props: DataTableColumnHeaderProps) {\n const measureClassName = 'flex h-10 items-center px-2 align-middle text-sm font-medium text-[var(--data-table-fg)]'\n const contentClassName = cn('flex min-w-0 items-center overflow-hidden truncate', props.className)\n\n if (props.component) {\n return \n }\n\n const wrapRender =\n (render: ColumnHeaderRenderFunction): ColumnHeaderRenderFunction =>\n (params) =>
{render(params)}
\n\n if (\n props.children === null ||\n props.children === undefined ||\n typeof props.children === 'string' ||\n typeof props.children === 'number' ||\n typeof props.children === 'function'\n ) {\n const userRender = props.children\n return (\n \n {wrapRender((params) => (typeof userRender === 'function' ? userRender(params) : userRender))}\n \n )\n }\n\n const wrapChildren = (children: unknown): unknown => {\n if (Array.isArray(children)) {\n return children.map(wrapChildren)\n }\n if (React.isValidElement(children) && children.type === React.Fragment) {\n return wrapChildren((children.props as { children?: unknown }).children)\n }\n if (typeof children === 'function') {\n return wrapRender(children as ColumnHeaderRenderFunction)\n }\n return children\n }\n\n return {wrapChildren(props.children) as ColumnHeaderChildren}\n}\n\nfunction DataTableCell(props: CellDefinitionProps) {\n const { children, className } = props\n return (\n \n {(params) => (typeof children === 'function' ? children(params) : children)}\n \n )\n}\n\ninterface CellDefinitionProps {\n children: CellRenderFunction | React.ReactNode\n className?: string\n}\n\nfunction DataTableGroupHeader(props: GroupHeaderCellProps) {\n const className = cn(\n 'border-b border-[var(--data-table-border)] bg-[var(--data-table-muted)] px-2 py-2 text-sm font-medium text-[var(--data-table-fg)]',\n props.className\n )\n\n if ('component' in props) {\n return \n }\n\n return {props.children}\n}\n\nexport {\n DataTable,\n DataTableColumn,\n DataTableColumnHeader,\n DataTableCell,\n DataTableGroupHeader,\n // Re-export types\n type VirtuosoDataTableProps,\n type CellRenderParams,\n type CellRenderFunction,\n type ColumnHeaderChildren,\n type ColumnHeaderRenderParams,\n type ColumnHeaderRenderFunction,\n type ColumnHeaderCustomComponent,\n type HeaderSlotRenderParams,\n type HeaderSlotRenderFunction,\n type HeaderSlotCustomComponent,\n type ColumnState,\n type ColumnInfo,\n type RowLocation,\n type ListScrollLocation,\n type Row,\n type GroupHeaderRenderParams,\n type GroupHeaderRenderFunction,\n type GroupHeaderCustomComponent,\n type ColumnGroupInfo,\n type ColumnGroupHeaderRenderParams,\n type ColumnGroupHeaderRenderFunction,\n type ColumnGroupHeaderCustomComponent,\n type SetColumnStickyPayload,\n type ReorderColumnsPayload,\n type DataTableComponents,\n type RowComponentProps,\n type StickyHeaderComponentProps,\n type StickyColumnContainerComponentProps,\n type LoadingComponentProps,\n type DataTableLoadingState,\n // Re-export components and utilities\n GroupHeaderCell,\n ColumnGroup,\n ColumnGroupHeader,\n HeaderStart,\n HeaderEnd,\n HeaderEdge,\n HeaderOverlay,\n setColumnSticky$,\n reorderColumns$,\n loadingState$,\n useVirtuosoLocation,\n useCurrentlyRenderedData,\n useVirtuosoLoadingState,\n}\n", "type": "registry:component", "target": "@ui/data-table/index.tsx" } ], "type": "registry:component" }