4c: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"] 4d: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"] 4e:Tb1c2,"use client" import * as React from "react" import { type ColumnDef, type RowData, columnFilteringFeature, columnResizingFeature, columnSizingFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_includesString, flexRender, globalFilteringFeature, metaHelper, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable, type PaginationState, type RowSelectionState, type SortingState, } from "@tanstack/react-table" import { useVirtualizer } from "@tanstack/react-virtual" import { ArrowUp, ArrowDown, ChevronsUpDown, Download, Table2, } from "lucide-react" import { cn } from "@/lib/utils" import { type UILocale, UI_I18N } from "@/lib/ui-i18n" import { formatValue as fmtValue } from "@/lib/format-utils" import { Button } from "@/components/ui/ds-button" import { Skeleton } from "@/components/ui/skeleton" import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/ds-pagination" import { SearchBar } from "@/components/ui/ds-search-bar" // ── Table Features ───────────────────────────────────────────────────────── // Explicit v9 feature registration. Column layout/display hints live in the // `columnMeta` type-only slot instead of global `ColumnMeta` declaration // merging. export interface DataTableColumnMeta { align?: "left" | "center" | "right" width?: number flexGrow?: number wrap?: boolean format?: "percent" | "currency" | "number" | "money" locale?: string formatOptions?: Intl.NumberFormatOptions } const dataTableFeatures = tableFeatures({ columnFilteringFeature, globalFilteringFeature, rowSortingFeature, rowPaginationFeature, rowSelectionFeature, columnSizingFeature, columnResizingFeature, filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(), paginatedRowModel: createPaginatedRowModel(), filterFns: { includesString: filterFn_includesString }, columnMeta: metaHelper(), }) type DataTableFeatures = typeof dataTableFeatures /** `ColumnDef` pre-bound to the DataTable's registered features. */ export type DataTableColumnDef< TData extends RowData, TValue = unknown, > = ColumnDef // ── Types ────────────────────────────────────────────────────────────────── /** * Convenience column descriptor. Pass to `col()` to produce a `ColumnDef`. * Use `ColumnDef` directly when you need the full TanStack Table API. */ export interface DataTableColumn { key: keyof T & string label: string width?: number flexGrow?: number format?: "percent" | "currency" | "number" | "money" locale?: string formatOptions?: Intl.NumberFormatOptions wrap?: boolean sortable?: boolean align?: "left" | "center" | "right" cell?: (value: unknown, row: T) => React.ReactNode } export interface DataTableLabels { searchPlaceholder?: string noData?: string noDataDescription?: string pagination?: { of?: string pluralItemName?: string rowsPerPage?: string prev?: string next?: string } actions?: { download?: string clearSearch?: string } selection?: { selectAll?: string selectRow?: string } } export interface DataTableProps< TData extends RowData, > extends React.HTMLAttributes { columns: DataTableColumnDef[] data: TData[] // Header title?: string subtitle?: string // Footer footer?: React.ReactNode // Layout rowHeight?: number height?: number width?: string | number size?: "compact" | "default" textSize?: "xs" | "sm" | "md" | "lg" rounded?: boolean paginationRounded?: "full" | "light" | "none" // Features loading?: boolean showSearch?: boolean manualSorting?: boolean sorting?: SortingState onSortingChange?: (sorting: SortingState) => void pagination?: boolean manualPagination?: boolean pageCount?: number rowCount?: number defaultPageSize?: number pageIndex?: number defaultGlobalFilter?: string pageSizeOptions?: number[] selectRows?: boolean stickyColumns?: number onPageChange?: (pageIndex: number) => void // Toolbar toolbar?: React.ReactNode showDownload?: boolean onDownload?: () => void voiceSearch?: boolean onVoiceStart?: () => void onVoiceEnd?: () => void onVoiceError?: (error: string) => void // Handlers onRowClick?: (row: TData) => void onSelectedRowsChange?: (rows: TData[]) => void // Labels locale?: UILocale labels?: DataTableLabels // Infinite scroll (non-paginated mode) hasMore?: boolean onLoadMore?: () => void ariaLabel?: string } // ── Helpers ──────────────────────────────────────────────────────────────── function formatValue( val: unknown, format?: string, locale?: string, formatOptions?: Intl.NumberFormatOptions ): string { if (val == null) return "" const n = Number(val) switch (format) { case "percent": return fmtValue(n, "percent", { decimals: formatOptions?.minimumFractionDigits ?? 2, locale, }) case "currency": case "money": return fmtValue(n, "currency", { currency: formatOptions?.currency ?? "BRL", decimals: formatOptions?.minimumFractionDigits ?? formatOptions?.maximumFractionDigits ?? 2, locale: locale ?? "pt-BR", }) case "number": return fmtValue(n, "float", { decimals: formatOptions?.maximumFractionDigits ?? 2, locale, }) default: return String(val) } } function sortingStatesEqual(a: SortingState, b: SortingState): boolean { if (a === b) return true if (a.length !== b.length) return false return a.every((s, i) => s.id === b[i].id && s.desc === b[i].desc) } /** * Converts a simple `DataTableColumn` descriptor into a TanStack Table `ColumnDef`. * * @example * const columns: ColumnDef[] = [ * col({ key: "name", label: "Name", sortable: true }), * col({ key: "course", label: "Course", width: 220 }), * col({ key: "gpa", label: "GPA", align: "center", sortable: true }), * col({ key: "status", label: "Status", cell: (_, row) => {row.status} }), * ] */ export function col( def: DataTableColumn ): DataTableColumnDef { return { id: def.key, accessorKey: def.key, header: def.label, enableSorting: def.sortable ?? false, enableColumnFilter: false, meta: { align: def.align, width: def.width, flexGrow: def.flexGrow, wrap: def.wrap, format: def.format, locale: def.locale, formatOptions: def.formatOptions, }, cell: def.cell ? ({ row, getValue }) => def.cell!(getValue(), row.original) : ({ getValue, column }) => formatValue( getValue(), column.columnDef.meta?.format, column.columnDef.meta?.locale, column.columnDef.meta?.formatOptions ), } } // ── Column sizing ────────────────────────────────────────────────────────── function colStyle( meta: DataTableColumnMeta | undefined, override?: number ): React.CSSProperties { const w = override ?? meta?.width return { flexGrow: w ? 0 : (meta?.flexGrow ?? 1), flexShrink: w ? 0 : 1, flexBasis: w ? `${w}px` : "auto", width: w ? `${w}px` : "auto", minWidth: w ? `${w}px` : "100px", } } // ── Table Primitives ─────────────────────────────────────────────────────── // Exported for consumers who need a custom table layout without DataTable's // state management and virtualization. export const Table = React.forwardRef< HTMLTableElement, React.TableHTMLAttributes >(({ className, ...props }, ref) => ( )) Table.displayName = "Table" export const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes & { sticky?: boolean } >(({ className, sticky, ...props }, ref) => ( )) TableHeader.displayName = "TableHeader" export const TableBody = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )) TableBody.displayName = "TableBody" export const TableRow = React.forwardRef< HTMLTableRowElement, React.HTMLAttributes & { clickable?: boolean } >(({ className, clickable, onClick, ...props }, ref) => ( { if (e.key === "Enter" || e.key === " ") { e.preventDefault() onClick?.(e as unknown as React.MouseEvent) } } : undefined } className={cn( "border-b border-border/40 transition-colors duration-150 hover:bg-muted/40", clickable && "cursor-pointer", className )} onClick={onClick} {...props} /> )) TableRow.displayName = "TableRow" export const TableHead = React.forwardRef< HTMLTableCellElement, React.ThHTMLAttributes >(({ className, ...props }, ref) => (

)) TableHead.displayName = "TableHead" export const TableCell = React.forwardRef< HTMLTableCellElement, React.TdHTMLAttributes >(({ className, ...props }, ref) => (

)) TableCell.displayName = "TableCell" // ── Skeleton ─────────────────────────────────────────────────────────────── const SKELETON_WIDTHS = [72, 88, 56, 78, 92, 62, 82, 68, 52, 80] interface DataTableSkeletonProps { columns: ReadonlyArray<{ meta?: DataTableColumnMeta }> rowCount: number hasTitle?: boolean hasSubtitle?: boolean hasFooter?: boolean showSearch?: boolean hasToolbar?: boolean pagination?: boolean rounded?: boolean className?: string } function DataTableSkeleton({ columns, rowCount, hasTitle, hasSubtitle, hasFooter, showSearch, hasToolbar, pagination, rounded = true, className, }: DataTableSkeletonProps) { return (

