4d: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/3j06ow7w40nxu.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"] 4e: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/3j06ow7w40nxu.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"] 4f:Ta9cb,"use client" import * as React from "react" import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, type Cell, type Column, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingState, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingState, type VisibilityState, } from "@tanstack/react-table" import { useVirtualizer } from "@tanstack/react-virtual" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle, } from "@/components/ui/empty" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Skeleton } from "@/components/ui/skeleton" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { DataGridColumnHeader } from "./data-grid-column-header" import { DataGridProvider, getDataGridColumnMeta, getDataGridColumnTitle, useDataGridContext, type DataGridColumn, type DataGridColumnMeta, type DataGridDensity, type DataGridEditEvent, type DataGridFilterValue, type DataGridVirtualization, } from "./data-grid-context" import { DataGridPagination } from "./data-grid-pagination" import { DataGridActiveFilters, DataGridColumnVisibility, DataGridExport, DataGridFilterTrigger, DataGridRefresh, DataGridSearch, DataGridToolbar, DataGridToolbarSpacer, type DataGridSearchProps, } from "./data-grid-toolbar" import { dataGridFilterFn, moveDataGridColumn } from "./data-grid-utils" type DataGridSearchConfig = { placeholder?: string debounceMs?: number ariaLabel?: string } type DataGridPaginationConfig = { defaultPageSize?: number pageSizeOptions?: number[] } type DataGridToolbarConfig = { export?: boolean | { fileName?: string; onExport?: () => void } refresh?: { onRefresh: () => void | Promise } actions?: React.ReactNode } function isPaginationState(value: unknown): value is PaginationState { return Boolean( value && typeof value === "object" && typeof (value as PaginationState).pageIndex === "number" && typeof (value as PaginationState).pageSize === "number", ) } function isStateObject(value: unknown): value is T { return typeof value === "object" && value !== null && !Array.isArray(value) } export interface DataGridProps { columns: DataGridColumn[] data: TData[] children?: React.ReactNode className?: string caption?: string getRowId?: (row: TData, index: number) => string getRowLabel?: (row: Row) => string getRowSelectionDisabledReason?: (row: Row) => string | undefined search?: boolean | DataGridSearchConfig sorting?: boolean | SortingState filters?: boolean | ColumnFiltersState inlineFilters?: boolean pagination?: boolean | DataGridPaginationConfig | PaginationState selection?: boolean | RowSelectionState | ((row: Row) => boolean) columnVisibility?: boolean | VisibilityState columnResize?: boolean columnReorder?: boolean columnPinning?: boolean | ColumnPinningState stickyHeader?: boolean keyboardNavigation?: boolean virtualize?: boolean | DataGridVirtualization density?: DataGridDensity maxHeight?: number | string toolbar?: DataGridToolbarConfig loading?: boolean refreshing?: boolean error?: string | null onRetry?: () => void rowCount?: number pageCount?: number emptyState?: React.ReactNode noResultsState?: React.ReactNode manualSorting?: boolean manualFiltering?: boolean manualPagination?: boolean defaultSorting?: SortingState defaultFilters?: ColumnFiltersState defaultGlobalSearch?: string defaultPagination?: PaginationState defaultSelection?: RowSelectionState defaultColumnVisibility?: VisibilityState defaultColumnOrder?: ColumnOrderState defaultColumnSizing?: ColumnSizingState defaultColumnPinning?: ColumnPinningState globalSearch?: string onGlobalSearchChange?: OnChangeFn onSortingChange?: OnChangeFn onFiltersChange?: OnChangeFn onPaginationChange?: OnChangeFn onSelectionChange?: OnChangeFn onColumnVisibilityChange?: OnChangeFn columnOrder?: ColumnOrderState onColumnOrderChange?: OnChangeFn columnSizing?: ColumnSizingState onColumnSizingChange?: OnChangeFn onColumnPinningChange?: OnChangeFn onCellEdit?: (event: DataGridEditEvent) => void | Promise } function normalizeColumns( columns: DataGridColumn[], selectable: boolean, pinSelection: boolean, getRowLabel?: (row: Row) => string, getRowSelectionDisabledReason?: (row: Row) => string | undefined, ) { const prepared = columns.map((column) => { const options = column as DataGridColumn const type = options.filter?.type ?? options.type ?? "text" const align = options.align ?? (options.type === "number" || options.type === "currency" ? "right" : undefined) const meta: DataGridColumnMeta = { ...((column.meta ?? {}) as DataGridColumnMeta), ...(align && { align }), type, ...(options.filter && { filter: options.filter }), reorderable: options.reorderable ?? true, editable: options.editable ?? false, ...(options.edit && { edit: options.edit }), ...(options.hideBelow && { hideBelow: options.hideBelow }), ...(options.priority && { priority: options.priority }), } return { ...column, meta, enableSorting: options.sortable ?? column.enableSorting ?? true, enableColumnFilter: options.filterable ?? column.enableColumnFilter ?? Boolean(options.filter), enableHiding: options.hideable ?? column.enableHiding ?? true, enableResizing: options.resizable ?? column.enableResizing ?? true, enablePinning: options.pinnable ?? column.enablePinning ?? true, ...(options.filter && !column.filterFn && { filterFn: dataGridFilterFn }), } as DataGridColumn }) if (selectable && !prepared.some((column) => column.id === "select")) { prepared.unshift({ id: "select", header: "Select", size: 44, minSize: 44, maxSize: 44, enableSorting: false, enableColumnFilter: false, enableHiding: false, enableResizing: false, enablePinning: pinSelection, reorderable: false, meta: { align: "center", reorderable: false }, cell: ({ row }) => { const label = getRowLabel?.(row) ?? `Select row ${row.index + 1}` const disabledReason = !row.getCanSelect() ? getRowSelectionDisabledReason?.(row) : undefined return ( event.stopPropagation()} onCheckedChange={(checked) => row.toggleSelected(Boolean(checked))} /> ) }, } as DataGridColumn) } return prepared } export function DataGridRoot({ columns, data, children, className, caption, getRowId, getRowLabel, getRowSelectionDisabledReason, search = false, sorting = true, filters = false, inlineFilters = false, pagination = false, selection = false, columnVisibility = false, columnResize = false, columnReorder = false, columnPinning = false, stickyHeader = false, keyboardNavigation = false, virtualize = false, density = "default", maxHeight, toolbar, loading = false, refreshing = false, error = null, onRetry, rowCount, pageCount, emptyState, noResultsState, manualSorting = false, manualFiltering = false, manualPagination = false, defaultSorting = [], defaultFilters = [], defaultGlobalSearch = "", defaultPagination, defaultSelection = {}, defaultColumnVisibility = {}, defaultColumnOrder = [], defaultColumnSizing = {}, defaultColumnPinning = {}, globalSearch, onGlobalSearchChange, onSortingChange, onFiltersChange, onPaginationChange, onSelectionChange, onColumnVisibilityChange, columnOrder, onColumnOrderChange, columnSizing, onColumnSizingChange, onColumnPinningChange, onCellEdit, }: DataGridProps) { const selectable = selection !== false const filtersEnabled = filters !== false const paginationEnabled = pagination !== false const columnVisibilityEnabled = columnVisibility !== false const columnPinningEnabled = columnPinning !== false const virtualization: false | DataGridVirtualization = virtualize === false ? false : virtualize === true ? {} : virtualize const pageConfig = typeof pagination === "object" && !isPaginationState(pagination) ? pagination : undefined const initialPageSize = pageConfig?.defaultPageSize ?? 25 const viewportRef = React.useRef(null) const resolvedColumns = React.useMemo( () => normalizeColumns( columns, selectable, columnPinningEnabled, getRowLabel, getRowSelectionDisabledReason, ), [ columns, selectable, columnPinningEnabled, getRowLabel, getRowSelectionDisabledReason, ], ) const controlledSorting = Array.isArray(sorting) ? sorting : undefined const controlledFilters = Array.isArray(filters) ? filters : undefined const controlledPagination = isPaginationState(pagination) ? pagination : undefined const controlledSelection = isStateObject(selection) ? selection : undefined const controlledVisibility = isStateObject(columnVisibility) ? columnVisibility : undefined const controlledPinning = isStateObject(columnPinning) ? columnPinning : undefined const table = useReactTable({ data, columns: resolvedColumns, getCoreRowModel: getCoreRowModel(), ...(manualSorting ? { manualSorting: true as const } : { getSortedRowModel: getSortedRowModel() }), ...(manualFiltering ? { manualFiltering: true as const } : { getFilteredRowModel: getFilteredRowModel() }), ...(manualPagination ? { manualPagination: true as const, pageCount } : paginationEnabled ? { getPaginationRowModel: getPaginationRowModel() } : {}), enableSorting: sorting !== false, enableMultiSort: true, enableRowSelection: typeof selection === "function" ? selection : selectable, enableColumnResizing: columnResize, columnResizeMode: "onChange", getRowId, ...(rowCount !== undefined && { rowCount }), initialState: { sorting: defaultSorting, columnFilters: defaultFilters, globalFilter: defaultGlobalSearch, pagination: defaultPagination ?? { pageIndex: 0, pageSize: initialPageSize }, rowSelection: defaultSelection, columnVisibility: defaultColumnVisibility, columnOrder: defaultColumnOrder, columnSizing: defaultColumnSizing, columnPinning: { ...defaultColumnPinning, ...(columnPinningEnabled && selectable ? { left: Array.from( new Set(["select", ...(defaultColumnPinning.left ?? [])]), ), } : {}), }, }, state: { ...(controlledSorting !== undefined && { sorting: controlledSorting }), ...(controlledFilters !== undefined && { columnFilters: controlledFilters }), ...(controlledPagination !== undefined && { pagination: controlledPagination }), ...(controlledSelection !== undefined && { rowSelection: controlledSelection }), ...(controlledVisibility !== undefined && { columnVisibility: controlledVisibility }), ...(controlledPinning !== undefined && { columnPinning: controlledPinning }), ...(globalSearch !== undefined && { globalFilter: globalSearch }), ...(columnOrder !== undefined && { columnOrder }), ...(columnSizing !== undefined && { columnSizing }), }, ...(onSortingChange && { onSortingChange }), ...(onFiltersChange && { onColumnFiltersChange: onFiltersChange }), ...(onPaginationChange && { onPaginationChange }), ...(onSelectionChange && { onRowSelectionChange: onSelectionChange }), ...(onColumnVisibilityChange && { onColumnVisibilityChange }), ...(onColumnOrderChange && { onColumnOrderChange }), ...(onColumnSizingChange && { onColumnSizingChange }), ...(onColumnPinningChange && { onColumnPinningChange }), ...(onGlobalSearchChange && { onGlobalFilterChange: onGlobalSearchChange }), }) const resetView = React.useCallback(() => { table.resetColumnOrder() table.resetColumnVisibility() table.resetColumnSizing() table.resetColumnPinning() table.resetSorting() }, [table]) const contextValue = { table, caption, density, selectable, filtersEnabled, paginationEnabled, inlineFilters, columnVisibilityEnabled, columnReorderEnabled: columnReorder, columnPinningEnabled, columnResizeEnabled: columnResize, stickyHeader, keyboardNavigation, virtualization, viewportRef, loading, refreshing, error, onRetry, rowCount, emptyState, noResultsState, getRowLabel, getRowSelectionDisabledReason, onCellEdit, resetView, } const searchConfig = typeof search === "object" ? search : undefined const exportConfig = typeof toolbar?.export === "object" ? toolbar.export : undefined return (

{children ?? ( <> {(search || filtersEnabled || columnVisibilityEnabled || toolbar) && ( {search && ( )} {filtersEnabled && } {columnVisibilityEnabled && } {toolbar?.export && ( )} {toolbar?.refresh && ( )} {toolbar?.actions} )} {(paginationEnabled || selectable) && ( {selectable && } {paginationEnabled && ( )} )} )}

) } export function DataGridFrame({ className, ...props }: React.ComponentProps<"div">) { return (

) } export function DataGridViewport({ className, maxHeight, style, ...props }: React.ComponentProps<"div"> & { maxHeight?: number | string }) { const { viewportRef, loading, refreshing, virtualization } = useDataGridContext() const resolvedMaxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight return (

[data-slot=table-container]]:overflow-visible", className, )} style={{ containerType: "inline-size", ...(virtualization && resolvedMaxHeight ? { height: resolvedMaxHeight } : {}), maxHeight: resolvedMaxHeight, ...style, }} {...props} /> ) } function getResponsiveClass(hideBelow?: "sm" | "md" | "lg") { if (hideBelow === "sm") return "hidden sm:table-cell" if (hideBelow === "md") return "hidden md:table-cell" if (hideBelow === "lg") return "hidden lg:table-cell" return undefined } function getAlignmentClass(align?: string) { if (align === "right") return "text-right" if (align === "center") return "text-center" return "text-left" } function getPinnedStyles(column: Column) { const pinned = column.getIsPinned() return { ...(pinned === "left" && { left: `${column.getStart("left")}px` }), ...(pinned === "right" && { right: `${column.getAfter("right")}px` }), ...(pinned && { position: "sticky" as const, zIndex: 2 }), width: `${column.getSize()}px`, } } function getPinnedBoundaryClass(column: Column) { if (column.id === "select") return undefined const pinned = column.getIsPinned() if (pinned === "left" && column.getIsLastColumn("left")) { return "border-e border-e-[var(--hui-color-border-base-secondary)]" } if (pinned === "right" && column.getIsFirstColumn("right")) { return "border-s border-s-[var(--hui-color-border-base-secondary)]" } return undefined } function DataGridSelectAllCheckbox() { const { table } = useDataGridContext() return ( table.toggleAllPageRowsSelected(Boolean(checked)) } /> ) } function DataGridInlineFilter({ column, }: { column: Column }) { const { table } = useDataGridContext() const config = getDataGridColumnMeta(column).filter const existing = column.getFilterValue() as DataGridFilterValue | undefined if (!config) return null const setValue = (value: unknown) => { column.setFilterValue( value === "" ? undefined : { operator: config.type === "text" ? "contains" : config.type === "enum" || config.type === "boolean" ? "is" : "equals", value, }, ) table.setPageIndex(0) } if (config.type === "enum" || config.type === "boolean") { const options = config.type === "boolean" ? [ { label: "Yes", value: "true" }, { label: "No", value: "false" }, ] : (config.options ?? []).map((option) => typeof option === "string" ? { label: option, value: option } : option, ) const items = [{ label: "All", value: "__all__" }, ...options] return ( ) } return ( setValue(event.target.value)} /> ) } type EditingCell = { rowId: string columnId: string value: unknown previousValue: unknown saving: boolean error: string | null } function DataGridEditableCell({ cell, editing, setEditing, onMove, }: { cell: Cell editing: EditingCell setEditing: React.Dispatch> onMove: (direction: -1 | 1) => void }) { const { onCellEdit } = useDataGridContext() const meta = getDataGridColumnMeta(cell.column) const commit = async ( moveDirection?: -1 | 1, valueOverride?: { value: unknown }, ) => { if (!onCellEdit || editing.saving) return setEditing((current) => (current ? { ...current, saving: true, error: null } : current)) try { await onCellEdit({ row: cell.row, columnId: cell.column.id, value: valueOverride ? valueOverride.value : editing.value, previousValue: editing.previousValue, }) setEditing(null) if (moveDirection) onMove(moveDirection) } catch (error) { setEditing((current) => current ? { ...current, saving: false, error: error instanceof Error ? error.message : "Could not save this value. Try again.", } : current, ) } } if (meta.edit) { return (

{ if (event.key === "Tab") { event.preventDefault() void commit(event.shiftKey ? -1 : 1) } if (event.key === "Escape") { event.preventDefault() setEditing(null) } }} > {meta.edit({ row: cell.row, value: editing.value, onChange: (value) => setEditing((current) => current ? { ...current, value } : current, ), onCommit: (...args) => void commit( undefined, args.length > 0 ? { value: args[0] } : undefined, ), onCancel: () => setEditing(null), saving: editing.saving, error: editing.error, })}

) } return ( setEditing((current) => current ? { ...current, value: event.target.value } : current, ) } onKeyDown={(event) => { if (event.key === "Enter") { event.preventDefault() void commit() } if (event.key === "Escape") { event.preventDefault() setEditing(null) } if (event.key === "Tab") { event.preventDefault() void commit(event.shiftKey ? -1 : 1) } }} /> {editing.error && ( {editing.error} )} ) } export function DataGridTable({ className }: { className?: string }) { const { table, caption, density, inlineFilters, paginationEnabled, stickyHeader, columnReorderEnabled, keyboardNavigation, virtualization, viewportRef, loading, error, onRetry, rowCount, emptyState, noResultsState, onCellEdit, } = useDataGridContext() const rows = table.getRowModel().rows const columns = table.getVisibleLeafColumns() const columnCount = Math.max(columns.length, 1) const tableState = table.getState() const isFiltering = Boolean(tableState.globalFilter) || tableState.columnFilters.length > 0 const rowHeight = density === "compact" ? 44 : density === "comfortable" ? 64 : 56 const rowVirtualizer = useVirtualizer({ count: virtualization ? rows.length : 0, getScrollElement: () => viewportRef.current, estimateSize: () => (virtualization ? virtualization.estimateSize : undefined) ?? rowHeight, initialRect: virtualization ? { width: 0, height: rowHeight * 8 } : undefined, overscan: (virtualization ? virtualization.overscan : undefined) ?? 8, }) const virtualItems = virtualization ? rowVirtualizer.getVirtualItems() : [] const renderedRows = virtualization ? virtualItems.map((item) => ({ row: rows[item.index], virtualItem: item })) : rows.map((row) => ({ row, virtualItem: null })) const topPadding = virtualItems[0]?.start ?? 0 const bottomPadding = virtualItems.length ? rowVirtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0 const [activeCell, setActiveCell] = React.useState({ row: 0, column: 0 }) const [editing, setEditing] = React.useState(null) const draggedColumn = React.useRef(null) const focusCell = (rowIndex: number, columnIndex: number) => { const nextRow = Math.max(0, Math.min(rowIndex, rows.length - 1)) const nextColumn = Math.max(0, Math.min(columnIndex, columns.length - 1)) setActiveCell({ row: nextRow, column: nextColumn }) if (virtualization) rowVirtualizer.scrollToIndex(nextRow, { align: "auto" }) window.requestAnimationFrame(() => { const target = viewportRef.current?.querySelector( `[data-grid-row-index="${nextRow}"][data-grid-column-index="${nextColumn}"]`, ) target?.focus() }) } const beginEditing = (cell: Cell) => { const meta = getDataGridColumnMeta(cell.column) if (!meta.editable || !onCellEdit) return false const value = cell.getValue() setEditing({ rowId: cell.row.id, columnId: cell.column.id, value, previousValue: value, saving: false, error: null, }) return true } const handleCellKeyDown = ( event: React.KeyboardEvent, cell: Cell, rowIndex: number, columnIndex: number, ) => { if (event.target !== event.currentTarget) return let nextRow = rowIndex let nextColumn = columnIndex if (event.key === "ArrowDown") nextRow += 1 else if (event.key === "ArrowUp") nextRow -= 1 else if (event.key === "ArrowRight") nextColumn += 1 else if (event.key === "ArrowLeft") nextColumn -= 1 else if (event.key === "Home") nextColumn = event.ctrlKey ? 0 : 0 else if (event.key === "End") nextColumn = columns.length - 1 else if (event.key === "Enter") { if (!beginEditing(cell)) { event.currentTarget.querySelector( "button, a[href], input, select, textarea, [tabindex]:not([tabindex='-1'])", )?.focus() } event.preventDefault() return } else if (event.key === " " && cell.row.getCanSelect()) { cell.row.toggleSelected() event.preventDefault() return } else return if (event.ctrlKey && event.key === "Home") nextRow = 0 if (event.ctrlKey && event.key === "End") nextRow = rows.length - 1 event.preventDefault() focusCell(nextRow, nextColumn) } const skeletonRows = Math.min( Math.max(tableState.pagination?.pageSize ?? 8, 6), 10, ) const headerRowCount = 1 + (inlineFilters ? 1 : 0) const dataRowOffset = paginationEnabled ? tableState.pagination.pageIndex * tableState.pagination.pageSize : 0 const availableDataRowCount = rowCount ?? (paginationEnabled ? table.getPrePaginationRowModel().rows.length : rows.length) return ( {columns.map((column) => { const meta = getDataGridColumnMeta(column) const sorted = column.getIsSorted() const canReorder = columnReorderEnabled && meta.reorderable !== false return ( {column.id === "select" ? ( ) : ( { draggedColumn.current = column.id event.dataTransfer.effectAllowed = "move" event.dataTransfer.setData("text/plain", column.id) }} onDragOver={(event) => { if (!draggedColumn.current) return event.preventDefault() event.dataTransfer.dropEffect = "move" }} onDrop={(event) => { event.preventDefault() const source = draggedColumn.current ?? event.dataTransfer.getData("text/plain") const order = table.getState().columnOrder.length ? table.getState().columnOrder : table.getAllLeafColumns().map((item) => item.id) table.setColumnOrder( moveDataGridColumn(order, source, column.id), ) draggedColumn.current = null }} onDragEnd={() => { draggedColumn.current = null }} /> )} ) })} {inlineFilters && ( {columns.map((column) => { const meta = getDataGridColumnMeta(column) return ( ) })} )} {error ? ( Try again ) : undefined } /> ) : loading ? ( Array.from({ length: skeletonRows }).map((_, rowIndex) => ( {columns.map((column, columnIndex) => ( ))} )) ) : rows.length === 0 ? ( {isFiltering ? ( noResultsState ?? ( { table.setGlobalFilter("") table.resetColumnFilters() }} > Clear filters } /> ) ) : ( emptyState ?? ( ) )} ) : ( <> {topPadding > 0 && ( )} {renderedRows.map(({ row, virtualItem }) => { const rowPosition = virtualItem?.index ?? rows.indexOf(row) return ( {row.getVisibleCells().map((cell, columnIndex) => { const meta = getDataGridColumnMeta(cell.column) const isEditing = editing?.rowId === row.id && editing.columnId === cell.column.id return ( setActiveCell({ row: rowPosition, column: columnIndex, }) } onDoubleClick={() => beginEditing(cell)} onKeyDown={(event) => handleCellKeyDown( event, cell, rowPosition, columnIndex, ) } > {isEditing && editing ? ( focusCell(rowPosition, columnIndex + direction) } /> ) : ( flexRender( cell.column.columnDef.cell, cell.getContext(), ) )} ) })} ) })} {bottomPadding > 0 && ( )} )}

) } function DataGridStateViewport({ children }: { children: React.ReactNode }) { return (

{children}

) } export function DataGridStateMessage({ title, description, action, className, }: { title: string description: string action?: React.ReactNode className?: string }) { return ( {title} {description} {action && {action}} ) } export function DataGridFooter({ className, ...props }: React.ComponentProps<"div">) { const { table, loading, error } = useDataGridContext() if (!loading && (error || table.getFilteredRowModel().rows.length === 0)) { return null } return (

) } export function DataGridSelectionStatus({ className, children, }: { className?: string children?: React.ReactNode }) { const { table } = useDataGridContext() const selectedCount = Object.values(table.getState().rowSelection).filter(Boolean).length if (selectedCount === 0) return null return (

{selectedCount} {selectedCount === 1 ? "row" : "rows"} selected {children}

) } export function DataGridRowActions({ className, ...props }: React.ComponentProps<"div">) { return (

event.stopPropagation()} {...props} /> ) } export const DataGrid = Object.assign(DataGridRoot, { Root: DataGridRoot, Toolbar: DataGridToolbar, ToolbarSpacer: DataGridToolbarSpacer, Search: DataGridSearch, Filters: DataGridActiveFilters, FilterTrigger: DataGridFilterTrigger, ColumnVisibility: DataGridColumnVisibility, Export: DataGridExport, Refresh: DataGridRefresh, Frame: DataGridFrame, Viewport: DataGridViewport, Table: DataGridTable, Footer: DataGridFooter, SelectionStatus: DataGridSelectionStatus, Pagination: DataGridPagination, RowActions: DataGridRowActions, }) export { DataGridActiveFilters, DataGridColumnHeader, DataGridColumnVisibility, DataGridExport, DataGridFilterTrigger, DataGridPagination, DataGridRefresh, DataGridSearch, DataGridToolbar, DataGridToolbarSpacer, getDataGridColumnMeta, getDataGridColumnTitle, useDataGridContext, } export type { DataGridColumn, DataGridDensity, DataGridEditEvent, DataGridSearchProps, } 50:T23f9,"use client" import * as React from "react" import type { Column } from "@tanstack/react-table" import { ArrowDown as ArrowDownIcon, ArrowUp as ArrowUpIcon, ChevronsUpDown as ChevronsUpDownIcon, Ellipsis as EllipsisIcon, } from "honestui/icons" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Menu, MenuItem, MenuPopup, MenuSeparator, MenuTrigger, } from "@/components/ui/menu" import { getDataGridColumnMeta, getDataGridColumnTitle, useDataGridContext, } from "./data-grid-context" function toggleColumnSorting( column: Column, multi: boolean, ) { const sorted = column.getIsSorted() if (!sorted) column.toggleSorting(false, multi) else if (sorted === "asc") column.toggleSorting(true, multi) else column.clearSorting() } export function DataGridColumnHeader({ column, className, draggable, onDragStart, onDragOver, onDrop, onDragEnd, }: { column: Column className?: string draggable?: boolean onDragStart?: React.DragEventHandler onDragOver?: React.DragEventHandler onDrop?: React.DragEventHandler onDragEnd?: React.DragEventHandler }) { const { table, columnReorderEnabled, columnPinningEnabled, columnResizeEnabled, } = useDataGridContext() const title = getDataGridColumnTitle(column) const sorted = column.getIsSorted() const sortIndex = column.getSortIndex() const columns = table.getVisibleLeafColumns() const alignment = getDataGridColumnMeta(column).align ?? "left" const header = table.getFlatHeaders().find((item) => item.column.id === column.id) const resizeHandler = header?.getResizeHandler() const minSize = column.columnDef.minSize ?? 40 const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER const currentSize = Math.round(column.getSize()) const visibleIndex = columns.findIndex((item) => item.id === column.id) const canMove = columnReorderEnabled && getDataGridColumnMeta(column).reorderable !== false const move = (offset: -1 | 1) => { const target = columns[visibleIndex + offset] if (!target) return const order = table.getState().columnOrder.length ? table.getState().columnOrder : table.getAllLeafColumns().map((item) => item.id) const sourceIndex = order.indexOf(column.id) const targetIndex = order.indexOf(target.id) const next = [...order] next.splice(sourceIndex, 1) next.splice(targetIndex, 0, column.id) table.setColumnOrder(next) } return (

{column.getCanSort() ? ( ) : ( {title} )} } > {column.getCanSort() && ( <> column.toggleSorting(false)}>Sort ascending column.toggleSorting(true)}>Sort descending {sorted && column.clearSorting()}>Clear sort} )} {canMove && ( <> move(-1)}>Move left = columns.length - 1} onClick={() => move(1)}>Move right )} {columnPinningEnabled && column.getCanPin() && ( <> column.pin("left")}>Pin left column.pin("right")}>Pin right {column.getIsPinned() && column.pin(false)}>Unpin} )} {(column.getCanHide() || (columnResizeEnabled && column.getCanResize())) && } {columnResizeEnabled && column.getCanResize() && ( column.resetSize()}>Reset width )} {column.getCanHide() && ( column.toggleVisibility(false)}>Hide column )}

