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/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"] 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/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"] 4f:Td730,'use client' 'use no memo' import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react' import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent, Ref, RefObject, } from 'react' import { useDataGrid } from '@/components/spaceui/data-grid' import { flexRender } from '@tanstack/react-table' import type { Cell, Column, Header, Row, Table } from '@tanstack/react-table' import { cn } from '@/lib/utils' import { Checkbox } from '@/components/ui/checkbox' import { Spinner } from '@/components/ui/spinner' // Static spacing lookups; called once per cell, so they stay plain string // picks instead of runtime variant machinery. const headerCellSpacingVariants = ({ size }: { size?: 'dense' | 'default' }) => (size === 'dense' ? 'px-2 h-8' : 'px-3') const bodyCellSpacingVariants = ({ size }: { size?: 'dense' | 'default' }) => size === 'dense' ? 'px-2 py-1.5' : 'px-3 py-2' const footerCellSpacingVariants = ({ size }: { size?: 'dense' | 'default' }) => size === 'dense' ? 'px-2 py-1.5' : 'px-3 py-2' function getPinningStyles(column: Column): CSSProperties { const isPinned = column.getIsPinned() return { // Logical offsets: TanStack's "left"/"right" buckets are start/end // semantics, so pinned columns stick to the correct edge in RTL too // (identical to left/right in LTR). insetInlineStart: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, insetInlineEnd: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, position: isPinned ? 'sticky' : undefined, transform: isPinned ? 'translateZ(0)' : undefined, contain: isPinned ? 'paint' : undefined, width: column.getSize(), zIndex: isPinned ? 30 : undefined, backgroundClip: isPinned ? 'padding-box' : undefined, } } function assignRef(ref: Ref | undefined, value: T | null) { if (!ref) return if (typeof ref === 'function') { ref(value) return } ;(ref as { current: T | null }).current = value } /** * Nearest scroll-area viewport that belongs to THIS grid. A viewport outside * the grid's own container (e.g. a page-level ScrollArea) would make the * width measurement - and the virtualizer - bind the wrong box. */ function getDataGridScrollAreaViewport(node: HTMLElement): HTMLElement | null { const scrollViewport = node.closest('[data-slot="scroll-area-viewport"]') as HTMLElement | null if (!scrollViewport) return null const gridContainer = node.closest('[data-slot="data-grid"]') if (gridContainer && !gridContainer.contains(scrollViewport)) return null return scrollViewport } type DataGridResizeStartEvent = ReactMouseEvent | ReactTouchEvent type DataGridResizeDocumentEvent = globalThis.MouseEvent | globalThis.TouchEvent function isDataGridTouchEvent( event: DataGridResizeStartEvent | DataGridResizeDocumentEvent, ): event is ReactTouchEvent | globalThis.TouchEvent { return 'touches' in event } type DataGridTouchListLike = { length: number item: (index: number) => { identifier: number; clientX: number } | null } function findTouchClientX(list: DataGridTouchListLike, identifier: number) { for (let i = 0; i < list.length; i++) { const touch = list.item(i) if (touch && touch.identifier === identifier) return touch.clientX } return undefined } function getDataGridResizeEventClientX( event: DataGridResizeStartEvent | DataGridResizeDocumentEvent, touchIdentifier?: number, ) { if (isDataGridTouchEvent(event)) { if (typeof touchIdentifier === 'number') { return findTouchClientX(event.touches, touchIdentifier) ?? findTouchClientX(event.changedTouches, touchIdentifier) } return event.touches[0]?.clientX ?? event.changedTouches[0]?.clientX } return event.clientX } function startDataGridColumnResizeOnEnd( event: DataGridResizeStartEvent, header: Header, table: Table, ): (() => void) | undefined { const column = table.getColumn(header.column.id) if (!column || !column.getCanResize()) return const isTouchSession = isDataGridTouchEvent(event) if (isTouchSession && event.touches.length > 1) return event.persist?.() const ownerDocument = event.currentTarget.ownerDocument const ownerWindow = ownerDocument.defaultView const previousBodyCursor = ownerDocument.body.style.cursor const previousDocumentCursor = ownerDocument.documentElement.style.cursor const startSize = header.getSize() // Track the initiating finger so a second touch cannot move or commit the // resize with the wrong clientX. const touchIdentifier = isTouchSession ? event.touches[0]?.identifier : undefined const dragStartClientX = getDataGridResizeEventClientX(event, touchIdentifier) const headerCell = event.currentTarget.closest('th') const headerRect = headerCell?.getBoundingClientRect() const startOffset = headerRect && Number.isFinite(table.options.columnResizeDirection === 'rtl' ? headerRect.left : headerRect.right) ? table.options.columnResizeDirection === 'rtl' ? headerRect.left : headerRect.right : dragStartClientX if (typeof dragStartClientX !== 'number' || typeof startOffset !== 'number') { return } ownerDocument.body.style.cursor = 'col-resize' ownerDocument.documentElement.style.cursor = 'col-resize' const columnSizingStart = header .getLeafHeaders() .map((leafHeader) => [leafHeader.column.id, leafHeader.column.getSize()] as [string, number]) const directionMultiplier = table.options.columnResizeDirection === 'rtl' ? -1 : 1 // Clamp the drag to the leaf columns' min/max sizes so the preview // indicator matches what the commit will produce (no overshoot followed by // a snap-back on release). columnDef always carries resolved defaults. let minDeltaPercentage = -0.999999 let maxDeltaPercentage = Number.POSITIVE_INFINITY columnSizingStart.forEach(([columnId, headerSize]) => { if (headerSize <= 0) return const leafColumn = table.getColumn(columnId) const minSize = leafColumn?.columnDef.minSize const maxSize = leafColumn?.columnDef.maxSize if (typeof minSize === 'number') { minDeltaPercentage = Math.max(minDeltaPercentage, minSize / headerSize - 1) } if (typeof maxSize === 'number' && Number.isFinite(maxSize)) { maxDeltaPercentage = Math.min(maxDeltaPercentage, maxSize / headerSize - 1) } }) let lastClientX = dragStartClientX let ended = false const stopListeners: Array<() => void> = [] const updateOffset = (clientXPos?: number, commit = false) => { if (typeof clientXPos !== 'number') return lastClientX = clientXPos const nextColumnSizing: Record = {} const deltaPercentage = Math.min( Math.max(((clientXPos - dragStartClientX) * directionMultiplier) / startSize, minDeltaPercentage), maxDeltaPercentage, ) const deltaOffset = deltaPercentage * startSize columnSizingStart.forEach(([columnId, headerSize]) => { nextColumnSizing[columnId] = Math.round(Math.max(headerSize + headerSize * deltaPercentage, 0) * 100) / 100 }) table.setColumnSizingInfo((old) => ({ ...old, startOffset, startSize, deltaOffset, deltaPercentage, columnSizingStart, isResizingColumn: column.id, })) if (commit) { table.setColumnSizing((old) => ({ ...old, ...nextColumnSizing, })) } } // Single teardown path: commits at the given position, removes every // document/window listener, and restores cursors. Safe to call more than // once (blur + mouseup + unmount can race). const endResize = (clientXPos?: number) => { if (ended) return ended = true stopListeners.forEach((stop) => stop()) updateOffset(clientXPos, true) table.setColumnSizingInfo((old) => ({ ...old, isResizingColumn: false, startOffset: null, startSize: null, deltaOffset: null, deltaPercentage: null, columnSizingStart: [], })) ownerDocument.body.style.cursor = previousBodyCursor ownerDocument.documentElement.style.cursor = previousDocumentCursor } const mouseMoveHandler = (moveEvent: globalThis.MouseEvent) => { updateOffset(moveEvent.clientX) } const mouseUpHandler = (upEvent: globalThis.MouseEvent) => { endResize(upEvent.clientX) } const touchMoveHandler = (moveEvent: globalThis.TouchEvent) => { if (moveEvent.cancelable) { moveEvent.preventDefault() moveEvent.stopPropagation() } updateOffset(getDataGridResizeEventClientX(moveEvent, touchIdentifier)) } const touchEndHandler = (endEvent: globalThis.TouchEvent) => { // Ignore other fingers lifting; only the initiating touch ends the drag. const clientXPos = typeof touchIdentifier === 'number' ? findTouchClientX(endEvent.changedTouches, touchIdentifier) : getDataGridResizeEventClientX(endEvent) if (typeof clientXPos !== 'number') return if (endEvent.cancelable) { endEvent.preventDefault() endEvent.stopPropagation() } endResize(clientXPos) } // System-interrupted gestures and window focus loss would otherwise leave // the session (and its document listeners) live with no pointer held. const touchCancelHandler = () => { endResize(lastClientX) } const windowBlurHandler = () => { endResize(lastClientX) } const passiveIfSupported = { passive: false } as const if (isTouchSession) { ownerDocument.addEventListener('touchmove', touchMoveHandler, passiveIfSupported) ownerDocument.addEventListener('touchend', touchEndHandler, passiveIfSupported) ownerDocument.addEventListener('touchcancel', touchCancelHandler) stopListeners.push(() => { ownerDocument.removeEventListener('touchmove', touchMoveHandler) ownerDocument.removeEventListener('touchend', touchEndHandler) ownerDocument.removeEventListener('touchcancel', touchCancelHandler) }) } else { ownerDocument.addEventListener('mousemove', mouseMoveHandler, passiveIfSupported) ownerDocument.addEventListener('mouseup', mouseUpHandler, passiveIfSupported) stopListeners.push(() => { ownerDocument.removeEventListener('mousemove', mouseMoveHandler) ownerDocument.removeEventListener('mouseup', mouseUpHandler) }) } if (ownerWindow) { ownerWindow.addEventListener('blur', windowBlurHandler) stopListeners.push(() => ownerWindow.removeEventListener('blur', windowBlurHandler)) } table.setColumnSizingInfo((old) => ({ ...old, startOffset, startSize, deltaOffset: 0, deltaPercentage: 0, columnSizingStart, isResizingColumn: column.id, })) return () => endResize(lastClientX) } type DataGridTablePinnedBoundary = 'top' | 'bottom' function getDataGridTableRowSections(table: Table, rowsPinnable?: boolean) { if (!rowsPinnable) { return { topRows: [] as Row[], centerRows: table.getRowModel().rows as Row[], bottomRows: [] as Row[], } } return { topRows: table.getTopRows() as Row[], centerRows: table.getCenterRows() as Row[], bottomRows: table.getBottomRows() as Row[], } } function getDataGridTableResolvedRows(table: Table, rowsPinnable?: boolean) { const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(table, rowsPinnable) const resolvedRows: Array<{ row: Row pinnedBoundary?: DataGridTablePinnedBoundary }> = [] topRows.forEach((row, index) => { resolvedRows.push({ row, pinnedBoundary: index === topRows.length - 1 && (centerRows.length > 0 || bottomRows.length > 0) ? 'top' : undefined, }) }) centerRows.forEach((row) => { resolvedRows.push({ row }) }) bottomRows.forEach((row, index) => { resolvedRows.push({ row, pinnedBoundary: index === 0 && (centerRows.length > 0 || topRows.length > 0) ? 'bottom' : undefined, }) }) return resolvedRows } function getDataGridTableOrderedVisibleColumns(table: Table) { return [ ...table.getLeftVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getRightVisibleLeafColumns(), ] as Column[] } function getDataGridTableOrderedVisibleCells(row: Row) { return [...row.getLeftVisibleCells(), ...row.getCenterVisibleCells(), ...row.getRightVisibleCells()] as Cell< TData, unknown >[] } function getDataGridTableMergedHeaderGroups(table: Table) { const leftHeaderGroups = table.getLeftHeaderGroups() const centerHeaderGroups = table.getCenterHeaderGroups() const rightHeaderGroups = table.getRightHeaderGroups() const headerGroupCount = Math.max(leftHeaderGroups.length, centerHeaderGroups.length, rightHeaderGroups.length) return Array.from({ length: headerGroupCount }, (_, index) => { const leftGroup = leftHeaderGroups[index] const centerGroup = centerHeaderGroups[index] const rightGroup = rightHeaderGroups[index] return { id: [leftGroup?.id, centerGroup?.id, rightGroup?.id].filter(Boolean).join(':') || `header-group-${index}`, headers: [ ...(leftGroup?.headers ?? []), ...(centerGroup?.headers ?? []), ...(rightGroup?.headers ?? []), ] as Header[], } }) } function hasDataGridTableRightPinnedColumns(table: Table) { return (table.getState().columnPinning.right?.length ?? 0) > 0 } function DataGridTableFillCol() { const { props } = useDataGrid() if (!props.tableLayout?.columnsResizable) return null return } function DataGridTableFillHeadCell() { const { props } = useDataGrid() if (!props.tableLayout?.columnsResizable) return null return ( ) } function DataGridTableFillBodyCell() { const { props } = useDataGrid() if (!props.tableLayout?.columnsResizable) return null return ( ) } function DataGridTableFillFootCell() { const { props } = useDataGrid() if (!props.tableLayout?.columnsResizable) return null return ( ) } function DataGridTableBase({ children }: { children: ReactNode }) { const { props, table } = useDataGrid() const leftVisibleColumns = table.getLeftVisibleLeafColumns() const centerVisibleColumns = table.getCenterVisibleLeafColumns() const rightVisibleColumns = table.getRightVisibleLeafColumns() const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table) /** * Compute column widths as CSS custom properties once upfront (memoized). * Cells reference these via calc(var(--col-X-size) * 1px) so the browser * handles width propagation without per-cell getSize() calls or React * re-renders of the body. */ const columnSizeVars = useMemo(() => { if (!props.tableLayout?.columnsResizable) return undefined const headers = table.getFlatHeaders() const colSizes: Record = {} for (let i = 0; i < headers.length; i++) { const header = headers[i]! colSizes[`--header-${header.id}-size`] = header.getSize() colSizes[`--col-${header.column.id}-size`] = header.column.getSize() } return colSizes // eslint-disable-next-line react-hooks/exhaustive-deps }, [ props.tableLayout?.columnsResizable, // Visibility/order/pinning change the flat header set, so a column shown // after mount must get its size variable even though sizing is untouched. // eslint-disable-next-line react-hooks/exhaustive-deps table.getState().columnSizing, // eslint-disable-next-line react-hooks/exhaustive-deps table.getState().columnVisibility, // eslint-disable-next-line react-hooks/exhaustive-deps table.getState().columnOrder, // eslint-disable-next-line react-hooks/exhaustive-deps table.getState().columnPinning, ]) return ( {[...leftVisibleColumns, ...centerVisibleColumns].map((column) => ( ))} {hasRightPinnedColumns ? : null} {rightVisibleColumns.map((column) => ( ))} {!hasRightPinnedColumns ? : null} {children}

) } function DataGridTableViewport({ children, className, viewportRef, style, }: { children: ReactNode className?: string viewportRef?: Ref style?: CSSProperties }) { const { props, table, autoSize } = useDataGrid() const isColumnsResizable = !!props.tableLayout?.columnsResizable const viewportNodeRef = useRef(null) const fillStateRef = useRef({ containerWidth: 0, appliedFill: -1 }) const stopContainerObserverRef = useRef<(() => void) | null>(null) // Free space is written as a CSS variable directly on the viewport node // instead of React state, so container resizes and column-size commits // reach the fill column without re-rendering the grid. const syncFillWidth = useCallback(() => { const node = viewportNodeRef.current if (!node) return const fillWidth = Math.max(0, fillStateRef.current.containerWidth - table.getTotalSize()) if (fillStateRef.current.appliedFill !== fillWidth) { fillStateRef.current.appliedFill = fillWidth node.style.setProperty('--data-grid-fill-size', `${fillWidth}px`) } autoSize?.apply(fillWidth) }, [autoSize, table]) const handleViewportRef = useCallback( (node: HTMLDivElement | null) => { stopContainerObserverRef.current?.() stopContainerObserverRef.current = null viewportNodeRef.current = node assignRef(viewportRef, node) if (!node) return if (!isColumnsResizable) { fillStateRef.current.appliedFill = -1 node.style.removeProperty('--data-grid-fill-size') return } const scrollViewport = getDataGridScrollAreaViewport(node) ?? node.parentElement const measurementTarget = scrollViewport ?? node const measure = () => { fillStateRef.current.containerWidth = measurementTarget.clientWidth syncFillWidth() } // First measure runs inside the mount commit, before paint, so the fill // column and any meta.autoSize growth land in the first painted frame. measure() if (typeof ResizeObserver !== 'undefined') { const observer = new ResizeObserver(measure) observer.observe(measurementTarget) stopContainerObserverRef.current = () => observer.disconnect() } }, [isColumnsResizable, syncFillWidth, viewportRef], ) // Column sizing commits and visibility changes alter the table's total size // without moving the container, so the fill var must re-sync after renders // the ResizeObserver never sees. No-ops when the value is unchanged. useLayoutEffect(() => { if (!isColumnsResizable) return syncFillWidth() }) return (

{children}

) } function DataGridTableHead({ children }: { children: ReactNode }) { const { props } = useDataGrid() return ( {children} ) } function DataGridTableHeadRow({ children, rowId }: { children: ReactNode; rowId: string }) { const { props } = useDataGrid() return ( th]:border-b', props.tableLayout?.cellBorder && '*:last:border-e-0', props.tableLayout?.stripped && 'bg-transparent', props.tableLayout?.headerBackground === false && 'bg-transparent', props.tableClassNames?.headerRow, )} > {children} ) } function DataGridTableHeadRowCell({ children, header, dndRef, dndStyle, }: { children: ReactNode header: Header dndRef?: React.Ref dndStyle?: CSSProperties }) { const { props } = useDataGrid() const { column } = header const isPinned = column.getIsPinned() const isFirstLeftPinned = isPinned === 'left' && column.getIsFirstColumn('left') const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left') const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right') const isLastRightPinned = isPinned === 'right' && column.getIsLastColumn('right') const isLastVisibleColumn = column.getIndex() === header.getContext().table.getVisibleLeafColumns().length - 1 const headerCellSpacing = headerCellSpacingVariants({ size: props.tableLayout?.dense ? 'dense' : 'default', }) const sortDirection = column.getIsSorted() return ( 1 ? header.colSpan : undefined} aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined} style={{ ...(props.tableLayout?.width === 'fixed' && !props.tableLayout?.columnsResizable && { width: header.getSize(), }), ...(props.tableLayout?.columnsPinnable && column.getCanPin() && getPinningStyles(column)), ...(props.tableLayout?.columnsResizable && { width: `calc(var(--header-${header.id}-size) * 1px)`, }), ...(dndStyle ? dndStyle : null), }} data-pinned={isPinned || undefined} data-outer-pinned-col={isFirstLeftPinned ? 'left' : isLastRightPinned ? 'right' : undefined} data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined} className={cn( 'text-foreground relative h-10 text-left align-middle font-medium rtl:text-right [&:has([role=checkbox])]:pe-0', headerCellSpacing, props.tableLayout?.headerBackground && 'bg-muted', props.tableLayout?.cellBorder && 'border-e', props.tableLayout?.columnsResizable && column.getCanResize() && (isPinned ? 'overflow-hidden' : 'overflow-visible'), props.tableLayout?.columnsResizable && column.getCanResize() && isLastVisibleColumn && 'pe-8', props.tableLayout?.columnsPinnable && column.getCanPin() && cn( 'data-pinned:bg-muted data-outer-pinned-col:bg-clip-padding data-pinned:isolate', '[&[data-pinned=left][data-last-col=left]]:shadow-[inset_-1px_0_0_0_var(--border)] [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:shadow-[inset_1px_0_0_0_var(--border)]', '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0', ), header.column.columnDef.meta?.headerClassName, // Edge detection spans the full visible leaf order; the header's own // group only covers one pinning bucket. column.getIndex() === 0 || isLastVisibleColumn ? props.tableClassNames?.edgeCell : '', )} > {children} ) } function DataGridTableHeadRowCellResize({ header }: { header: Header }) { const { props, table } = useDataGrid() const { column } = header const isPinned = column.getIsPinned() const isLastVisibleColumn = column.getIndex() === header.getContext().table.getVisibleLeafColumns().length - 1 const isResizeModeOnEnd = (props.tableLayout?.columnsResizeMode ?? table.options.columnResizeMode) === 'onEnd' const stopResizeSessionRef = useRef<(() => void) | undefined>(undefined) // End a live drag if the handle unmounts mid-resize so document listeners // and the app-wide col-resize cursor don't outlive the grid. useEffect(() => { return () => { stopResizeSessionRef.current?.() stopResizeSessionRef.current = undefined } }, []) const handleMouseDown = (event: ReactMouseEvent) => { // Only the primary button starts a resize; guard before preventDefault so // right-click still opens the context menu. if (event.button !== 0) return event.preventDefault() event.stopPropagation() if (isResizeModeOnEnd) { stopResizeSessionRef.current?.() stopResizeSessionRef.current = startDataGridColumnResizeOnEnd(event, header, table) return } header.getResizeHandler()(event) } const handleTouchStart = (event: ReactTouchEvent) => { event.preventDefault() event.stopPropagation() if (isResizeModeOnEnd) { stopResizeSessionRef.current?.() stopResizeSessionRef.current = startDataGridColumnResizeOnEnd(event, header, table) return } header.getResizeHandler()(event) } return (

column.resetSize(), onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, className: cn( 'absolute top-0 h-full cursor-col-resize user-select-none touch-none z-10 flex', isLastVisibleColumn ? 'end-0 w-5 justify-end before:hidden' : isPinned ? 'end-0 w-5 justify-end before:hidden' : '-end-2 w-5 justify-center before:absolute before:inset-y-0 before:w-px before:-translate-x-px before:bg-border', column.getIsResizing() && (isResizeModeOnEnd ? 'opacity-100' : isLastVisibleColumn ? 'before:absolute before:end-0 before:block before:inset-y-0 before:w-0.5 before:bg-primary opacity-100' : 'before:block before:bg-primary before:w-0.5 opacity-100'), ), }} /> ) } function DataGridTableResizeIndicator({ viewportNodeRef }: { viewportNodeRef: RefObject }) { const { props, table } = useDataGrid() const indicatorRef = useRef(null) const indicatorHeadRef = useRef(null) // Header height is stable for the duration of a drag; caching it per // session avoids a forced layout (querySelector + getBoundingClientRect) // on every mousemove. const headerHeightCacheRef = useRef<{ key: string | false value: number }>({ key: false, value: 0 }) const columnSizingInfo = table.getState().columnSizingInfo const resizingColumnId = columnSizingInfo.isResizingColumn const resizeMode = props.tableLayout?.columnsResizeMode ?? table.options.columnResizeMode const isActive = !!(props.tableLayout?.columnsResizable && resizeMode === 'onEnd' && resizingColumnId) // Positioning happens imperatively after each drag-frame render: layout // reads (viewport rect, thead height) and ref access belong outside render, // and writing styles directly avoids holding the viewport node in React // state, which would cost every grid a second render pass at mount. useLayoutEffect(() => { const indicator = indicatorRef.current const indicatorHead = indicatorHeadRef.current const viewportElement = viewportNodeRef.current if (!isActive || !indicator || !indicatorHead || !resizingColumnId) return const resizingHeader = table .getFlatHeaders() .find((header) => header.column.id === resizingColumnId || header.id === resizingColumnId) if (!resizingHeader) return // deltaOffset is a logical delta (already direction-adjusted); translate // by the physical pointer movement so the indicator follows the cursor // in RTL instead of mirroring it. const directionMultiplier = table.options.columnResizeDirection === 'rtl' ? -1 : 1 const deltaOffset = (columnSizingInfo.deltaOffset ?? 0) * directionMultiplier if (headerHeightCacheRef.current.key !== resizingColumnId) { headerHeightCacheRef.current = { key: resizingColumnId, value: viewportElement?.querySelector('[data-slot="data-grid-table"] thead')?.getBoundingClientRect().height ?? 0, } } const headerHeight = headerHeightCacheRef.current.value const indicatorLeft = typeof columnSizingInfo.startOffset === 'number' && viewportElement ? columnSizingInfo.startOffset - viewportElement.getBoundingClientRect().left : resizingHeader.getStart() + resizingHeader.getSize() indicator.style.left = `${indicatorLeft}px` indicator.style.transform = `translateX(${deltaOffset}px)` indicatorHead.style.height = `${Math.max(headerHeight, 6)}px` }) if (!isActive) return null return (

) } function DataGridTableRowSpacer() { return } function DataGridTableBody({ children }: { children: ReactNode }) { const { props } = useDataGrid() return ( {children} ) } function DataGridTableFoot({ children }: { children: ReactNode }) { const { props } = useDataGrid() return ( {children} ) } function DataGridTableFootRow({ children }: { children: ReactNode }) { const { props } = useDataGrid() const footRowBottomBorderClasses = '[&:not(:last-child)>td]:border-b' return ( {children} ) } function DataGridTableFootRowCell({ children, colSpan, className, }: { children?: ReactNode colSpan?: number className?: string }) { const { props } = useDataGrid() const spacing = footerCellSpacingVariants({ size: props.tableLayout?.dense ? 'dense' : 'default', }) return ( {children} ) } function DataGridTableBodyRowSkeleton({ children }: { children: ReactNode }) { const { table, props } = useDataGrid() return ( td]:border-b', props.tableLayout?.cellBorder && '*:last:border-e-0', props.tableLayout?.stripped && 'odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent', table.options.enableRowSelection && '*:first:relative', props.tableClassNames?.bodyRow, )} > {children} ) } function DataGridTableBodyRowSkeletonCell({ children, column }: { children: ReactNode; column: Column }) { const { props, table } = useDataGrid() const bodyCellSpacing = bodyCellSpacingVariants({ size: props.tableLayout?.dense ? 'dense' : 'default', }) return ( {children} ) } function DataGridTableBodyRow({ children, row, pinnedBoundary, rowRef, dndRef, dndStyle, dataIndex, }: { children: ReactNode row: Row pinnedBoundary?: DataGridTablePinnedBoundary rowRef?: React.Ref dndRef?: React.Ref dndStyle?: CSSProperties dataIndex?: number }) { const { props, table } = useDataGrid() const isRowPinned = row.getIsPinned() const bodyRowBottomBorderClasses = '[&:not(:last-child)>td]:border-b [tbody:has(+tfoot)_&:last-child>td]:border-b [*:has(>[data-slot=data-grid]+[data-slot=data-grid-pagination])_[data-slot=data-grid]_&:last-child>td]:border-b' return ( { assignRef(rowRef, node) assignRef(dndRef, node) }} style={{ ...(dndStyle ? dndStyle : null) }} data-state={table.options.enableRowSelection && row.getIsSelected() ? 'selected' : undefined} data-index={dataIndex} data-row-id={row.id} data-row-pinned={isRowPinned || undefined} data-row-pinned-boundary={pinnedBoundary} onClick={() => props.onRowClick && props.onRowClick(row.original)} className={cn( 'hover:bg-muted/40 data-[state=selected]:bg-muted/50', props.onRowClick && 'cursor-pointer', !props.tableLayout?.stripped && props.tableLayout?.rowBorder && bodyRowBottomBorderClasses, props.tableLayout?.cellBorder && `*:last:border-e-0 ${bodyRowBottomBorderClasses}`, // Virtualized rows stripe by absolute row index (CSS :nth-child // parity flips as spacer rows resize while scrolling). props.tableLayout?.stripped && (typeof dataIndex === 'number' ? cn('hover:bg-transparent', dataIndex % 2 === 0 && 'bg-muted/90 hover:bg-muted') : 'odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent'), table.options.enableRowSelection && '*:first:relative', props.tableLayout?.rowsPinnable && isRowPinned && 'bg-muted/30 hover:bg-muted/50', pinnedBoundary === 'top' && '[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)] dark:[&>td]:shadow-[0_2px_0_rgba(255,255,255,0.06)]', pinnedBoundary === 'bottom' && '[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)] dark:[&>td]:shadow-[0_2px_0_rgba(255,255,255,0.06)]', props.tableClassNames?.bodyRow, )} > {children} ) } function DataGridTableBodyRowExpandded({ row }: { row: Row }) { const { props, table } = useDataGrid() const bodyRowBottomBorderClasses = '[&:not(:last-child)>td]:border-b [tbody:has(+tfoot)_&:last-child>td]:border-b [*:has(>[data-slot=data-grid]+[data-slot=data-grid-pagination])_[data-slot=data-grid]_&:last-child>td]:border-b' return ( {table .getAllColumns() .find((column) => column.columnDef.meta?.expandedContent) ?.columnDef.meta?.expandedContent?.(row.original)} ) } function DataGridTableBodyRowCell({ children, cell, dndRef, dndStyle, }: { children: ReactNode cell: Cell dndRef?: React.Ref dndStyle?: CSSProperties }) { const { props } = useDataGrid() const { column, row } = cell const isPinned = column.getIsPinned() const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left') const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right') const bodyCellSpacing = bodyCellSpacingVariants({ size: props.tableLayout?.dense ? 'dense' : 'default', }) return ( {children} ) } function DataGridTableRenderedRow({ row, pinnedBoundary, rowRef, rowIndex, }: { row: Row pinnedBoundary?: DataGridTablePinnedBoundary rowRef?: React.Ref /** Virtualized list index, rendered as data-index for measureElement. */ rowIndex?: number }) { const { props, table } = useDataGrid() const leftVisibleCells = row.getLeftVisibleCells() const centerVisibleCells = row.getCenterVisibleCells() const rightVisibleCells = row.getRightVisibleCells() const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table) return ( {[...leftVisibleCells, ...centerVisibleCells].map((cell: Cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? : null} {rightVisibleCells.map((cell: Cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} {props.tableLayout?.columnsResizable && !hasRightPinnedColumns ? : null} {row.getIsExpanded() && } ) } function DataGridTableEmpty() { const { table, props } = useDataGrid() const visibleColumnCount = getDataGridTableOrderedVisibleColumns(table).length + (props.tableLayout?.columnsResizable ? 1 : 0) return ( {props.emptyMessage || 'No data available'} ) } function DataGridTableLoader() { const { props } = useDataGrid() return (

