50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3afe,"use client"; import * as React from "react"; import { Table, TableBody } from "@/components/ui/table"; import { cn } from "@/lib/utils"; import { DataTableEmptyState } from "./DataTableEmptyState"; import { DataTableFooter } from "./DataTableFooter"; import { DataTableHeader } from "./DataTableHeader"; import { DataTableLoader } from "./DataTableLoader"; import { DataTablePagination } from "./DataTablePagination"; import { DataTableRow } from "./DataTableRow"; import type { BaseDataTableProps, DataTableColumn, RequiredSortProps, SortDirection, SortProps, } from "./types"; import { computeOrderedColumns, computePinOffsets, getColumnKey, getRecordId, useMergedRef, } from "./utils"; export type { DataTableColumn, DataTablePaginationProps, RowContextMenuItem, SortDirection, SortStatus, } from "./types"; const SELECTION_COL_WIDTH = 44; const EXPAND_COL_WIDTH = 40; const DEFAULT_PINNED_WIDTH = 150; export function DataTable< T extends Record, Cols extends readonly DataTableColumn[] = DataTableColumn[], >( props: BaseDataTableProps & { columns: Cols; } & (Cols[number]["sortable"] extends true ? RequiredSortProps : SortProps), ) { const { data, fetching = false, columns, idAccessor, selectedRecords, onSelectedRecordsChange, height, rowContextMenu, pagination, noRecordsText = "No records to show", highlightOnHover = true, onRowClick, className, variant = "bordered", rowClassName, rowStyle, headerClassName, headerStyle, renderRowSubContent, rowExpandable, expandOnRowClick = true, singleExpand = false, expandedRecordIds, onExpandedRecordIdsChange, headerRef, bodyRef, footerRef, tableRef, scrollViewportRef, rowRef, sortStatus, onSortStatusChange, } = props as BaseDataTableProps & SortProps; const selectable = !!onSelectedRecordsChange; const expandable = !!renderRowSubContent; const sticky = !!height; /* ------------------------------- Selection ------------------------------ */ const selectedIds = React.useMemo( () => new Set((selectedRecords ?? []).map((r) => getRecordId(r, idAccessor))), [selectedRecords, idAccessor], ); const pageSelectedCount = React.useMemo( () => data.filter((r) => selectedIds.has(getRecordId(r, idAccessor))).length, [data, selectedIds, idAccessor], ); const allChecked = data.length > 0 && pageSelectedCount === data.length; const someChecked = pageSelectedCount > 0 && !allChecked; const [lastSelectionIndex, setLastSelectionIndex] = React.useState< number | null >(null); const handleToggleSelect = React.useCallback( (record: T, rowIndex: number, shiftKey: boolean) => { if (!onSelectedRecordsChange) return; const id = getRecordId(record, idAccessor); if (shiftKey && lastSelectionIndex !== null) { const [start, end] = lastSelectionIndex < rowIndex ? [lastSelectionIndex, rowIndex] : [rowIndex, lastSelectionIndex]; const rangeRecords = data.slice(start, end + 1); const willSelect = !selectedIds.has(id); if (willSelect) { const merged = [...(selectedRecords ?? [])]; const existing = new Set( merged.map((r) => getRecordId(r, idAccessor)), ); for (const r of rangeRecords) { const rid = getRecordId(r, idAccessor); if (!existing.has(rid)) { merged.push(r); existing.add(rid); } } onSelectedRecordsChange(merged); } else { const rangeIds = new Set( rangeRecords.map((r) => getRecordId(r, idAccessor)), ); onSelectedRecordsChange( (selectedRecords ?? []).filter( (r) => !rangeIds.has(getRecordId(r, idAccessor)), ), ); } } else if (selectedIds.has(id)) { onSelectedRecordsChange( (selectedRecords ?? []).filter( (r) => getRecordId(r, idAccessor) !== id, ), ); } else { onSelectedRecordsChange([...(selectedRecords ?? []), record]); } setLastSelectionIndex(rowIndex); }, [ onSelectedRecordsChange, selectedRecords, selectedIds, idAccessor, data, lastSelectionIndex, ], ); const handleToggleAll = React.useCallback(() => { if (!onSelectedRecordsChange) return; if (allChecked) { const idsOnPage = new Set(data.map((r) => getRecordId(r, idAccessor))); onSelectedRecordsChange( (selectedRecords ?? []).filter( (r) => !idsOnPage.has(getRecordId(r, idAccessor)), ), ); } else { const merged = [...(selectedRecords ?? [])]; const existing = new Set(merged.map((r) => getRecordId(r, idAccessor))); for (const r of data) { const id = getRecordId(r, idAccessor); if (!existing.has(id)) { merged.push(r); existing.add(id); } } onSelectedRecordsChange(merged); } }, [onSelectedRecordsChange, allChecked, data, selectedRecords, idAccessor]); /* ------------------------------- Expansion ------------------------------ */ const [internalExpanded, setInternalExpanded] = React.useState< Set >(new Set()); const isExpandControlled = expandedRecordIds !== undefined; const expandedSet = React.useMemo( () => new Set( isExpandControlled ? expandedRecordIds : Array.from(internalExpanded), ), [isExpandControlled, expandedRecordIds, internalExpanded], ); const toggleExpand = React.useCallback( (record: T) => { const id = getRecordId(record, idAccessor); let next: Set; if (singleExpand) { next = expandedSet.has(id) ? new Set() : new Set([id]); } else { next = new Set(expandedSet); if (next.has(id)) next.delete(id); else next.add(id); } if (isExpandControlled) onExpandedRecordIdsChange?.(Array.from(next)); else setInternalExpanded(next); }, [ expandedSet, singleExpand, isExpandControlled, onExpandedRecordIdsChange, idAccessor, ], ); /* --------------------------------- Sort ---------------------------------- */ const handleSort = React.useCallback( (col: DataTableColumn) => { if (!col.sortable || !onSortStatusChange) return; const isCurrent = sortStatus?.columnAccessor === col.accessor; const nextDirection: SortDirection = isCurrent && sortStatus?.direction === "asc" ? "desc" : "asc"; onSortStatusChange({ columnAccessor: col.accessor, direction: nextDirection, }); }, [onSortStatusChange, sortStatus], ); /* -------------------------------- Pinning -------------------------------- */ const orderedColumns = React.useMemo( () => computeOrderedColumns(columns), [columns], ); const leadingGutter = (selectable ? SELECTION_COL_WIDTH : 0) + (expandable ? EXPAND_COL_WIDTH : 0); const { leftOffsets, rightOffsets, leftPinnedCols, rightPinnedCols } = React.useMemo( () => computePinOffsets(orderedColumns, leadingGutter, DEFAULT_PINNED_WIDTH), [orderedColumns, leadingGutter], ); const pinnedCellStyle = React.useCallback( (col: DataTableColumn): React.CSSProperties => { const key = getColumnKey(col); if (col.pinned === "left") return { position: "sticky", left: leftOffsets[key] }; if (col.pinned === "right") return { position: "sticky", right: rightOffsets[key] }; return {}; }, [leftOffsets, rightOffsets], ); const pinnedCellClassName = React.useCallback( ( col: DataTableColumn, zIndexClass: string, bgClassName: string = "bg-background", ) => { const isLastLeft = leftPinnedCols.length > 0 && leftPinnedCols[leftPinnedCols.length - 1] === col; const isFirstRight = rightPinnedCols.length > 0 && rightPinnedCols[0] === col; return cn( col.pinned && "sticky", col.pinned && bgClassName, col.pinned && zIndexClass, col.pinned === "left" && isLastLeft && "shadow-[2px_0_4px_-2px_rgba(0,0,0,0.15)]", col.pinned === "right" && isFirstRight && "shadow-[-2px_0_4px_-2px_rgba(0,0,0,0.15)]", ); }, [leftPinnedCols, rightPinnedCols], ); /* ------------------------------ Scroll shadow ----------------------------- */ const scrollRef = React.useRef(null); const mergedScrollRef = useMergedRef(scrollRef, scrollViewportRef); const [scrollShadow, setScrollShadow] = React.useState({ left: false, right: false, }); const updateScrollShadow = React.useCallback(() => { const el = scrollRef.current; if (!el) return; setScrollShadow({ left: el.scrollLeft > 1, right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1, }); }, []); React.useEffect(() => { updateScrollShadow(); window.addEventListener("resize", updateScrollShadow); return () => window.removeEventListener("resize", updateScrollShadow); }, [updateScrollShadow, data, orderedColumns]); /* ------------------------------ Pagination -------------------------------- */ const totalCols = orderedColumns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0); /* --------------------------------- Render --------------------------------- */ return (

c.width) ? "fixed" : "auto", }} > ref={headerRef} columns={orderedColumns} selectable={selectable} expandable={expandable} selectionColWidth={SELECTION_COL_WIDTH} expandColWidth={EXPAND_COL_WIDTH} selectionChecked={allChecked} selectionIndeterminate={someChecked} onSelectionChange={handleToggleAll} sortStatus={sortStatus} onSort={handleSort} getColumnKey={getColumnKey} pinnedCellStyle={pinnedCellStyle} pinnedCellClassName={pinnedCellClassName} headerClassName={headerClassName} headerStyle={headerStyle} sticky={sticky} variant={variant} /> {data.length === 0 ? ( ) : ( data.map((record, rowIndex) => { const rowId = getRecordId(record, idAccessor); const isSelected = selectedIds.has(rowId); const isExpanded = expandedSet.has(rowId); const canExpand = expandable && (rowExpandable ? rowExpandable(record, rowIndex) : true); const contextMenuItems = rowContextMenu?.(record, rowIndex); const resolvedRowClassName = typeof rowClassName === "function" ? rowClassName(record, rowIndex) : rowClassName; const resolvedRowStyle = typeof rowStyle === "function" ? rowStyle(record, rowIndex) : rowStyle; return ( key={rowId} record={record} rowIndex={rowIndex} columns={orderedColumns} selectable={selectable} expandable={expandable} selectionColWidth={SELECTION_COL_WIDTH} expandColWidth={EXPAND_COL_WIDTH} isSelected={isSelected} isExpanded={isExpanded} canExpand={canExpand} renderSubContent={renderRowSubContent} onToggleSelect={handleToggleSelect} onToggleExpand={toggleExpand} onRowClick={onRowClick} expandOnRowClick={expandOnRowClick} highlightOnHover={highlightOnHover} rowClassName={resolvedRowClassName} rowStyle={resolvedRowStyle} contextMenuItems={contextMenuItems} getColumnKey={getColumnKey} pinnedCellStyle={pinnedCellStyle} pinnedCellClassName={pinnedCellClassName} leadingGutter={leadingGutter} totalCols={totalCols} variant={variant} rowRef={rowRef} /> ); }) )}

