4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T13f5,"use client" import * as React from "react" import { type RowData } from "@tanstack/react-table" import { cn } from "@/lib/utils" import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { DataTableContent, DataTablePagination, DataTableSearch, DataTableSelectionBar, DataTableToolbar, DataTableViewOptions, useDataTable, type DataTableContentProps, type UseDataTableOptions, } from "@/registry/dashboardcn/ui/data-table" export interface DataTableCardProps extends Omit, "title" | "onSelect">, UseDataTableOptions, Pick< DataTableContentProps, | "loading" | "pending" | "skeletonRows" | "stickyHeader" | "maxHeight" | "reorderable" | "density" | "emptyMessage" | "onRowClick" | "rowClassName" | "rowProps" | "renderRow" > { title: React.ReactNode description?: React.ReactNode /** Slot in the top-right corner, e.g. a date range or a menu button. */ action?: React.ReactNode /** Column id to filter with the search input. Omit to hide the input. */ searchKey?: string searchPlaceholder?: string /** Extra toolbar content, rendered after the search input. */ toolbar?: React.ReactNode showViewOptions?: boolean showPagination?: boolean pageSizeOptions?: number[] /** Actions shown in the bar that appears while rows are selected. */ selectionActions?: React.ReactNode /** Replaces the pagination row, e.g. with a "view all" link. */ footer?: React.ReactNode } /** * A card around a data table: title, toolbar, rows, and pagination in the * footer. Everything it does is `useDataTable` plus the exported parts, so * copy it and rearrange when the shape does not fit. */ function DataTableCard({ columns, data, pageSize = 10, initialSorting, initialColumnVisibility, pinnedColumns, enableRowSelection, getRowId, onRowSelectionChange, title, description, action, searchKey, searchPlaceholder = "Filter...", toolbar, showViewOptions = true, showPagination = true, pageSizeOptions, selectionActions, footer, loading, pending, skeletonRows, stickyHeader, maxHeight, reorderable, density, emptyMessage, onRowClick, rowClassName, rowProps, renderRow, className, ...props }: DataTableCardProps) { const table = useDataTable({ columns, data, pageSize, initialSorting, initialColumnVisibility, pinnedColumns, enableRowSelection, getRowId, onRowSelectionChange, }) const hasToolbar = Boolean(searchKey || toolbar) const selectedCount = table.getSelectedRowModel().rows.length const showFooter = footer !== undefined || showPagination return ( {title} {description ? {description} : null} {action || showViewOptions ? ( {action} {showViewOptions ? ( ) : null} ) : null} {hasToolbar ? ( {searchKey ? ( ) : null} {toolbar} ) : null} {selectedCount > 0 ? ( {selectionActions} ) : null} {showFooter ? ( {footer ?? ( )} ) : null} ) } export { DataTableCard } 4e:T8f46,"use client" import * as React from "react" import { columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_includesString, flexRender, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable, type Column, type ColumnDef, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnVisibilityState, type ReactTable, type Row, type RowData, type RowSelectionState, type SortingState, } from "@tanstack/react-table" import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, GripVertical, Settings2, X, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Skeleton } from "@/components/ui/skeleton" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" /** * TanStack Table v9 is feature-gated: only what is registered here ships in * the bundle. Sorting, filtering, pagination, visibility, ordering, pinning, * and row selection cover the usual dashboard table. */ const dataTableFeatures = tableFeatures({ columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, filteredRowModel: createFilteredRowModel(), paginatedRowModel: createPaginatedRowModel(), sortedRowModel: createSortedRowModel(), filterFns: { includesString: filterFn_includesString }, sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic, datetime: sortFn_datetime, text: sortFn_text, }, }) type DataTableFeatures = typeof dataTableFeatures type DataTableColumnDef = ColumnDef< DataTableFeatures, TData, // eslint-disable-next-line @typescript-eslint/no-explicit-any any > /** The table instance returned by `useDataTable`. */ type DataTableInstance = ReactTable< DataTableFeatures, TData > type DataTableColumn = Column< DataTableFeatures, TData, unknown > type DataTableRow = Row /** Typed column helper bound to the data table's feature set. */ function createDataTableColumnHelper() { return createColumnHelper() } /** Row density presets. Only the cell padding changes. */ type DataTableDensity = "compact" | "default" | "relaxed" const densityClasses: Record = { compact: "[&_[data-slot=table-head]]:h-8 [&_[data-slot=table-cell]]:py-1 [&_[data-slot=table-cell]]:text-[0.8125rem]", default: "", relaxed: "[&_[data-slot=table-head]]:h-12 [&_[data-slot=table-cell]]:py-3.5", } /* -------------------------------------------------------------------------- */ /* hook */ /* -------------------------------------------------------------------------- */ export interface UseDataTableOptions { columns: ReadonlyArray> data: TData[] /** Rows per page. Pass 0 to keep every row on a single page. */ pageSize?: number initialSorting?: SortingState initialColumnVisibility?: ColumnVisibilityState /** * Column ids held against the leading and trailing edge. Read once, on * mount; use `table.setColumnPinning` to change it afterwards. Pinned * columns should declare a `size` so the sticky offsets line up. */ pinnedColumns?: Partial /** Turn on checkbox selection, or decide per row. */ enableRowSelection?: boolean | ((row: DataTableRow) => boolean) /** Stable row ids. Selection survives sorting and paging with this set. */ getRowId?: (row: TData, index: number) => string onRowSelectionChange?: (selection: RowSelectionState) => void } /** * Wires the table state the components below read. Call it when you want to * lay the pieces out yourself; `DataTable` calls it for you. */ function useDataTable({ columns, data, pageSize = 10, initialSorting, initialColumnVisibility, pinnedColumns, enableRowSelection, getRowId, onRowSelectionChange, }: UseDataTableOptions): DataTableInstance { const [sorting, setSorting] = React.useState( initialSorting ?? [] ) const [columnFilters, setColumnFilters] = React.useState( [] ) const [columnVisibility, setColumnVisibility] = React.useState(initialColumnVisibility ?? {}) const [columnOrder, setColumnOrder] = React.useState([]) const [columnPinning, setColumnPinning] = React.useState( () => ({ start: pinnedColumns?.start ?? [], end: pinnedColumns?.end ?? [] }) ) const [rowSelection, setRowSelection] = React.useState({}) // Report the selection from an effect, not from inside the state updater: // the table can call the updater while it renders. const notify = React.useRef(onRowSelectionChange) const mounted = React.useRef(false) React.useEffect(() => { notify.current = onRowSelectionChange }) React.useEffect(() => { if (!mounted.current) { mounted.current = true return } notify.current?.(rowSelection) }, [rowSelection]) return useTable({ features: dataTableFeatures, data, columns: columns as DataTableColumnDef[], initialState: { pagination: { pageIndex: 0, pageSize: pageSize > 0 ? pageSize : Number.MAX_SAFE_INTEGER, }, }, getRowId, enableRowSelection, // Shift-click extends the selection from the last row you touched. isRowRangeSelectionEvent: (event) => Boolean((event as { shiftKey?: boolean }).shiftKey), onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, onColumnOrderChange: setColumnOrder, onColumnPinningChange: setColumnPinning, onRowSelectionChange: setRowSelection, state: { sorting, columnFilters, columnVisibility, columnOrder, columnPinning, rowSelection, }, }) } /* -------------------------------------------------------------------------- */ /* preset */ /* -------------------------------------------------------------------------- */ export interface DataTableProps extends Omit, "onSelect">, UseDataTableOptions { /** Column id to filter with the search input. Omit to hide the input. */ searchKey?: string searchPlaceholder?: string /** Extra toolbar content, rendered between the search input and view options. */ toolbar?: React.ReactNode showViewOptions?: boolean showPagination?: boolean pageSizeOptions?: number[] emptyMessage?: React.ReactNode /** Swap the rows for a skeleton, e.g. on first load. */ loading?: boolean /** Keep the rows but dim them, e.g. while a filter change is in flight. */ pending?: boolean skeletonRows?: number stickyHeader?: boolean /** Caps the scroll area, e.g. 420 or "60vh". Pair it with stickyHeader. */ maxHeight?: number | string /** Let columns be dragged into a new order. Pass ids to limit which ones. */ reorderable?: boolean | string[] density?: DataTableDensity onRowClick?: (row: DataTableRow) => void rowClassName?: (row: DataTableRow) => string | undefined /** Anything else to put on a row, e.g. a data attribute or a handler. */ rowProps?: (row: DataTableRow) => React.ComponentProps<"tr"> /** Wrap the row element, e.g. in a context menu trigger. */ renderRow?: ( row: DataTableRow, element: React.ReactElement ) => React.ReactNode /** Actions shown in the bar that appears while rows are selected. */ selectionActions?: React.ReactNode } /** * The batteries-included table: toolbar, rows, and pagination. Every part is * exported on its own, so reach for `useDataTable` and compose them by hand * when this shape is not the one you want. */ function DataTable({ columns, data, pageSize = 10, initialSorting, initialColumnVisibility, pinnedColumns, enableRowSelection, getRowId, onRowSelectionChange, searchKey, searchPlaceholder = "Filter...", toolbar, showViewOptions = true, showPagination = true, pageSizeOptions, emptyMessage = "No results.", loading = false, pending = false, skeletonRows, stickyHeader = false, maxHeight, reorderable = false, density = "default", onRowClick, rowClassName, rowProps, renderRow, selectionActions, className, ...props }: DataTableProps) { const table = useDataTable({ columns, data, pageSize, initialSorting, initialColumnVisibility, pinnedColumns, enableRowSelection, getRowId, onRowSelectionChange, }) const hasToolbar = Boolean(searchKey || toolbar || showViewOptions) const selectedCount = table.getSelectedRowModel().rows.length return (