{(hasTitle || hasSubtitle) && (

{hasTitle && ( )} {hasSubtitle && ( )}

)} {(hasToolbar || showSearch) && (

{hasToolbar && ( )}

{showSearch && ( )}

)}

{/* Header */}

{columns.map((col, i) => (

))}

{/* Rows */} {Array.from({ length: rowCount }).map((_, r) => (

{columns.map((col, c) => { const pct = SKELETON_WIDTHS[ (r * columns.length + c) % SKELETON_WIDTHS.length ] return (

) })}

))} {pagination && (

)}

{hasFooter && (

)}

) } // ── Empty State ──────────────────────────────────────────────────────────── function DataTableEmpty({ message, description, }: { message: string description?: string }) { return (

{message}

{description && (

{description}

)}

) } // ── Pagination ───────────────────────────────────────────────────────────── function buildPageRange( currentPage: number, totalPages: number ): (number | "ellipsis")[] { if (totalPages <= 7) { return Array.from({ length: totalPages }, (_, i) => i + 1) } const left = currentPage - 1 const right = currentPage + 1 const pages: number[] = [] for (let i = 1; i <= totalPages; i++) { if (i === 1 || i === totalPages || (i >= left && i <= right)) { pages.push(i) } } const range: (number | "ellipsis")[] = [] let prev: number | null = null for (const p of pages) { if (prev !== null) { if (p - prev === 2) range.push(prev + 1) else if (p - prev > 2) range.push("ellipsis") } range.push(p) prev = p } return range } interface PaginationBarProps { pageIndex: number pageCount: number totalRows: number pageSize: number pageSizeOptions?: number[] canPrev: boolean canNext: boolean onPrev: () => void onNext: () => void onPageChange: (index: number) => void onPageSizeChange?: (size: number) => void itemLabel: string rowsPerPageLabel: string ofLabel: string prevLabel: string nextLabel: string rounded?: "full" | "light" | "none" } function PaginationBar({ pageIndex, pageCount, totalRows, pageSize, pageSizeOptions, canPrev, canNext, onPrev, onNext, onPageChange, onPageSizeChange, itemLabel, rowsPerPageLabel, ofLabel, prevLabel, nextLabel, rounded = "full", }: PaginationBarProps) { const start = totalRows === 0 ? 0 : pageIndex * pageSize + 1 const end = Math.min((pageIndex + 1) * pageSize, totalRows) const pageRange = buildPageRange(pageIndex + 1, pageCount) return (

