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/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"] 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/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"] 52:T4a64,'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { Checkbox } from '@/components/ui/checkbox'; import { Pagination, type PaginationProps } from '@/components/ui/pagination'; import { useLabels } from '@/components/ui/labels-context'; import { Skeleton } from '@/components/ui/skeleton'; import { isTableCellElement, type SortDirection, Table, TableBody, TableCaption, TableCell, TableEmpty, TableError, TableFooter, TableHead, TableHeader, TableLoadingMore, TableRow, type TableProps, } from '@/components/ui/table'; // Data-driven grid built on the Table primitives: columns definition, row selection, sorting, density, state rows and a pager footer. type DataGridDensity = 'default' | 'compact'; type DataGridAlign = 'left' | 'center' | 'right'; // Row height: `default` is the single-line row, `two-line` fits a title with a subtitle (Table row-two-line size). type DataGridRowHeight = 'default' | 'two-line'; // Fixed column widths from the Figma Table first column variants (160, 200, 240, 360, 440). Unset columns share the remaining width. type DataGridColumnWidth = 160 | 200 | 240 | 360 | 440; // Bound to the `size-column-` sizing tokens. The fallback keeps the Figma value until the token ships in the installed tokens version. const columnWidthClass: Record = { 160: 'w-[var(--size-column-160,160px)] min-w-[var(--size-column-160,160px)] max-w-[var(--size-column-160,160px)]', 200: 'w-[var(--size-column-200,200px)] min-w-[var(--size-column-200,200px)] max-w-[var(--size-column-200,200px)]', 240: 'w-[var(--size-column-240,240px)] min-w-[var(--size-column-240,240px)] max-w-[var(--size-column-240,240px)]', 360: 'w-[var(--size-column-360,360px)] min-w-[var(--size-column-360,360px)] max-w-[var(--size-column-360,360px)]', 440: 'w-[var(--size-column-440,440px)] min-w-[var(--size-column-440,440px)] max-w-[var(--size-column-440,440px)]', }; interface DataGridColumn { id: string; header: React.ReactNode; // Cell renderer. Without it the cell shows `String(row[id])`. cell?: (row: T, index: number) => React.ReactNode; align?: DataGridAlign; // Shows the sort button in the header. Sorting is client side when `sortValue` is set, otherwise the consumer sorts via `onSortChange`. sortable?: boolean; sortValue?: (row: T) => string | number | Date | null | undefined; // Hides the column on narrow viewports: `2` below md, `3` below lg. `1` (default) always shows. priority?: 1 | 2 | 3; className?: string; // Pins the column to the start edge while the grid scrolls sideways (opaque in every row state, edge shadow while scrolled). Use it on the first column; with `selectable` the checkbox column pins too. pinned?: boolean; // Fixed width in px from the Figma column presets: 160, 200, 240, 360 or 440. The cell content truncates inside it. width?: DataGridColumnWidth; // How `cell` output is placed. `auto` (default) uses a returned TableCell-based component (TableLeadCell, TableBadgeCell, TableActionsCell, ...) // as the cell itself and wraps anything else in a TableCell. `element` always uses the output as the cell, `cell` always wraps it. cellAs?: 'auto' | 'cell' | 'element'; } interface DataGridSort { columnId: string; direction: Exclude; } interface DataGridPagination extends Pick< PaginationProps, 'page' | 'defaultPage' | 'onPageChange' | 'pageSize' | 'pageSizeOptions' | 'onPageSizeChange' | 'total' | 'rangeText' | 'perPageText' | 'loadingText' > {} interface DataGridProps extends Omit { columns: DataGridColumn[]; rows: T[]; getRowId: (row: T) => string; // Accessible name of the table (rendered as a screen reader caption). label?: string; density?: DataGridDensity; // `two-line` gives every row the two-line height for cells that stack a title and a subtitle (see DataGridTwoLine). rowHeight?: DataGridRowHeight; // Row selection with a leading checkbox column. Controlled via `selectedIds`, uncontrolled via `defaultSelectedIds`. selectable?: boolean; selectedIds?: string[]; defaultSelectedIds?: string[]; onSelectedIdsChange?: (ids: string[]) => void; // Sorting. Controlled via `sort`, uncontrolled via `defaultSort`. sort?: DataGridSort | null; defaultSort?: DataGridSort | null; onSortChange?: (sort: DataGridSort | null) => void; // Row whose record is open in a side sheet. Gets the active wash and `aria-current`, independent of selection (`aria-selected`). activeRowId?: string | null; // Makes rows actionable (hover, tab stop, Enter and Space). onRowClick?: (row: T) => void; getRowLabel?: (row: T) => string; // State rows from Table: loading skeleton, error with retry, empty. loading?: boolean; error?: boolean; onRetry?: () => void; emptyTitle?: React.ReactNode; emptyDescription?: React.ReactNode; emptyActions?: React.ReactNode; // Pager footer (compact Pagination). Slices `rows` client side unless `total` is given, then `rows` is the current page. pagination?: DataGridPagination; loadingRows?: number; // Lazy loading footer row (use instead of `pagination`). `hasMore` offers the Load more button via `onLoadMore`, `loadingMore` shows the live loading status. onLoadMore?: () => void; hasMore?: boolean; loadingMore?: boolean; loadMoreLabel?: string; loadingMoreLabel?: string; selectAllLabel?: string; selectRowLabel?: string | ((row: unknown) => string); } const priorityClass = { 1: '', 2: 'max-md:hidden', 3: 'max-lg:hidden' } as const; const toComparable = (value: string | number | Date | null | undefined) => (value instanceof Date ? value.getTime() : value); const compareValues = (a: ReturnType, b: ReturnType) => { // Empty values sort last in both directions, handled by the caller. if (typeof a === 'number' && typeof b === 'number') return a - b; return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' }); }; function DataGridInner( { columns, rows, getRowId, label, density = 'default', rowHeight, selectable = false, selectedIds: selectedIdsProp, defaultSelectedIds = [], onSelectedIdsChange, sort: sortProp, defaultSort = null, onSortChange, activeRowId, onRowClick, getRowLabel, loading = false, error = false, onRetry, emptyTitle, emptyDescription, emptyActions, pagination, loadingRows = 5, onLoadMore, hasMore = false, loadingMore = false, loadMoreLabel, loadingMoreLabel, selectAllLabel, selectRowLabel, className, ...tableProps }: DataGridProps, ref: React.ForwardedRef, ) { const l = useLabels({ selectAllRows: selectAllLabel, selectRow: typeof selectRowLabel === 'string' ? selectRowLabel : undefined }); const [innerSelected, setInnerSelected] = React.useState(defaultSelectedIds); const selectedControlled = selectedIdsProp !== undefined; const selected = selectedControlled ? selectedIdsProp : innerSelected; const setSelected = (next: string[]) => { if (!selectedControlled) setInnerSelected(next); onSelectedIdsChange?.(next); }; const [innerSort, setInnerSort] = React.useState(defaultSort); const sort = sortProp !== undefined ? sortProp : innerSort; const changeSort = (columnId: string) => { // Cycle ascending, descending, none. const next: DataGridSort | null = sort?.columnId !== columnId ? { columnId, direction: 'asc' } : sort.direction === 'asc' ? { columnId, direction: 'desc' } : null; if (sortProp === undefined) setInnerSort(next); onSortChange?.(next); }; const sorted = React.useMemo(() => { const column = sort ? columns.find((c) => c.id === sort.columnId) : undefined; if (!sort || !column?.sortValue) return rows; const read = column.sortValue; const factor = sort.direction === 'asc' ? 1 : -1; return [...rows].sort((a, b) => { const va = toComparable(read(a)); const vb = toComparable(read(b)); const emptyA = va === null || va === undefined || va === ''; const emptyB = vb === null || vb === undefined || vb === ''; if (emptyA || emptyB) return emptyA === emptyB ? 0 : emptyA ? 1 : -1; return factor * compareValues(va, vb); }); }, [rows, columns, sort]); const [innerPage, setInnerPage] = React.useState(pagination?.defaultPage ?? 1); const [innerPageSize, setInnerPageSize] = React.useState(pagination?.pageSize ?? pagination?.pageSizeOptions?.[0] ?? 20); const pageSize = pagination?.pageSize ?? innerPageSize; const serverSide = pagination?.total !== undefined; const total = pagination ? pagination.total ?? sorted.length : 0; const pageCount = Math.max(1, Math.ceil(total / pageSize)); const page = Math.min(Math.max(1, pagination?.page ?? innerPage), pageCount); const visible = pagination && !serverSide ? sorted.slice((page - 1) * pageSize, page * pageSize) : sorted; const ids = visible.map(getRowId); const selectedOnPage = ids.filter((id) => selected.includes(id)); const allChecked: boolean | 'indeterminate' = ids.length > 0 && selectedOnPage.length === ids.length ? true : selectedOnPage.length > 0 ? 'indeterminate' : false; const toggleAll = (checked: boolean | 'indeterminate') => { setSelected(checked === true ? Array.from(new Set([...selected, ...ids])) : selected.filter((id) => !ids.includes(id))); }; const toggleRow = (id: string, checked: boolean | 'indeterminate') => { setSelected(checked === true ? [...selected, id] : selected.filter((x) => x !== id)); }; const columnCount = columns.length + (selectable ? 1 : 0); const compact = density === 'compact'; const pinnedSelect = selectable && columns.some((c) => c.pinned); // With a pinned checkbox column the pinned data column sticks right after it. const pinnedClass = (column: DataGridColumn) => (column.pinned && selectable ? 'left-[var(--size-table-select)]' : undefined); const state = loading ? 'loading' : error ? 'error' : visible.length === 0 ? 'empty' : 'rows'; const rowName = (row: T) => (typeof selectRowLabel === 'function' ? selectRowLabel(row) : getRowLabel ? `${l.selectRow}: ${getRowLabel(row)}` : l.selectRow); return ( {label ? {label} : null} {selectable ? ( ) : null} {columns.map((column) => ( changeSort(column.id) : undefined} className={cn(priorityClass[column.priority ?? 1], column.width && columnWidthClass[column.width], pinnedClass(column), column.className)} > {column.header} ))} {state === 'loading' ? ( // One skeleton cell per column with the same width, priority and pin classes as the real cells, so the columns stay under their headers. Array.from({ length: loadingRows }).map((_, rowIndex) => ( {selectable ? ( ) : null} {columns.map((column, colIndex) => ( ))} )) ) : null} {state === 'error' ? : null} {state === 'empty' ? : null} {state === 'rows' ? visible.map((row, index) => { const id = getRowId(row); const isSelected = selected.includes(id); return ( onRowClick(row) : undefined} aria-label={onRowClick && getRowLabel ? getRowLabel(row) : undefined} > {selectable ? ( // Keeps a checkbox click from activating the row. event.stopPropagation()}> toggleRow(id, checked)} /> ) : null} {columns.map((column) => { const content = column.cell ? column.cell(row, index) : String((row as Record)[column.id] ?? ''); const asElement = column.cellAs === 'element' || (column.cellAs !== 'cell' && isTableCellElement(content)); const columnClass = cn(column.align === 'center' && 'text-center', priorityClass[column.priority ?? 1], column.width && columnWidthClass[column.width], pinnedClass(column), column.className); if (asElement && React.isValidElement<{ className?: string; align?: 'left' | 'right'; rowHeight?: DataGridRowHeight; pinned?: boolean }>(content)) { // A cell component returned by `cell` is the td itself, so the row keeps valid table markup. return React.cloneElement(content, { key: column.id, className: cn(columnClass, content.props.className), align: content.props.align ?? (column.align === 'right' ? 'right' : undefined), pinned: content.props.pinned ?? column.pinned, rowHeight: content.props.rowHeight ?? rowHeight, }); } return ( {content} ); })} ); }) : null} {state === 'rows' && !pagination && (loadingMore || (hasMore && onLoadMore)) ? ( ) : null} {pagination ? ( { if (pagination.page === undefined) setInnerPage(next); pagination.onPageChange?.(next); }} onPageSizeChange={ pagination.pageSizeOptions || pagination.onPageSizeChange ? (size) => { if (pagination.pageSize === undefined) setInnerPageSize(size); setInnerPage(1); pagination.onPageSizeChange?.(size); } : undefined } /> ) : null}

); } // Generic forwardRef keeps the row type inferred from `rows` and `columns`. const DataGrid = React.forwardRef(DataGridInner) as (props: DataGridProps & { ref?: React.ForwardedRef }) => ReturnType; (DataGrid as unknown as { displayName: string }).displayName = 'DataGrid'; interface DataGridTwoLineProps extends Omit, 'title'> { title: React.ReactNode; subtitle?: React.ReactNode; } // Title with a subtitle for a DataGrid `cell` in a `rowHeight="two-line"` grid. Both lines truncate. const DataGridTwoLine = React.forwardRef(({ title, subtitle, className, ...props }, ref) => (

{title} {subtitle ? {subtitle} : null}

)); DataGridTwoLine.displayName = 'DataGridTwoLine'; export { DataGrid, DataGridTwoLine, type DataGridTwoLineProps, type DataGridRowHeight, type DataGridAlign, type DataGridColumn, type DataGridColumnWidth, type DataGridDensity, type DataGridPagination, type DataGridProps, type DataGridSort }; 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":[null,["$","$L50",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/checkbox.json","https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/pagination.json","https://zero-design.itdone.de/r/skeleton.json","https://zero-design.itdone.de/r/table.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/data-grid.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]