{hasToolbar ? ( {searchKey ? ( ) : null} {toolbar} {showViewOptions ? ( ) : null} ) : null} {selectedCount > 0 ? ( {selectionActions} ) : null} {showPagination ? ( ) : null}

) } /* -------------------------------------------------------------------------- */ /* toolbar */ /* -------------------------------------------------------------------------- */ /** The row above the table. Anything can go in it. */ function DataTableToolbar({ className, ...props }: React.ComponentProps<"div">) { return (

) } interface DataTableSearchProps extends Omit, "value" | "onChange"> { table: DataTableInstance /** Column id to filter. */ column: string } /** An input bound to one column's filter. */ function DataTableSearch({ table, column, className, ...props }: DataTableSearchProps) { const target = table.getColumn(column) if (!target) return null return ( target.setFilterValue(event.target.value)} className={cn("h-8 max-w-sm", className)} {...props} /> ) } interface DataTableViewOptionsProps extends React.ComponentProps { table: DataTableInstance /** Adds "move left / move right" items for the reorderable columns. */ reorderable?: boolean | string[] } /** Column visibility, and column order when reordering is on. */ function DataTableViewOptions({ table, reorderable = false, className, ...props }: DataTableViewOptionsProps) { const columns = table.getAllColumns().filter((column) => column.getCanHide()) return ( Toggle columns {columns.map((column) => ( column.toggleVisibility(!!value)} > {column.id} ))} {reorderable ? ( <> Column order table.resetColumnOrder()}> Reset to default ) : null} ) } interface DataTableColumnHeaderProps extends React.ComponentProps<"div"> { column: Column title: string align?: "left" | "right" } function DataTableColumnHeader({ column, title, align = "left", className, ...props }: DataTableColumnHeaderProps) { if (!column.getCanSort()) { return (

{title}

) } const sorted = column.getIsSorted() const Icon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ArrowUpDown return (

) } /* -------------------------------------------------------------------------- */ /* selection */ /* -------------------------------------------------------------------------- */ /** * A checkbox column. Put it first in your column list and give the table a * `getRowId` so the selection survives sorting and paging. */ function createSelectionColumn( overrides?: Partial> ): DataTableColumnDef { return { id: "select", size: 36, enableSorting: false, enableHiding: false, header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label="Select all rows on this page" /> ), cell: ({ row }) => ( row.getToggleSelectedHandler()({ target: { checked: !row.getIsSelected() }, shiftKey: event.shiftKey, }) } aria-label="Select row" /> ), ...overrides, } as DataTableColumnDef } interface DataTableSelectionBarProps extends React.ComponentProps<"div"> { table: DataTableInstance } /** The bar that appears once rows are selected. Children are the actions. */ function DataTableSelectionBar({ table, children, className, ...props }: DataTableSelectionBarProps) { const count = table.getSelectedRowModel().rows.length return (

{count} {count === 1 ? "row" : "rows"} selected

{children}

) } /* -------------------------------------------------------------------------- */ /* content */ /* -------------------------------------------------------------------------- */ /** Moves `columnId` to the slot `targetId` currently occupies. */ function moveColumn( table: DataTableInstance, columnId: string, targetId: string ) { const order = table.getAllLeafColumns().map((column) => column.id) const from = order.indexOf(columnId) const to = order.indexOf(targetId) if (from < 0 || to < 0 || from === to) return const next = order.slice() next.splice(from, 1) next.splice(to, 0, columnId) table.setColumnOrder(next) } /** Nudges `columnId` one slot left (-1) or right (1). */ function shiftColumn( table: DataTableInstance, columnId: string, delta: number ) { const order = table.getAllLeafColumns().map((column) => column.id) const from = order.indexOf(columnId) const to = from + delta if (from < 0 || to < 0 || to >= order.length) return const next = order.slice() next.splice(from, 1) next.splice(to, 0, columnId) table.setColumnOrder(next) } /** * Sticky offsets and hairlines for a pinned cell. The feature computes the * regions; the renderer owns the CSS. */ function getPinnedStyle( column: DataTableColumn, { stickyHeader = false }: { stickyHeader?: boolean } = {} ): React.CSSProperties | undefined { const pinned = column.getIsPinned() const shadows: string[] = [] if (stickyHeader) shadows.push("inset 0 -1px 0 0 var(--border)") if (pinned === "start" && column.getIsLastColumn("start")) { shadows.push("inset -1px 0 0 0 var(--border)") } if (pinned === "end" && column.getIsFirstColumn("end")) { shadows.push("inset 1px 0 0 0 var(--border)") } if (!pinned && !shadows.length) return undefined // Auto table layout treats width as a suggestion, so pin all three: the // sticky offsets are computed from `size` and have to match what renders. const size = pinned ? column.getSize() : undefined return { insetInlineStart: pinned === "start" ? `${column.getStart("start")}px` : undefined, insetInlineEnd: pinned === "end" ? `${column.getAfter("end")}px` : undefined, width: size, minWidth: size, maxWidth: size, boxShadow: shadows.length ? shadows.join(", ") : undefined, } } /** Grip on a reorderable header. Drag it, or focus it and press an arrow. */ function DataTableDragHandle({ table, column, }: { table: DataTableInstance column: DataTableColumn }) { return ( ) } const skeletonWidths = [72, 44, 58, 36, 64, 48, 52] export interface DataTableContentProps extends React.ComponentProps<"div"> { table: DataTableInstance loading?: boolean pending?: boolean skeletonRows?: number stickyHeader?: boolean maxHeight?: number | string reorderable?: boolean | string[] density?: DataTableDensity emptyMessage?: React.ReactNode onRowClick?: (row: DataTableRow) => void rowClassName?: (row: DataTableRow) => string | undefined /** * Anything else to put on a row: a handler, a data attribute, a title. * Merged after the built-in props, so it wins. */ rowProps?: (row: DataTableRow) => React.ComponentProps<"tr"> /** * Wrap the row element, e.g. in a context menu trigger or a link. Render * the element you are handed somewhere inside what you return. */ renderRow?: ( row: DataTableRow, element: React.ReactElement ) => React.ReactNode } /** The bordered table itself: header, rows, and their loading states. */ function DataTableContent({ table, loading = false, pending = false, skeletonRows = 8, stickyHeader = false, maxHeight, reorderable = false, density = "default", emptyMessage = "No results.", onRowClick, rowClassName, rowProps, renderRow, className, style, ...props }: DataTableContentProps) { const [dragging, setDragging] = React.useState(null) const [dropTarget, setDropTarget] = React.useState(null) const { start, end } = table.state.columnPinning const hasPinned = start.length > 0 || end.length > 0 const visibleColumns = table.getVisibleLeafColumns() const rows = table.getRowModel().rows const canReorder = (column: DataTableColumn) => { if (!reorderable || column.getIsPinned()) return false return Array.isArray(reorderable) ? reorderable.includes(column.id) : column.getCanHide() } /** Native drag and drop, so no drag library is pulled in for this. */ const dragProps = (columnId: string): React.ComponentProps<"th"> => ({ draggable: true, onDragStart: (event) => { setDragging(columnId) event.dataTransfer.effectAllowed = "move" event.dataTransfer.setData("text/plain", columnId) }, onDragOver: (event) => { if (!dragging || dragging === columnId) return event.preventDefault() event.dataTransfer.dropEffect = "move" setDropTarget(columnId) }, onDragLeave: () => setDropTarget((current) => (current === columnId ? null : current)), onDrop: (event) => { event.preventDefault() if (dragging) moveColumn(table, dragging, columnId) setDragging(null) setDropTarget(null) }, onDragEnd: () => { setDragging(null) setDropTarget(null) }, }) // Pinned cells are painted opaque so rows scroll under them, which would // otherwise hide the row's own hover and selected colours. Move both onto // the cells so pinned and unpinned columns stay in step. They have to stay // opaque too: a translucent hover on a pinned cell lets the columns passing // underneath show through, so the row hover is `bg-muted/50` pre-mixed over // the background rather than blended with whatever is behind the cell. const rowClasses = cn( "group/row", hasPinned && "hover:bg-transparent data-[state=selected]:bg-transparent" ) const cellClasses = cn( hasPinned && [ "group-hover/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--background))]", "group-data-[state=selected]/row:bg-muted", ] ) return (

[data-slot=table-container]]:[scrollbar-width:thin] [&>[data-slot=table-container]]:[scrollbar-color:color-mix(in_oklab,var(--foreground)_20%,transparent)_transparent]", maxHeight !== undefined && "[&>[data-slot=table-container]]:max-h-[var(--data-table-max-height)]", densityClasses[density], className )} style={ maxHeight !== undefined ? ({ ...style, "--data-table-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight, } as React.CSSProperties) : style } {...props} > {pending ? (

) : null} {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { const column = header.column as DataTableColumn const pinned = column.getIsPinned() const draggable = canReorder(column) return ( {header.isPlaceholder ? null : draggable ? (

{flexRender( column.columnDef.header, header.getContext() )}

) : ( flexRender(column.columnDef.header, header.getContext()) )} ) })} ))} {loading ? ( ) : rows.length ? ( rows.map((row) => { const extra = rowProps?.(row) const element = ( onRowClick(row) : undefined} {...extra} className={cn( rowClasses, onRowClick && "cursor-pointer", rowClassName?.(row), extra?.className )} > {row.getVisibleCells().map((cell) => { const column = cell.column as DataTableColumn const pinned = column.getIsPinned() return ( {flexRender(column.columnDef.cell, cell.getContext())} ) })} ) return ( {renderRow ? renderRow(row, element) : element} ) }) ) : ( {emptyMessage} )}

) } /* -------------------------------------------------------------------------- */ /* skeletons */ /* -------------------------------------------------------------------------- */ function DataTableSkeletonRows({ columns, rows, }: { columns: number rows: number }) { return ( <> {Array.from({ length: rows }).map((_, rowIndex) => ( {Array.from({ length: columns }).map((__, columnIndex) => ( ))} ))} ) } export interface DataTableSkeletonProps extends React.ComponentProps<"div"> { columns: number rows?: number showToolbar?: boolean showPagination?: boolean } /** * A standalone placeholder for when the columns are not known yet, e.g. a * Suspense fallback. Once you have a table instance, `loading` on * `DataTableContent` renders the same rows under the real header. */ function DataTableSkeleton({ columns, rows = 8, showToolbar = true, showPagination = true, className, ...props }: DataTableSkeletonProps) { return (

{showToolbar ? (

) : null}

{Array.from({ length: columns }).map((_, index) => ( ))}

{showPagination ? (

) : null}

) } /* -------------------------------------------------------------------------- */ /* pagination */ /* -------------------------------------------------------------------------- */ interface DataTablePaginationProps extends React.ComponentProps<"div"> { table: DataTableInstance /** Adds a rows-per-page menu. */ pageSizeOptions?: number[] } function DataTablePagination({ table, pageSizeOptions, className, ...props }: DataTablePaginationProps) { const { pageIndex, pageSize } = table.state.pagination const total = table.getFilteredRowModel().rows.length const from = total === 0 ? 0 : pageIndex * pageSize + 1 const to = Math.min((pageIndex + 1) * pageSize, total) return (

{from}–{to} of {total}

{pageSizeOptions?.length ? ( {pageSizeOptions.map((option) => ( table.setPageSize(option)} className="tabular-nums" > {option} per page ))} ) : null}

Page {pageIndex + 1} of {Math.max(table.getPageCount(), 1)}

) } export { DataTable, DataTableColumnHeader, DataTableContent, DataTablePagination, DataTableSearch, DataTableSelectionBar, DataTableSkeleton, DataTableToolbar, DataTableViewOptions, createDataTableColumnHelper, createSelectionColumn, dataTableFeatures, moveColumn, shiftColumn, useDataTable, type DataTableColumnDef, type DataTableDensity, type DataTableFeatures, type DataTableInstance, type DataTableRow, } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4b",null,{"namespace":"@dashboardcn","registryDependencies":["card","table","button","input","dropdown-menu","checkbox","skeleton"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/dashboardcn/blocks/data-table-card.tsx","content":"$4d","type":"registry:component"},{"path":"registry/dashboardcn/ui/data-table.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]