{columnResizeEnabled && column.getCanResize() && ( column.resetSize()} onDragStart={(event) => { event.preventDefault() event.stopPropagation() }} onMouseDown={(event) => { event.stopPropagation() resizeHandler?.(event) }} onTouchStart={(event) => { event.stopPropagation() resizeHandler?.(event) }} onKeyDown={(event) => { if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return event.preventDefault() const direction = event.key === "ArrowRight" ? 8 : -8 table.setColumnSizing((current) => ({ ...current, [column.id]: Math.min( maxSize, Math.max( minSize, column.getSize() + direction, ), ), })) }} /> )}

) } 51:Tfd5,"use client" import * as React from "react" import type { Column, ColumnDef, Row, Table, } from "@tanstack/react-table" export type DataGridDensity = "compact" | "default" | "comfortable" export type DataGridAlignment = "left" | "center" | "right" export type DataGridFilterType = | "text" | "number" | "currency" | "date" | "enum" | "boolean" export type DataGridFilterOption = { label: string value: string } export type DataGridFilterConfig = { type: DataGridFilterType options?: DataGridFilterOption[] | string[] } export type DataGridFilterValue = { operator: string value?: unknown valueTo?: unknown } export type DataGridEditorProps = { row: Row value: unknown onChange: (value: unknown) => void onCommit: (value?: unknown) => void onCancel: () => void saving: boolean error: string | null } export type DataGridColumnOptions = { type?: DataGridFilterType align?: DataGridAlignment sortable?: boolean filterable?: boolean hideable?: boolean resizable?: boolean reorderable?: boolean pinnable?: boolean editable?: boolean filter?: DataGridFilterConfig edit?: (props: DataGridEditorProps) => React.ReactNode hideBelow?: "sm" | "md" | "lg" priority?: "primary" | "secondary" | "optional" } export type DataGridColumn = ColumnDef< TData, TValue > & DataGridColumnOptions export type DataGridColumnMeta = { label?: string align?: DataGridAlignment type?: DataGridFilterType filter?: DataGridFilterConfig reorderable?: boolean editable?: boolean edit?: (props: DataGridEditorProps) => React.ReactNode hideBelow?: "sm" | "md" | "lg" priority?: "primary" | "secondary" | "optional" } export type DataGridEditEvent = { row: Row columnId: string value: unknown previousValue: unknown } export type DataGridVirtualization = { estimateSize?: number overscan?: number } export type DataGridContextValue = { table: Table caption?: string density: DataGridDensity selectable: boolean filtersEnabled: boolean paginationEnabled: boolean inlineFilters: boolean columnVisibilityEnabled: boolean columnReorderEnabled: boolean columnPinningEnabled: boolean columnResizeEnabled: boolean stickyHeader: boolean keyboardNavigation: boolean virtualization: false | DataGridVirtualization viewportRef: React.RefObject loading: boolean refreshing: boolean error: string | null onRetry?: () => void rowCount?: number emptyState?: React.ReactNode noResultsState?: React.ReactNode getRowLabel?: (row: Row) => string getRowSelectionDisabledReason?: (row: Row) => string | undefined onCellEdit?: (event: DataGridEditEvent) => void | Promise resetView: () => void } const DataGridContext = React.createContext | null>(null) export function DataGridProvider({ value, children, }: { value: DataGridContextValue children: React.ReactNode }) { return ( } > {children} ) } export function useDataGridContext(): DataGridContextValue { const context = React.useContext(DataGridContext) if (!context) { throw new Error("DataGrid parts must be rendered inside .") } return context as DataGridContextValue } export function getDataGridColumnMeta( column: Column, ): DataGridColumnMeta { return (column.columnDef.meta ?? {}) as DataGridColumnMeta } export function getDataGridColumnTitle(column: { id: string columnDef: { header?: unknown; meta?: unknown } }) { const meta = (column.columnDef.meta ?? {}) as DataGridColumnMeta if (meta.label) return meta.label if (typeof column.columnDef.header === "string") return column.columnDef.header return column.id } 52:T11f5,"use client" import * as React from "react" import { ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, } from "honestui/icons" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, } from "@/components/ui/pagination" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { useDataGridContext } from "./data-grid-context" import { getDataGridPageItems } from "./data-grid-utils" export function DataGridPagination({ pageSizeOptions = [10, 25, 50, 100], className, }: { pageSizeOptions?: number[] className?: string }) { const { table, rowCount } = useDataGridContext() const { pageIndex, pageSize } = table.getState().pagination const totalRows = rowCount ?? table.getFilteredRowModel().rows.length const pageCount = Math.max(table.getPageCount(), 1) const rangeStart = totalRows === 0 ? 0 : pageIndex * pageSize + 1 const rangeEnd = Math.min((pageIndex + 1) * pageSize, totalRows) const pageSizeItems = pageSizeOptions.map((size) => ({ label: String(size), value: String(size), })) const pageButtonClass = buttonVariants({ variant: "link", size: "icon", className: "size-7", }) return (

Rows per page

{rangeStart} to {rangeEnd} of {totalRows} table.previousPage()} /> } className={pageButtonClass} > {getDataGridPageItems(pageIndex, pageCount).map((item, index) => item.type === "page" ? ( table.setPageIndex(item.page)} />} className={cn(pageButtonClass, "tabular-nums")} > {item.page + 1} ) : ( ), )} = pageCount - 1} onClick={() => table.nextPage()} /> } className={pageButtonClass} >

) } 53:T3ae6,"use client" import * as React from "react" import { Download as DownloadIcon, FunnelPlus as FunnelPlusIcon, RefreshRounded as RefreshIcon, Search as SearchIcon, Settings2 as Settings2Icon, X as XIcon, } from "honestui/icons" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuSeparator, MenuTrigger, } from "@/components/ui/menu" import { Popover, PopoverClose, PopoverPopup, PopoverTitle, PopoverTrigger, } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Toolbar } from "@/components/ui/toolbar" import { Tooltip, TooltipPopup, TooltipTrigger, } from "@/components/ui/tooltip" import { getDataGridColumnMeta, getDataGridColumnTitle, useDataGridContext, type DataGridFilterOption, type DataGridFilterValue, } from "./data-grid-context" import { buildDataGridCsv, DATA_GRID_FILTER_OPERATORS, formatDataGridFilter, } from "./data-grid-utils" export function DataGridToolbar({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } export function DataGridToolbarSpacer({ className }: { className?: string }) { return } export interface DataGridSearchProps extends Omit< React.ComponentProps, "value" | "onChange" | "size" | "type" > { placeholder?: string debounceMs?: number ariaLabel?: string } export function DataGridSearch({ placeholder = "Search...", debounceMs, ariaLabel, className, ...props }: DataGridSearchProps) { const { table } = useDataGridContext() const externalValue = String(table.getState().globalFilter ?? "") const [draft, setDraft] = React.useState({ value: externalValue, externalValue, }) const value = draft.externalValue === externalValue ? draft.value : externalValue React.useEffect(() => { if (value === externalValue) return if (debounceMs === undefined) { table.setGlobalFilter(value) table.setPageIndex(0) return } const timeout = window.setTimeout(() => { table.setGlobalFilter(value) table.setPageIndex(0) }, debounceMs) return () => window.clearTimeout(timeout) }, [debounceMs, externalValue, table, value]) const defaultLabel = placeholder.replace(/\.{3}$/, "").trim() return ( setDraft({ value: event.target.value, externalValue }) } className="min-h-[var(--hui-space-10)] [&>[data-slot=input]]:!ps-[var(--hui-space-9)]" {...props} /> ) } function normalizeOptions(options?: DataGridFilterOption[] | string[]) { return (options ?? []).map((option) => typeof option === "string" ? { label: option, value: option } : option, ) } function DataGridFilterValueField({ type, options, value, onChange, label, }: { type: string options?: DataGridFilterOption[] | string[] value: unknown onChange: (value: unknown) => void label: string }) { const normalizedOptions = normalizeOptions(options) if (type === "enum" || type === "boolean") { const items = type === "boolean" ? [ { label: "Yes", value: "true" }, { label: "No", value: "false" }, ] : normalizedOptions return ( ) } return ( onChange(event.target.value)} /> ) } export function DataGridFilterTrigger({ className }: { className?: string }) { const { table } = useDataGridContext() const filterableColumns = table .getAllLeafColumns() .filter((column) => getDataGridColumnMeta(column).filter) const [columnId, setColumnId] = React.useState( filterableColumns[0]?.id ?? "", ) const selectedColumn = filterableColumns.find( (column) => column.id === columnId, ) const config = selectedColumn ? getDataGridColumnMeta(selectedColumn).filter : undefined const type = config?.type ?? "text" const operators = DATA_GRID_FILTER_OPERATORS[type] const [selectedOperator, setSelectedOperator] = React.useState( operators[0]?.value ?? "", ) const operator = operators.some((item) => item.value === selectedOperator) ? selectedOperator : operators[0]?.value ?? "" const [value, setValue] = React.useState("") const [valueTo, setValueTo] = React.useState("") const activeOperator = operators.find((item) => item.value === operator) if (filterableColumns.length === 0) return null const columnItems = filterableColumns.map((column) => ({ label: getDataGridColumnTitle(column), value: column.id, })) const operatorItems = operators.map((item) => ({ label: item.label, value: item.value, })) const hasRequiredValue = !activeOperator?.needsValue || (String(value).trim() !== "" && (!activeOperator.needsSecondValue || String(valueTo).trim() !== "")) const apply = () => { if (!selectedColumn || !hasRequiredValue) return const nextValue: DataGridFilterValue = { operator, ...(activeOperator?.needsValue && { value: operator === "is-any-of" ? [value] : value, }), ...(activeOperator?.needsSecondValue && { valueTo }), } selectedColumn.setFilterValue(nextValue) table.setPageIndex(0) } return ( } > Add filter Add filter

Column Condition {activeOperator?.needsValue && ( Value )} {activeOperator?.needsSecondValue && ( Second value )}

}>Cancel } > Apply

) } export function DataGridActiveFilters({ className }: { className?: string }) { const { table } = useDataGridContext() const filters = table.getState().columnFilters if (filters.length === 0) return null return (

{table.getFilteredRowModel().rows.length} results {filters.map((filter) => { const column = table.getColumn(filter.id) if (!column) return null const label = formatDataGridFilter( getDataGridColumnTitle(column), filter.value as DataGridFilterValue, ) return ( ) })} {filters.length > 1 && ( )}

) } export function DataGridColumnVisibility({ className, label = "Columns", }: { className?: string label?: string }) { const { table, resetView } = useDataGridContext() const columns = table.getAllLeafColumns().filter((column) => column.getCanHide()) if (columns.length === 0) return null return ( }> {label} {label} {columns.map((column) => ( column.toggleVisibility(checked)} > {getDataGridColumnTitle(column)} ))} table.toggleAllColumnsVisible(true)}>Show all Reset view ) } export function DataGridExport({ className, fileName = "data-grid.csv", onExport, }: { className?: string fileName?: string onExport?: () => void }) { const { table } = useDataGridContext() const exportRows = () => { if (onExport) { onExport() return } const columns = table .getVisibleLeafColumns() .filter((column) => column.id !== "select" && column.id !== "actions") const csv = buildDataGridCsv( columns.map(getDataGridColumnTitle), table.getFilteredRowModel().rows.map((row) => columns.map((column) => row.getValue(column.id)), ), ) const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" })) const link = document.createElement("a") link.href = url link.download = fileName link.click() URL.revokeObjectURL(url) } return ( ) } export function DataGridRefresh({ className, onRefresh, }: { className?: string onRefresh: () => void | Promise }) { const { refreshing } = useDataGridContext() return ( } > Refresh data ) } 54:T1bac,import type { Row } from "@tanstack/react-table" import type { DataGridFilterType, DataGridFilterValue, } from "./data-grid-context" export const DATA_GRID_FILTER_OPERATORS: Record< DataGridFilterType, Array<{ value: string; label: string; needsValue: boolean; needsSecondValue?: boolean }> > = { text: [ { value: "contains", label: "contains", needsValue: true }, { value: "not-contains", label: "does not contain", needsValue: true }, { value: "is", label: "is", needsValue: true }, { value: "is-not", label: "is not", needsValue: true }, { value: "starts-with", label: "starts with", needsValue: true }, { value: "ends-with", label: "ends with", needsValue: true }, { value: "is-empty", label: "is empty", needsValue: false }, { value: "is-not-empty", label: "is not empty", needsValue: false }, ], number: [ { value: "equals", label: "equals", needsValue: true }, { value: "not-equal", label: "does not equal", needsValue: true }, { value: "greater-than", label: "is greater than", needsValue: true }, { value: "greater-than-or-equal", label: "is at least", needsValue: true }, { value: "less-than", label: "is less than", needsValue: true }, { value: "less-than-or-equal", label: "is at most", needsValue: true }, { value: "between", label: "is between", needsValue: true, needsSecondValue: true }, { value: "is-empty", label: "is empty", needsValue: false }, ], currency: [], date: [ { value: "is", label: "is", needsValue: true }, { value: "before", label: "is before", needsValue: true }, { value: "after", label: "is after", needsValue: true }, { value: "between", label: "is between", needsValue: true, needsSecondValue: true }, { value: "is-empty", label: "is empty", needsValue: false }, ], enum: [ { value: "is", label: "is", needsValue: true }, { value: "is-not", label: "is not", needsValue: true }, { value: "is-any-of", label: "is any of", needsValue: true }, ], boolean: [ { value: "is", label: "is", needsValue: true }, ], } DATA_GRID_FILTER_OPERATORS.currency = DATA_GRID_FILTER_OPERATORS.number function isEmpty(value: unknown) { return value === null || value === undefined || value === "" } function comparableDate(value: unknown) { if (value instanceof Date) return value.getTime() const time = new Date(String(value)).getTime() return Number.isNaN(time) ? null : time } export function dataGridFilterFn( row: Row, columnId: string, rawFilter: unknown, ) { const filter = rawFilter as DataGridFilterValue | undefined if (!filter?.operator) return true const rowValue = row.getValue(columnId) const operator = filter.operator if (operator === "is-empty") return isEmpty(rowValue) if (operator === "is-not-empty") return !isEmpty(rowValue) if (operator === "is-any-of") { const values = Array.isArray(filter.value) ? filter.value : [filter.value] return values.map(String).includes(String(rowValue)) } if (typeof rowValue === "boolean") { return rowValue === (filter.value === true || filter.value === "true") } const rowDate = comparableDate(rowValue) const filterDate = comparableDate(filter.value) const filterDateTo = comparableDate(filter.valueTo) const looksLikeDate = rowValue instanceof Date || (typeof rowValue === "string" && /^\d{4}-\d{2}-\d{2}/.test(rowValue)) if (looksLikeDate && rowDate !== null && filterDate !== null) { if (operator === "is") return rowDate === filterDate if (operator === "before") return rowDate < filterDate if (operator === "after") return rowDate > filterDate if (operator === "between" && filterDateTo !== null) { return rowDate >= filterDate && rowDate <= filterDateTo } } const rowNumber = typeof rowValue === "number" ? rowValue : Number(rowValue) const filterNumber = Number(filter.value) const filterNumberTo = Number(filter.valueTo) const hasNumericValues = !Number.isNaN(rowNumber) && !Number.isNaN(filterNumber) && typeof rowValue !== "string" if (hasNumericValues) { if (operator === "equals") return rowNumber === filterNumber if (operator === "not-equal") return rowNumber !== filterNumber if (operator === "greater-than") return rowNumber > filterNumber if (operator === "greater-than-or-equal") return rowNumber >= filterNumber if (operator === "less-than") return rowNumber < filterNumber if (operator === "less-than-or-equal") return rowNumber <= filterNumber if (operator === "between" && !Number.isNaN(filterNumberTo)) { return rowNumber >= filterNumber && rowNumber <= filterNumberTo } } const actual = String(rowValue ?? "").toLocaleLowerCase() const expected = String(filter.value ?? "").toLocaleLowerCase() if (operator === "contains") return actual.includes(expected) if (operator === "not-contains") return !actual.includes(expected) if (operator === "is") return actual === expected if (operator === "is-not") return actual !== expected if (operator === "starts-with") return actual.startsWith(expected) if (operator === "ends-with") return actual.endsWith(expected) return true } export function moveDataGridColumn( order: string[], sourceId: string, targetId: string, ) { if (sourceId === targetId) return order const next = order.filter((id) => id !== sourceId) const targetIndex = next.indexOf(targetId) if (targetIndex === -1) return order next.splice(targetIndex, 0, sourceId) return next } export function getDataGridPageItems(currentPage: number, pageCount: number) { const visiblePages = new Set([ 0, pageCount - 1, currentPage - 1, currentPage, currentPage + 1, ]) const items: Array<{ type: "page"; page: number } | { type: "ellipsis" }> = [] for (let page = 0; page < pageCount; page++) { if (visiblePages.has(page)) { items.push({ type: "page", page }) } else if (items.at(-1)?.type !== "ellipsis") { items.push({ type: "ellipsis" }) } } return items } export function formatDataGridFilter( title: string, filter: DataGridFilterValue, ) { const operator = Object.values(DATA_GRID_FILTER_OPERATORS) .flat() .find((item) => item.value === filter.operator)?.label ?? filter.operator const rawValue = Array.isArray(filter.value) ? filter.value.join(", ") : String(filter.value ?? "") const value = filter.valueTo ? `${rawValue} and ${String(filter.valueTo)}` : rawValue return `${title} ${operator}${value ? ` ${value}` : ""}` } const CSV_FORMULA_PREFIX = /^[=+\-@\t\r\n\0\uFEFF\uFF0B\uFF0D\uFF1D\uFF20]/ function escapeCsvCell(value: unknown) { const text = value == null ? "" : String(value) const safeText = typeof value === "string" && CSV_FORMULA_PREFIX.test(text) ? `'${text}` : text return `"${safeText.replaceAll('"', '""')}"` } export function buildDataGridCsv( headers: string[], rows: unknown[][], ) { return [headers, ...rows] .map((row) => row.map(escapeCsvCell).join(",")) .join("\n") } 4c:["$","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","honestui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/honestui","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":"honestui"}]]}]}]]}],["$","$L4d",null,{"namespace":"@honestui","registryDependencies":["https://www.honestui.com/r/button.json","https://www.honestui.com/r/checkbox.json","https://www.honestui.com/r/empty.json","https://www.honestui.com/r/input.json","https://www.honestui.com/r/menu.json","https://www.honestui.com/r/pagination.json","https://www.honestui.com/r/popover.json","https://www.honestui.com/r/select.json","https://www.honestui.com/r/skeleton.json","https://www.honestui.com/r/table.json","https://www.honestui.com/r/toolbar.json","https://www.honestui.com/r/tooltip.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"data-grid.tsx","content":"$4f","type":"registry:component","target":"components/ui/data-grid/data-grid.tsx"},{"path":"data-grid-column-header.tsx","content":"$50","type":"registry:component","target":"components/ui/data-grid/data-grid-column-header.tsx"},{"path":"data-grid-context.tsx","content":"$51","type":"registry:component","target":"components/ui/data-grid/data-grid-context.tsx"},{"path":"data-grid-pagination.tsx","content":"$52","type":"registry:component","target":"components/ui/data-grid/data-grid-pagination.tsx"},{"path":"data-grid-toolbar.tsx","content":"$53","type":"registry:component","target":"components/ui/data-grid/data-grid-toolbar.tsx"},{"path":"data-grid-utils.ts","content":"$54","type":"registry:component","target":"components/ui/data-grid/data-grid-utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]