{props.loadingMessage || 'Loading...'}

) } function DataGridTableRowPin({ row }: { row: Row }) { const isPinned = row.getIsPinned() return ( ) } function DataGridTableRowSelect({ row }: { row: Row }) { return ( <> row.toggleSelected(!!value)} onClick={(event) => { // Selection must not bubble into the row's onRowClick handler. event.stopPropagation() }} aria-label="Select row" className="align-[inherit]" /> ) } function DataGridTableRowSelectAll() { const { table, recordCount, isLoading } = useDataGrid() const isAllSelected = table.getIsAllPageRowsSelected() const isSomeSelected = table.getIsSomePageRowsSelected() return ( table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" className="align-[inherit]" /> ) } function DataGridTableBodyRows({ table }: { table: Table }) { const { isLoading, props } = useDataGrid() const pagination = table.getState().pagination if (isLoading && props.loadingMode === 'skeleton' && pagination?.pageSize) { const leftVisibleColumns = table.getLeftVisibleLeafColumns() const centerVisibleColumns = table.getCenterVisibleLeafColumns() const rightVisibleColumns = table.getRightVisibleLeafColumns() const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table) return ( <> {Array.from({ length: pagination.pageSize }).map((_, rowIndex) => ( {[...leftVisibleColumns, ...centerVisibleColumns].map((column) => ( {column.columnDef.meta?.skeleton} ))} {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? : null} {rightVisibleColumns.map((column) => ( {column.columnDef.meta?.skeleton} ))} {props.tableLayout?.columnsResizable && !hasRightPinnedColumns ? : null} ))} ) } if (isLoading && props.loadingMode === 'spinner') { return (

{props.loadingMessage || 'Loading...'}

) } const resolvedRows = getDataGridTableResolvedRows(table, props.tableLayout?.rowsPinnable) if (!resolvedRows.length) return return ( <> {resolvedRows.map(({ row, pinnedBoundary }) => ( ))} ) } /** * Memoized body rows: skip re-renders during active column resize. * Column widths update via CSS variables on the element, * so the browser handles width changes without React re-renders. */ const MemoizedDataGridTableBodyRows = memo( DataGridTableBodyRows, (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn, ) as typeof DataGridTableBodyRows function DataGridTableHeader() { const { table, props } = useDataGrid() const mergedHeaderGroups = getDataGridTableMergedHeaderGroups(table) const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table) return ( {mergedHeaderGroups.map((headerGroup) => { return ( {headerGroup.headers .filter((header) => header.column.getIsPinned() !== 'right') .map((header) => { const { column } = header return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} {props.tableLayout?.columnsResizable && column.getCanResize() && ( )} ) })} {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? : null} {headerGroup.headers .filter((header) => header.column.getIsPinned() === 'right') .map((header) => { const { column } = header return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} {props.tableLayout?.columnsResizable && column.getCanResize() && ( )} ) })} {props.tableLayout?.columnsResizable && !hasRightPinnedColumns ? : null} ) })} ) } function DataGridTable({ footerContent, renderHeader = true, }: { footerContent?: ReactNode renderHeader?: boolean }) { const { table, props } = useDataGrid() const mergedHeaderGroups = getDataGridTableMergedHeaderGroups(table) const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table) return ( {renderHeader && ( {mergedHeaderGroups.map((headerGroup) => { return ( {headerGroup.headers .filter((header) => header.column.getIsPinned() !== 'right') .map((header) => { const { column } = header return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} {props.tableLayout?.columnsResizable && column.getCanResize() && ( )} ) })} {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? : null} {headerGroup.headers .filter((header) => header.column.getIsPinned() === 'right') .map((header) => { const { column } = header return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} {props.tableLayout?.columnsResizable && column.getCanResize() && ( )} ) })} {props.tableLayout?.columnsResizable && !hasRightPinnedColumns ? : null} ) })} )} {renderHeader && (props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && } {footerContent && {footerContent}} ) } export { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableRenderedRow, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableFillBodyCell, DataGridTableFillHeadCell, DataGridTableFoot, DataGridTableFootRow, DataGridTableFootRowCell, DataGridTableHeader, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowPin, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, DataGridTableViewport, getDataGridScrollAreaViewport, getDataGridTableMergedHeaderGroups, getPinningStyles, getDataGridTableResolvedRows, getDataGridTableRowSections, hasDataGridTableRightPinnedColumns, } export type { DataGridTablePinnedBoundary } 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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-data-grid.json","https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-checkbox.json","https://www.spaceui.one/r/primitives-spinner.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/registry/components/spaceui/data-grid/data-grid-table/index.tsx","content":"$4f","type":"registry:component","target":"components/spaceui/data-grid-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]