{totalRows === 0 ? `0 ${itemLabel}` : `${start}–${end} ${ofLabel} ${totalRows} ${itemLabel}`}

{pageSizeOptions && onPageSizeChange && (

{rowsPerPageLabel}

)}

) => { e.preventDefault() onPrev() }} aria-disabled={!canPrev} className={cn( "min-h-[44px] min-w-[44px] hover:bg-primary/10", !canPrev && "pointer-events-none opacity-50" )} /> {pageRange.map((p, i) => p === "ellipsis" ? ( ) : ( ) => { e.preventDefault() onPageChange(p - 1) }} className={cn( "min-h-[44px] min-w-[44px]", p === pageIndex + 1 ? "border-transparent bg-primary/15 text-primary hover:bg-primary/20" : "hover:bg-primary/10" )} > {p} ) )} ) => { e.preventDefault() onNext() }} aria-disabled={!canNext} className={cn( "min-h-[44px] min-w-[44px] hover:bg-primary/10", !canNext && "pointer-events-none opacity-50" )} />

) } // ── Cell size presets ────────────────────────────────────────────────────── const SIZE_PRESETS = { xs: { pad: "px-2 py-1", font: "text-xs", rowH: 32 }, sm: { pad: "px-3 py-2", font: "text-xs", rowH: 36 }, md: { pad: "px-4 py-2.5", font: "text-sm", rowH: 40 }, lg: { pad: "px-4 py-3", font: "text-sm", rowH: 48 }, } as const // ── DataTable ────────────────────────────────────────────────────────────── export function DataTable({ columns, data, title, subtitle, footer, rowHeight, height = 400, loading = false, width, size = "default", textSize: _textSize, rounded = true, paginationRounded, showSearch = false, manualSorting = false, sorting, onSortingChange, pagination = false, manualPagination = false, pageCount, rowCount, defaultPageSize = 10, defaultGlobalFilter = "", pageSizeOptions, selectRows = false, stickyColumns = 0, onPageChange, pageIndex, toolbar, showDownload = false, onDownload, voiceSearch = false, onVoiceStart, onVoiceEnd, onVoiceError, onRowClick, onSelectedRowsChange, hasMore = false, onLoadMore, locale, labels, ariaLabel, className, ...props }: DataTableProps) { const textSize = _textSize ?? (size === "compact" ? "sm" : "md") const { pad, font, rowH } = SIZE_PRESETS[textSize] const actualRowHeight = rowHeight ?? rowH // ── Labels ── const i18n = locale ? UI_I18N[locale] : null const l = { searchPlaceholder: labels?.searchPlaceholder ?? i18n?.dataTable.searchPlaceholder ?? "Search...", noData: labels?.noData ?? i18n?.dataTable.noData ?? "No data found", noDataDescription: labels?.noDataDescription ?? i18n?.dataTable.noDataDescription ?? "Data will appear here once available.", pagination: { of: labels?.pagination?.of ?? i18n?.dataTable.of ?? "of", pluralItemName: labels?.pagination?.pluralItemName ?? i18n?.dataTable.rows ?? "rows", rowsPerPage: labels?.pagination?.rowsPerPage ?? i18n?.dataTable.rowsPerPage ?? "Rows per page", prev: labels?.pagination?.prev ?? i18n?.pagination.previous ?? "Previous", next: labels?.pagination?.next ?? i18n?.pagination.next ?? "Next", }, actions: { download: labels?.actions?.download ?? "Export", clearSearch: labels?.actions?.clearSearch ?? i18n?.combobox.clearSearch ?? "Clear search", }, selection: { selectAll: labels?.selection?.selectAll ?? "Select all", selectRow: labels?.selection?.selectRow ?? "Select row", }, } // ── TanStack Table state ── const [sorting_, setSorting] = React.useState(sorting ?? []) const [globalFilter, setGlobalFilter] = React.useState(defaultGlobalFilter) const [rowSelection, setRowSelection] = React.useState({}) const [pagination_, setPagination] = React.useState({ pageIndex: pageIndex ?? 0, pageSize: defaultPageSize, }) // Reset page when global filter changes const handleGlobalFilter = React.useCallback((value: string) => { setGlobalFilter(value) setPagination((p) => ({ ...p, pageIndex: 0 })) }, []) // Sync internal pagination when external pageIndex prop changes React.useEffect(() => { if (pageIndex !== undefined && pageIndex !== pagination_.pageIndex) { setPagination((prev) => ({ ...prev, pageIndex })) } }, [pageIndex]) // eslint-disable-line react-hooks/exhaustive-deps // Sync internal sorting when external `sorting` prop changes React.useEffect(() => { if (sorting !== undefined && !sortingStatesEqual(sorting, sorting_)) { setSorting(sorting) } }, [sorting]) // eslint-disable-line react-hooks/exhaustive-deps // ── Selection column ── const selectionColumn = React.useMemo>( () => ({ id: "__select__", meta: { width: 48 }, enableSorting: false, header: ({ table }) => ( { if (el) el.indeterminate = table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected() }} onChange={table.getToggleAllPageRowsSelectedHandler()} className="size-4 cursor-pointer accent-primary" /> ), cell: ({ row }) => ( e.stopPropagation()} className="size-4 cursor-pointer accent-primary" /> ), }), // eslint-disable-next-line react-hooks/exhaustive-deps [] ) const tableColumns = React.useMemo( () => (selectRows ? [selectionColumn, ...columns] : columns), [selectRows, selectionColumn, columns] ) // ── useTable ── const sortingConfig = React.useMemo(() => { if (!manualSorting) return {} return { manualSorting: true } }, [manualSorting]) // Notify parent of sorting changes after render (never during render) const prevSortingRef = React.useRef(sorting_) React.useEffect(() => { if (!manualSorting || !onSortingChange) return if (!sortingStatesEqual(prevSortingRef.current, sorting_)) { prevSortingRef.current = sorting_ onSortingChange(sorting_) } }, [manualSorting, onSortingChange, sorting_]) const paginationConfig = React.useMemo(() => { if (!pagination) return {} if (manualPagination) { return { manualPagination: true, // -1 = TanStack "unknown total, always allow next" — used while meta is loading pageCount: pageCount ?? -1, ...(rowCount != null && { rowCount }), onPaginationChange: setPagination, } } return { onPaginationChange: setPagination, } }, [pagination, manualPagination, pageCount, rowCount]) // Notify parent of pagination changes after render (never during render) const prevPageRef = React.useRef(pagination_.pageIndex) React.useEffect(() => { if (!manualPagination || !onPageChange || !pagination) return if (prevPageRef.current !== pagination_.pageIndex) { prevPageRef.current = pagination_.pageIndex onPageChange(pagination_.pageIndex) } }, [manualPagination, onPageChange, pagination, pagination_.pageIndex]) const table = useTable({ features: dataTableFeatures, data, columns: tableColumns, state: { sorting: sorting_, globalFilter, rowSelection, ...(pagination && { pagination: pagination_ }), }, onSortingChange: setSorting, onGlobalFilterChange: handleGlobalFilter, onRowSelectionChange: setRowSelection, ...sortingConfig, ...paginationConfig, enableRowSelection: selectRows, globalFilterFn: "includesString", autoResetPageIndex: !manualPagination, columnResizeMode: "onChange", enableColumnResizing: true, }) // ── Selection callback ── React.useEffect(() => { if (!onSelectedRowsChange) return onSelectedRowsChange( table.getSelectedRowModel().rows.map((r) => r.original) ) // eslint-disable-next-line react-hooks/exhaustive-deps }, [rowSelection]) // ── Virtualization ── const parentRef = React.useRef(null) // `paginatedRowModel` is always registered (features are static), so when // pagination is off we read the pre-paginated (sorted + filtered) model // instead of letting the default page size silently slice the rows. const rows = pagination ? table.getRowModel().rows : table.getPrePaginatedRowModel().rows // eslint-disable-next-line react-hooks/incompatible-library const virtualizer = useVirtualizer({ count: rows.length, getScrollElement: () => parentRef.current, estimateSize: () => actualRowHeight, overscan: 10, }) const virtualItems = virtualizer.getVirtualItems() // ── Infinite scroll trigger ── React.useEffect(() => { if (!hasMore || loading || pagination) return const last = virtualItems[virtualItems.length - 1] if (last && last.index >= rows.length - 5) onLoadMore?.() }, [virtualItems, rows.length, hasMore, loading, pagination, onLoadMore]) // ── Sticky column left offsets ── const stickyLefts = React.useMemo(() => { const offsets: number[] = [] let acc = selectRows ? 48 : 0 for (let i = 0; i < stickyColumns; i++) { offsets.push(acc) const col = columns[i] acc += (col?.meta as { width?: number })?.width ?? 100 } return offsets }, [stickyColumns, columns, selectRows]) // ── Min table width ── const minTableWidth = React.useMemo(() => { let total = selectRows ? 48 : 0 tableColumns.forEach((col) => { if (col.id === "__select__") return total += (col.meta as { width?: number } | undefined)?.width ?? 100 }) return total }, [tableColumns, selectRows]) // ── Skeleton row count ── const skeletonRowCount = Math.max(4, Math.floor(height / actualRowHeight) - 1) // First-load skeleton if (loading && data.length === 0) { return ( ) } const hasToolbarRow = !!(toolbar || showDownload || showSearch) return (