{pagination && ( )}

); } export default DataTable; 53:Tae8,"use client"; import { MoreVertical } from "lucide-react"; import type * as React from "react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { cn } from "@/lib/utils"; import type { RowContextMenuItem } from "./types"; export interface DataTableActionProps { /** Menu items — same shape as `rowContextMenu`'s per-row return value, so * you can reuse the exact same list for both the right-click context menu * and this button. */ items: RowContextMenuItem[]; /** Accessible label for the trigger button. */ label?: string; /** Icon shown on the trigger button. Defaults to a vertical 3-dot icon. */ icon?: React.ReactNode; className?: string; align?: "start" | "center" | "end"; side?: "top" | "bottom" | "left" | "right"; } /** * A "kebab" (3-dot) button that opens a menu — meant for a table's actions * column. Typically used together with (or instead of) `rowContextMenu`: * * { * accessor: "actions", * title: "", * width: 60, * render: (record) => ( * editUser(record) }, * { key: "delete", label: "Delete", danger: true, onClick: () => deleteUser(record) }, * ]} * /> * ), * } * * Stops click propagation so it's safe to use inside a row that also has * `onRowClick` / expandable rows without accidentally triggering those. */ export function DataTableAction({ items, label = "Open menu", icon, className, align = "end", side = "bottom", }: DataTableActionProps) { if (!items.length) return null; return ( e.stopPropagation()} > {icon ?? } e.stopPropagation()} > {items.map((item) => ( {item.icon && ( {item.icon} )} {item.label} ))} ); } 54:T948,"use client"; import type * as React from "react"; import { TableCell, TableRow } from "@/components/ui/table"; import { cn } from "@/lib/utils"; import type { DataTableColumn } from "./types"; interface DataTableFooterProps { columns: DataTableColumn[]; data: T[]; selectable: boolean; expandable: boolean; selectionColWidth: number; expandColWidth: number; getColumnKey: (col: DataTableColumn) => string; pinnedCellStyle: (col: DataTableColumn) => React.CSSProperties; pinnedCellClassName: ( col: DataTableColumn, zIndexClass: string, bgClassName?: string, ) => string; sticky: boolean; variant: "bordered" | "borderless"; } export function DataTableFooter({ columns, data, selectable, expandable, selectionColWidth, expandColWidth, getColumnKey, pinnedCellStyle, pinnedCellClassName, sticky, variant, }: DataTableFooterProps) { const hasFooter = columns.some((c) => c.footer != null); if (!hasFooter) return null; return ( {selectable && ( )} {expandable && ( )} {columns.map((col) => { const key = getColumnKey(col); return ( {typeof col.footer === "function" ? col.footer(data) : col.footer} ); })} ); } 55:T110f,"use client"; import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react"; import * as React from "react"; import { Checkbox } from "@/components/ui/checkbox"; import { TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { cn } from "@/lib/utils"; import type { DataTableColumn, SortStatus } from "./types"; interface DataTableHeaderProps { columns: DataTableColumn[]; selectable: boolean; expandable: boolean; selectionColWidth: number; expandColWidth: number; selectionChecked: boolean; selectionIndeterminate: boolean; onSelectionChange: () => void; sortStatus?: SortStatus; onSort: (col: DataTableColumn) => void; getColumnKey: (col: DataTableColumn) => string; pinnedCellStyle: (col: DataTableColumn) => React.CSSProperties; pinnedCellClassName: ( col: DataTableColumn, zIndexClass: string, bgClassName?: string, ) => string; headerClassName?: string; headerStyle?: React.CSSProperties; sticky: boolean; variant: "bordered" | "borderless"; } function DataTableHeaderInner( { columns, selectable, expandable, selectionColWidth, expandColWidth, selectionChecked, selectionIndeterminate, onSelectionChange, sortStatus, onSort, getColumnKey, pinnedCellStyle, pinnedCellClassName, headerClassName, headerStyle, sticky, variant, }: DataTableHeaderProps, ref: React.Ref, ) { function renderSortIcon(col: DataTableColumn) { if (!col.sortable) return null; if (sortStatus?.columnAccessor !== col.accessor) { return ( ); } return sortStatus.direction === "asc" ? ( ) : ( ); } return ( {selectable && ( onSelectionChange()} aria-label="Select all records" /> )} {expandable && ( )} {columns.map((col) => { const key = getColumnKey(col); return (

{col.sortable ? ( ) : ( {col.title ?? col.accessor} )}

); })} ); } export const DataTableHeader = React.forwardRef(DataTableHeaderInner) as ( props: DataTableHeaderProps & { ref?: React.Ref }, ) => React.ReactElement; 56:T13b3,"use client"; import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal, } from "lucide-react"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { cn } from "@/lib/utils"; import type { DataTablePaginationProps } from "./types"; import { getPaginationRange } from "./utils"; interface Props { pagination: DataTablePaginationProps; variant: "bordered" | "borderless"; sticky: boolean; footerRef?: React.Ref; fetching?: boolean; } export function DataTablePagination({ pagination, variant, sticky, footerRef, fetching, }: Props) { const totalPages = Math.max( 1, Math.ceil(pagination.totalRecords / pagination.recordsPerPage), ); const rangeStart = pagination.totalRecords === 0 ? 0 : (pagination.page - 1) * pagination.recordsPerPage + 1; const rangeEnd = Math.min( pagination.page * pagination.recordsPerPage, pagination.totalRecords, ); const pageNumbers = React.useMemo( () => getPaginationRange( pagination.page, totalPages, pagination.siblingCount ?? 1, ), [pagination.page, totalPages, pagination.siblingCount], ); return (

{pagination.renderInfo ? pagination.renderInfo({ from: rangeStart, to: rangeEnd, totalRecords: pagination.totalRecords, page: pagination.page, totalPages, }) : pagination.totalRecords === 0 ? "No records" : `Showing ${rangeStart}\u2013${rangeEnd} of ${pagination.totalRecords}`}

{pagination.onRecordsPerPageChange && (

Rows per page

)}

{pageNumbers.map((p) => p === "ellipsis" ? ( ) : ( ), )}

); } 57:T1d04,"use client"; import { ChevronRight } from "lucide-react"; import * as React from "react"; import { Checkbox } from "@/components/ui/checkbox"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, } from "@/components/ui/context-menu"; import { TableCell, TableRow } from "@/components/ui/table"; import { cn } from "@/lib/utils"; import type { DataTableColumn, RowContextMenuItem } from "./types"; interface DataTableRowProps { record: T; rowIndex: number; columns: DataTableColumn[]; selectable: boolean; expandable: boolean; selectionColWidth: number; expandColWidth: number; isSelected: boolean; isExpanded: boolean; canExpand: boolean; renderSubContent?: (record: T, rowIndex: number) => React.ReactNode; onToggleSelect: (record: T, rowIndex: number, shiftKey: boolean) => void; onToggleExpand: (record: T) => void; onRowClick?: (record: T, rowIndex: number) => void; expandOnRowClick: boolean; highlightOnHover: boolean; rowClassName?: string; rowStyle?: React.CSSProperties; contextMenuItems?: RowContextMenuItem[]; getColumnKey: (col: DataTableColumn) => string; pinnedCellStyle: (col: DataTableColumn) => React.CSSProperties; pinnedCellClassName: ( col: DataTableColumn, zIndexClass: string, bgClassName?: string, ) => string; leadingGutter: number; totalCols: number; variant: "bordered" | "borderless"; rowRef?: ( element: HTMLTableRowElement | null, record: T, rowIndex: number, ) => void; } function DataTableRowInner({ record, rowIndex, columns, selectable, expandable, selectionColWidth, expandColWidth, isSelected, isExpanded, canExpand, renderSubContent, onToggleSelect, onToggleExpand, onRowClick, expandOnRowClick, highlightOnHover, rowClassName, rowStyle, contextMenuItems, getColumnKey, pinnedCellStyle, pinnedCellClassName, leadingGutter, totalCols, variant, rowRef, }: DataTableRowProps) { const shiftKeyRef = React.useRef(false); function handleRowClick() { if (expandable && canExpand && expandOnRowClick) onToggleExpand(record); onRowClick?.(record, rowIndex); } const rowShellClassName = cn( highlightOnHover && "hover:bg-muted/50", (onRowClick || (canExpand && expandOnRowClick)) && "cursor-pointer", variant === "borderless" && "border-0", rowClassName, ); const cells = ( {selectable && ( e.stopPropagation()} > onToggleSelect(record, rowIndex, shiftKeyRef.current) } onClick={(e: React.MouseEvent) => { shiftKeyRef.current = e.shiftKey; }} aria-label={`Select record ${rowIndex + 1}`} /> )} {expandable && ( e.stopPropagation()} > {canExpand && ( )} )} {columns.map((col) => { const key = getColumnKey(col); return ( {col.render ? col.render(record, rowIndex) : String((record as Record)[col.accessor] ?? "")} ); })} ); const mainRow = contextMenuItems && contextMenuItems.length > 0 ? ( rowRef?.(el, record, rowIndex) } data-state={isSelected ? "selected" : undefined} className={rowShellClassName} style={rowStyle} onClick={handleRowClick} /> } > {cells} {contextMenuItems.map((item) => ( {item.icon && ( {item.icon} )} {item.label} ))} ) : ( rowRef?.(el, record, rowIndex)} data-state={isSelected ? "selected" : undefined} className={rowShellClassName} style={rowStyle} onClick={handleRowClick} > {cells} ); if (!canExpand || !isExpanded) return mainRow; return ( {mainRow}

{renderSubContent?.(record, rowIndex)}

); } function propsAreEqual( prev: Readonly>, next: Readonly>, ) { return ( prev.record === next.record && prev.rowIndex === next.rowIndex && prev.isSelected === next.isSelected && prev.isExpanded === next.isExpanded && prev.canExpand === next.canExpand && prev.columns === next.columns && prev.rowClassName === next.rowClassName && prev.rowStyle === next.rowStyle && prev.contextMenuItems === next.contextMenuItems && prev.pinnedCellStyle === next.pinnedCellStyle && prev.pinnedCellClassName === next.pinnedCellClassName && prev.getColumnKey === next.getColumnKey && prev.onToggleSelect === next.onToggleSelect && prev.onToggleExpand === next.onToggleExpand && prev.onRowClick === next.onRowClick && prev.renderSubContent === next.renderSubContent ); } export const DataTableRow = React.memo( DataTableRowInner, propsAreEqual, ) as typeof DataTableRowInner; 58:Tb4d,import type * as React from "react"; export type SortDirection = "asc" | "desc"; export interface SortStatus { columnAccessor: Extract | (string & {}); direction: SortDirection; } export interface DataTableColumn { accessor: Extract | (string & {}); id?: string; title?: React.ReactNode; className?: string; style?: React.CSSProperties; sortable?: boolean; width?: number | string; render?: (record: T, rowIndex: number) => React.ReactNode; textAlign?: "left" | "center" | "right"; pinned?: "left" | "right"; footer?: React.ReactNode | ((data: T[]) => React.ReactNode); } export interface RowContextMenuItem { key: string; label: React.ReactNode; icon?: React.ReactNode; onClick: () => void; danger?: boolean; disabled?: boolean; } export interface DataTablePaginationProps { page: number; totalRecords: number; recordsPerPage: number; onPageChange: (page: number) => void; recordsPerPageOptions?: number[]; onRecordsPerPageChange?: (recordsPerPage: number) => void; renderInfo?: (info: { from: number; to: number; totalRecords: number; page: number; totalPages: number; }) => React.ReactNode; siblingCount?: number; } export interface BaseDataTableProps { data: T[]; fetching?: boolean; columns: DataTableColumn[]; idAccessor?: keyof T | ((record: T) => React.Key); selectedRecords?: T[]; onSelectedRecordsChange?: (records: T[]) => void; height?: number; rowContextMenu?: (record: T, rowIndex: number) => RowContextMenuItem[] | undefined; pagination?: DataTablePaginationProps; noRecordsText?: string; highlightOnHover?: boolean; onRowClick?: (record: T, rowIndex: number) => void; className?: string; variant?: "bordered" | "borderless"; rowClassName?: string | ((record: T, rowIndex: number) => string | undefined); rowStyle?: React.CSSProperties | ((record: T, rowIndex: number) => React.CSSProperties | undefined); headerClassName?: string; headerStyle?: React.CSSProperties; renderRowSubContent?: (record: T, rowIndex: number) => React.ReactNode; rowExpandable?: (record: T, rowIndex: number) => boolean; expandOnRowClick?: boolean; singleExpand?: boolean; expandedRecordIds?: React.Key[]; onExpandedRecordIdsChange?: (ids: React.Key[]) => void; headerRef?: React.Ref; bodyRef?: React.Ref; footerRef?: React.Ref; tableRef?: React.Ref; scrollViewportRef?: React.Ref; rowRef?: (element: HTMLTableRowElement | null, record: T, rowIndex: number) => void; } export type SortProps = { sortStatus?: SortStatus; onSortStatusChange?: (status: SortStatus) => void; }; export type RequiredSortProps = { sortStatus: SortStatus; onSortStatusChange: (status: SortStatus) => void; }; 59:T115a,import type * as React from "react"; import { useCallback } from "react"; import type { DataTableColumn } from "./types"; export function getRecordId( record: T, idAccessor?: keyof T | ((record: T) => React.Key), ): React.Key { if (typeof idAccessor === "function") return idAccessor(record); if (idAccessor) return record[idAccessor] as unknown as React.Key; return JSON.stringify(record); } /** Stable, module-level (never recreated) — safe to pass straight into memoized children. */ export function getColumnKey(col: DataTableColumn): string { return col.id ?? col.accessor; } export function computeOrderedColumns( columns: DataTableColumn[], ): DataTableColumn[] { const left = columns.filter((c) => c.pinned === "left"); const right = columns.filter((c) => c.pinned === "right"); const middle = columns.filter( (c) => c.pinned !== "left" && c.pinned !== "right", ); return [...left, ...middle, ...right]; } export function computePinOffsets( orderedColumns: DataTableColumn[], leadingGutter: number, defaultWidth: number, ) { const leftPinnedCols = orderedColumns.filter((c) => c.pinned === "left"); const rightPinnedCols = orderedColumns.filter((c) => c.pinned === "right"); const leftOffsets: Record = {}; let lo = leadingGutter; for (const col of leftPinnedCols) { const key = getColumnKey(col); leftOffsets[key] = lo; lo += typeof col.width === "number" ? col.width : defaultWidth; } const rightOffsets: Record = {}; let ro = 0; for (let i = rightPinnedCols.length - 1; i >= 0; i--) { const col = rightPinnedCols[i]; const key = getColumnKey(col); rightOffsets[key] = ro; ro += typeof col.width === "number" ? col.width : defaultWidth; } return { leftOffsets, rightOffsets, leftPinnedCols, rightPinnedCols }; } export function getPaginationRange( current: number, total: number, siblingCount = 1, ): (number | "ellipsis")[] { const totalVisible = siblingCount * 2 + 5; if (totalVisible >= total) { return Array.from({ length: Math.max(total, 0) }, (_, i) => i + 1); } const leftSibling = Math.max(current - siblingCount, 1); const rightSibling = Math.min(current + siblingCount, total); const showLeftEllipsis = leftSibling > 2; const showRightEllipsis = rightSibling < total - 1; const pages: (number | "ellipsis")[] = [1]; if (showLeftEllipsis) pages.push("ellipsis"); for (let i = leftSibling; i <= rightSibling; i++) { if (i !== 1 && i !== total) pages.push(i); } if (showRightEllipsis) pages.push("ellipsis"); if (total > 1) pages.push(total); return pages; } /** Merge multiple refs (object or callback) into a single stable callback ref. */ export function useMergedRef( ...refs: Array | undefined> ): React.RefCallback { return useCallback((node: T | null) => { for (const ref of refs) { if (!ref) continue; if (typeof ref === "function") ref(node); else (ref as React.MutableRefObject).current = node; } // eslint-disable-next-line react-hooks/exhaustive-deps }, refs); } /** * Row number for a "No." column, accounting for pagination — e.g. row 0 on * page 2 with 10 records/page is #11, not #1. */ export function getSequenceNumber( rowIndex: number, page?: number, recordsPerPage?: number, ): number { if (page && recordsPerPage) return (page - 1) * recordsPerPage + rowIndex + 1; return rowIndex + 1; } /** * Ready-made column definition for a "No." / sequence-number column. * Pass `page`/`recordsPerPage` when paginating so numbering continues * across pages instead of resetting to 1 on every page. * * columns={[createSequenceColumn({ page, recordsPerPage }), ...yourColumns]} */ export function createSequenceColumn(options?: { title?: React.ReactNode; width?: number | string; page?: number; recordsPerPage?: number; /** Override the (otherwise unused) synthetic accessor/id, e.g. if "no" collides with a real field. */ accessor?: string; pinned?: "left" | "right"; }): DataTableColumn { const { title = "No.", width = 56, page, recordsPerPage, accessor = "__sequence", pinned, } = options ?? {}; return { accessor, title, width, pinned, textAlign: "center", render: (_record, rowIndex) => getSequenceNumber(rowIndex, page, recordsPerPage), }; } 4f:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@nekode","registryDependencies":["checkbox","label","button","popover","context-menu","separator","select","dropdown-menu","table"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/ui/datatable/DataTable.tsx","content":"$52","type":"registry:ui","target":"components/ui/datatable/DataTable.tsx"},{"path":"src/registry/ui/datatable/DataTableAction.tsx","content":"$53","type":"registry:ui","target":"components/ui/datatable/DataTableAction.tsx"},{"path":"src/registry/ui/datatable/DataTableEmptyState.tsx","content":"\"use client\";\n\nimport { TableCell, TableRow } from \"@/components/ui/table\";\n\nexport function DataTableEmptyState({\n text,\n colSpan,\n}: {\n text: string;\n colSpan: number;\n}) {\n return (\n \n \n {text}\n \n \n );\n}\n","type":"registry:ui","target":"components/ui/datatable/DataTableEmptyState.tsx"},{"path":"src/registry/ui/datatable/DataTableFooter.tsx","content":"$54","type":"registry:ui","target":"components/ui/datatable/DataTableFooter.tsx"},{"path":"src/registry/ui/datatable/DataTableHeader.tsx","content":"$55","type":"registry:ui","target":"components/ui/datatable/DataTableHeader.tsx"},{"path":"src/registry/ui/datatable/DataTableLoader.tsx","content":"\"use client\";\n\nimport { Loader2 } from \"lucide-react\";\n\nexport function DataTableLoader({ fetching }: { fetching?: boolean }) {\n if (!fetching) return null;\n return (\n

\n \n Loading...\n

\n );\n}\n","type":"registry:ui","target":"components/ui/datatable/DataTableLoader.tsx"},{"path":"src/registry/ui/datatable/DataTablePagination.tsx","content":"$56","type":"registry:ui","target":"components/ui/datatable/DataTablePagination.tsx"},{"path":"src/registry/ui/datatable/DataTableRow.tsx","content":"$57","type":"registry:ui","target":"components/ui/datatable/DataTableRow.tsx"},{"path":"src/registry/ui/datatable/index.ts","content":"export { DataTable, default } from \"./DataTable\";\nexport type { DataTableActionProps } from \"./DataTableAction\";\nexport { DataTableAction } from \"./DataTableAction\";\nexport type {\n DataTableColumn,\n DataTablePaginationProps,\n RowContextMenuItem,\n SortDirection,\n SortStatus,\n} from \"./types\";\nexport {\n createSequenceColumn,\n getColumnKey,\n getRecordId,\n getSequenceNumber,\n} from \"./utils\";\n","type":"registry:ui","target":"components/ui/datatable/index.ts"},{"path":"src/registry/ui/datatable/types.ts","content":"$58","type":"registry:ui","target":"components/ui/datatable/types.ts"},{"path":"src/registry/ui/datatable/utils.ts","content":"$59","type":"registry:ui","target":"components/ui/datatable/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]