{/* ── Header ── */} {(title || subtitle) && (

{title && (

{title}

)} {subtitle && (

{subtitle}

)}

)} {/* ── Toolbar ── */} {hasToolbarRow && (

{toolbar} {showDownload && ( )}

{showSearch && ( )}

)} {/* ── Table wrapper ── */}

{/* Refetch progress bar */} {loading && data.length > 0 && (

)} {/* Scrollable viewport */}

{/* ── Sticky header ── */} {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header, hi) => { const meta = header.column.columnDef.meta const isSelect = header.column.id === "__select__" const colIdx = isSelect ? -1 : hi - (selectRows ? 1 : 0) const isSticky = isSelect || colIdx < stickyColumns const stickyLeft = isSelect ? 0 : (stickyLefts[colIdx] ?? undefined) const isSorted = header.column.getIsSorted() const canSort = header.column.getCanSort() const sizedWidth = table.state.columnSizing[header.id] return ( {isSelect ? ( header.isPlaceholder ? null : ( flexRender( header.column.columnDef.header, header.getContext() ) ) ) : ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} )} {canSort && ( {isSorted === "asc" ? ( ) : isSorted === "desc" ? ( ) : ( )} )} {!isSelect && !!meta?.width && (

{ e.stopPropagation() header.getResizeHandler()(e) }} onTouchStart={header.getResizeHandler()} className="group/resizer absolute top-0 right-0 flex h-full w-2 cursor-col-resize touch-none items-center justify-end select-none" >

)} ) })} ))} {/* ── Virtualized body ── */} {/* Data rows */} {virtualItems.map((vRow) => { const row = rows[vRow.index] const isSelected = row.getIsSelected() return ( onRowClick?.(row.original)} className={cn( "group absolute top-0 left-0 flex w-full", isSelected && "bg-primary/5", loading && "pointer-events-none opacity-50" )} style={{ height: `${vRow.size}px`, transform: `translateY(${vRow.start}px)`, minWidth: minTableWidth, }} > {row.getAllCells().map((cell, ci) => { const meta = cell.column.columnDef.meta const isSelect = cell.column.id === "__select__" const colIdx = isSelect ? -1 : ci - (selectRows ? 1 : 0) const isSticky = isSelect || colIdx < stickyColumns const stickyLeft = isSelect ? 0 : (stickyLefts[colIdx] ?? undefined) const isCellSorted = !isSelect && cell.column.getIsSorted() !== false return ( {flexRender( cell.column.columnDef.cell, cell.getContext() )} ) })} ) })}

{/* Empty state — outside TableBody so inset-0 is relative to the fixed-height viewport */} {!loading && rows.length === 0 && (

)}

{/* ── Pagination bar ── */} {pagination && ( table.previousPage()} onNext={() => table.nextPage()} onPageChange={(i) => table.setPageIndex(i)} onPageSizeChange={ pageSizeOptions ? (s) => table.setPageSize(s) : undefined } itemLabel={l.pagination.pluralItemName} rowsPerPageLabel={l.pagination.rowsPerPage} ofLabel={l.pagination.of} prevLabel={l.pagination.prev} nextLabel={l.pagination.next} rounded={paginationRounded} /> )}

{/* ── Footer ── */} {footer && (

{footer}

)}

) } DataTable.displayName = "DataTable" 4b:["$","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","@tanstack/react-virtual",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-virtual","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-virtual"}]]}]}],["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@lema-ds","registryDependencies":["button","skeleton","ds-pagination","ds-search-bar","ui-i18n","format-utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/data-table.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-data-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]