@crispy-seed/data-table 0.11.2 → 0.12.0

package/dist/index.cjs

@@ -1179,6 +1179,51 @@ function isStringArray(value) {
 /** Removes the view with this `id`. */ function removeDataTableView(views, id) {
     return views.filter((view)=>view.id !== id);
 }
+// -- row virtualization ---------------------------------------------------------------
+// `virtualized` renders only the rows inside (and a little around) the scroll
+// container's viewport, with two spacer rows standing in for the rest so the scroll
+// height -- and therefore the scrollbar -- still matches the full data set. Rows are a
+// fixed height, so which rows are visible is plain arithmetic on `scrollTop`; no
+// per-row measurement, no ResizeObserver per row.
+/** The recipe's own row height (`--seed-dimension-x9` = 36px, `row.height`). */ const DEFAULT_VIRTUAL_ROW_HEIGHT = 36;
+/** Rows rendered beyond each edge of the viewport, so a fast scroll never outruns the
+ *  render and flashes an empty gap. */ const DEFAULT_VIRTUAL_OVERSCAN = 8;
+/** Distance from the bottom (px) at which `onLoadMore` fires in virtualized mode --
+ *  the same 160px look-ahead the IntersectionObserver's rootMargin gives a non-
+ *  virtualized table. */ const LOAD_MORE_THRESHOLD = 160;
+/**
+ * Which slice `[start, end)` of `count` uniform-height rows to render for a viewport,
+ * plus the heights of the two spacers that keep the total scroll height at
+ * `count * rowHeight` (`topSpacer + rendered rows + bottomSpacer`). Pure -- the hook
+ * measures the DOM, this decides.
+ */ function computeVirtualWindow(input) {
+    const { count, rowHeight, viewportHeight, overscan } = input;
+    if (count <= 0 || rowHeight <= 0) return {
+        start: 0,
+        end: 0,
+        topSpacer: 0,
+        bottomSpacer: 0
+    };
+    const scrollTop = Math.max(0, input.scrollTop);
+    const firstVisible = Math.floor(scrollTop / rowHeight);
+    const lastVisibleExclusive = Math.ceil((scrollTop + Math.max(0, viewportHeight)) / rowHeight);
+    const start = Math.min(count, Math.max(0, firstVisible - overscan));
+    const end = Math.min(count, Math.max(start, lastVisibleExclusive + overscan));
+    return {
+        start,
+        end,
+        topSpacer: start * rowHeight,
+        bottomSpacer: (count - end) * rowHeight
+    };
+}
+/**
+ * Scroll-position replacement for the sentinel row's IntersectionObserver: a
+ * virtualized table can't rely on a sentinel (it would be windowed out along with the
+ * rows), so "close enough to the bottom" is read straight off the scroll container.
+ * The 1px slop matches `useDataTableScroll`'s own sub-pixel tolerance.
+ */ function isNearBottom(scrollTop, clientHeight, scrollHeight, threshold = LOAD_MORE_THRESHOLD) {
+    return scrollTop + clientHeight >= scrollHeight - threshold - 1;
+}
 const EMPTY_STRINGS = [];
 const EMPTY_RECORD = {};
 /**
@@ -1510,7 +1555,7 @@ const ROOT_MARGIN = "160px";
  * wires this to useDataTableScroll's own scroll container) so a BOUNDED table
  * triggers off its own internal scroll, not the browsing viewport.
  */ function useDataTableInfiniteScroll(props) {
-    const { onLoadMore, hasMore = true, loadingMore: loadingMoreProp, scrollRootRef } = props;
+    const { onLoadMore, hasMore = true, loadingMore: loadingMoreProp, scrollRootRef, virtualized = false } = props;
     const [internalLoadingMore, setInternalLoadingMore] = React.useState(false);
     const loadingMore = loadingMoreProp ?? internalLoadingMore;
     // Mirrors the latest props into a ref the observer callback reads -- the callback
@@ -1550,6 +1595,7 @@ const ROOT_MARGIN = "160px";
     const [sentinelNode, setSentinelNode] = React.useState(null);
     const sentinelRef = React.useCallback((node)=>setSentinelNode(node), []);
     React.useEffect(()=>{
+        if (virtualized) return;
         if (!sentinelNode || !onLoadMore || typeof IntersectionObserver === "undefined") return;
         // Effects run after every ref callback of the SAME commit (including
         // `scrollRootRef`'s own, set by useDataTableScroll's `scrollAreaRef`) regardless
@@ -1570,6 +1616,23 @@ const ROOT_MARGIN = "160px";
         sentinelNode,
         onLoadMore,
         scrollRootRef,
+        triggerLoadMore,
+        virtualized
+    ]);
+    // Virtualized mode's trigger: near the bottom of the scroll container (same gate --
+    // `hasMore`, not already loading -- via `triggerLoadMore`). Called on every scroll
+    // and again after the row count / loading state changes (a page that lands while
+    // the user is still at the bottom, or too short to overflow, must chain the next
+    // load rather than wait for a scroll that can never come).
+    const checkScrollPosition = React.useCallback(()=>{
+        const element = scrollRootRef?.current;
+        if (!virtualized || !element) return;
+        if (isNearBottom(element.scrollTop, element.clientHeight, element.scrollHeight)) {
+            triggerLoadMore();
+        }
+    }, [
+        virtualized,
+        scrollRootRef,
         triggerLoadMore
     ]);
     return {
@@ -1583,7 +1646,9 @@ const ROOT_MARGIN = "160px";
         /** Fires `onLoadMore` directly, subject to the same `hasMore`/`loadingMore` gate
      *  the observer itself uses -- exposed for a consumer that wants a manual retry
      *  affordance (e.g. after a failed load) rather than only the observer's own
-     *  scroll trigger. */ triggerLoadMore
+     *  scroll trigger. */ triggerLoadMore,
+        /** Virtualized mode's scroll-position check (no-op otherwise); `useDataTable`
+     *  calls it from the scroll container's `onScroll`. */ checkScrollPosition
     };
 }
 
@@ -1595,19 +1660,53 @@ const ROOT_MARGIN = "160px";
  * real ref to a real scrollable element, re-measured on every scroll (and whenever the
  * styled layer calls `remeasure`, e.g. after a column resize/reorder changes the
  * scrollable width without the element itself ever firing a `scroll` event).
- */ function useDataTableScroll() {
+ */ function useDataTableScroll(props = {}) {
+    const { virtualized = false, rowHeight = DEFAULT_VIRTUAL_ROW_HEIGHT } = props;
+    const overscan = props.overscan ?? DEFAULT_VIRTUAL_OVERSCAN;
     const elementRef = React.useRef(null);
     const [scrolledStart, setScrolledStart] = React.useState(false);
     const [scrolledEnd, setScrolledEnd] = React.useState(false);
+    const [viewport, setViewport] = React.useState({
+        scrollTop: 0,
+        viewportHeight: 0
+    });
     const remeasure = React.useCallback(()=>{
         const element = elementRef.current;
         if (!element) return;
+        if (virtualized) {
+            // Row 0 starts below the sticky header, so measure from there. Snapping to whole
+            // rows keeps re-renders to one per row scrolled (not one per scroll event); the
+            // extra `rowHeight` of viewport makes up for the rows the snap rounded away.
+            const headerHeight = element.querySelector("thead")?.offsetHeight ?? 0;
+            const scrollTop = Math.max(0, element.scrollTop - headerHeight);
+            const snapped = Math.floor(scrollTop / rowHeight) * rowHeight;
+            const viewportHeight = element.clientHeight + rowHeight;
+            setViewport((prev)=>prev.scrollTop === snapped && prev.viewportHeight === viewportHeight ? prev : {
+                    scrollTop: snapped,
+                    viewportHeight
+                });
+        }
         setScrolledStart(element.scrollLeft > 0);
         // A 1px slop: sub-pixel layout can leave `scrollLeft + clientWidth` a fraction
         // short of `scrollWidth` even when fully scrolled, which would otherwise leave
         // the trailing shadow stuck on forever.
         setScrolledEnd(element.scrollLeft + element.clientWidth < element.scrollWidth - 1);
-    }, []);
+    }, [
+        virtualized,
+        rowHeight
+    ]);
+    // The container can resize without scrolling (window resize, a bounded parent
+    // changing height) -- the viewport height feeds the window, so re-measure then too.
+    React.useEffect(()=>{
+        const element = elementRef.current;
+        if (!virtualized || !element || typeof ResizeObserver === "undefined") return;
+        const observer = new ResizeObserver(()=>remeasure());
+        observer.observe(element);
+        return ()=>observer.disconnect();
+    }, [
+        virtualized,
+        remeasure
+    ]);
     const scrollAreaRef = React.useCallback((node)=>{
         elementRef.current = node;
         if (node) remeasure();
@@ -1623,6 +1722,12 @@ const ROOT_MARGIN = "160px";
         scrolledEnd,
         onScroll,
         remeasure,
+        /** Row-virtualization state; `enabled: false` (the default) means render every row. */ virtual: {
+            enabled: virtualized,
+            rowHeight,
+            overscan,
+            ...viewport
+        },
         // The raw ref object itself (not just the callback ref above) -- useDataTable.ts
         // hands this to useDataTableInfiniteScroll as the IntersectionObserver `root` for
         // its sentinel row, so a scrolled/bounded table (DATATABLE-ATTIO-SPEC.md's
@@ -2021,7 +2126,7 @@ function useDataTable(props) {
     const toolbarFilter = useDataTableToolbarFilter(props);
     const columns = useDataTableColumns(props);
     const columnCalc = useDataTableColumnCalc(props);
-    const scroll = useDataTableScroll();
+    const scroll = useDataTableScroll(props);
     const edit = useDataTableEdit(props);
     // Feature C (#12) -- which single cell (if any) is showing its read-only "show
     // full content" overlay. Independent of `edit` above -- see
@@ -2035,6 +2140,28 @@ function useDataTable(props) {
         ...props,
         scrollRootRef: scroll.elementRef
     });
+    // Virtualized mode swaps the sentinel's IntersectionObserver for a scroll-position
+    // check: on every scroll (below), and again whenever the row count or loading state
+    // changes -- new rows can leave the user still at the bottom.
+    const { checkScrollPosition } = infiniteScroll;
+    const rowCount = props.rowIds?.length;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: rowCount/loadingMore/hasMore are the triggers, not values read in the effect
+    React.useEffect(()=>{
+        checkScrollPosition();
+    }, [
+        checkScrollPosition,
+        rowCount,
+        infiniteScroll.loadingMore,
+        infiniteScroll.hasMore
+    ]);
+    const { onScroll: measureScroll } = scroll;
+    const onScroll = React.useCallback(()=>{
+        measureScroll();
+        checkScrollPosition();
+    }, [
+        measureScroll,
+        checkScrollPosition
+    ]);
     // Unifies `sort` (the header's own single click-to-sort column, above) with
     // `toolbarSort.toolbarSorts` (the toolbar Sort popover's ordered list, above) into
     // ONE state instead of two -- before this, a header click only ever moved `sort`,
@@ -2146,6 +2273,7 @@ function useDataTable(props) {
         ...edit,
         ...peek,
         ...infiniteScroll,
+        onScroll,
         rootProps: domUtils.elementProps({
             role: "table"
         })
@@ -2188,7 +2316,7 @@ function useDataTableRowContext({ strict = true } = {}) {
     return context;
 }
 const DataTableRoot = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, actionsColumnKey, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, ...otherProps } = props;
+    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, actionsColumnKey, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, virtualized, rowHeight, overscan, ...otherProps } = props;
     const api = useDataTable({
         sort,
         defaultSort,
@@ -2230,7 +2358,10 @@ const DataTableRoot = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         onEdit,
         onLoadMore,
         hasMore,
-        loadingMore
+        loadingMore,
+        virtualized,
+        rowHeight,
+        overscan
     });
     return /*#__PURE__*/ jsxRuntime.jsx(DataTableProvider, {
         value: api,
@@ -11710,7 +11841,7 @@ function RowCount({ shown, total, countLabel }) {
 }
 
 function DataTableInner(props, ref) {
-    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, bulkActions, clearSelectionLabel, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, cellContextMenu = true, onViewEditHistory, cellContextMenuItems, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
+    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, bulkActions, clearSelectionLabel, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, cellContextMenu = true, onViewEditHistory, cellContextMenuItems, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, virtualized = false, rowHeight, overscan, ...restProps } = props;
     const classNames = dataTable({
         surface,
         interactive
@@ -11883,6 +12014,9 @@ function DataTableInner(props, ref) {
             onLoadMore: onLoadMore,
             hasMore: hasMore,
             loadingMore: loadingMore,
+            virtualized: virtualized,
+            rowHeight: rowHeight,
+            overscan: overscan,
             ...restProps,
             children: [
                 onColumnsChange && /*#__PURE__*/ jsxRuntime.jsx(ColumnsChangeEffect, {
@@ -11915,7 +12049,9 @@ function DataTableInner(props, ref) {
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(DataTableScrollBody, {
                     scrollProps: scrollProps,
+                    virtualized: virtualized,
                     children: /*#__PURE__*/ jsxRuntime.jsxs(DataTableTable, {
+                        "aria-rowcount": virtualized ? sortedData.length + 1 : undefined,
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx(DataTableColGroup, {
                                 columns: columns,
@@ -11971,39 +12107,47 @@ function DataTableInner(props, ref) {
                                     })
                                 }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                                     children: [
-                                        sortedData.map((row)=>/*#__PURE__*/ jsxRuntime.jsxs(DataTableRow, {
-                                                rowId: row.id,
-                                                "data-clickable": onRowClick ? "" : undefined,
-                                                onClick: onRowClick ? ()=>onRowClick(row) : undefined,
-                                                children: [
-                                                    selectable && /*#__PURE__*/ jsxRuntime.jsx(SelectionCell, {
-                                                        // The row itself carries `onClick={onRowClick}` above, and a
-                                                        // native click on this cell's checkbox bubbles up through it
-                                                        // (React attaches DataTableRow's handler on the <tr>, which
-                                                        // sits between the checkbox and anything a consumer could stop
-                                                        // it from at -- so this has to live here, not in the consumer).
-                                                        // Without this, checking a row's box also fires `onRowClick`.
-                                                        onClick: (event)=>event.stopPropagation(),
-                                                        stickyFirst: stickyFirst,
-                                                        children: /*#__PURE__*/ jsxRuntime.jsx(RowCheckbox, {
-                                                            label: getRowSelectionLabel(row),
-                                                            checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ jsxRuntime.jsx(ColumnBodyCells, {
-                                                        columns: columns,
-                                                        row: row,
-                                                        classNames: classNames,
-                                                        locale: locale,
-                                                        selectable: !!selectable,
-                                                        stickyFirst: stickyFirst,
-                                                        stickyLast: resolvedStickyLast,
-                                                        cellContextMenu: cellContextMenu,
-                                                        onViewEditHistory: onViewEditHistory,
-                                                        cellContextMenuItems: cellContextMenuItems
-                                                    })
-                                                ]
-                                            }, row.id)),
+                                        /*#__PURE__*/ jsxRuntime.jsx(WindowedRows, {
+                                            rows: sortedData,
+                                            virtualized: virtualized,
+                                            colSpan: totalCols,
+                                            children: (windowRows, firstIndex)=>/*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+                                                    children: windowRows.map((row, offset)=>/*#__PURE__*/ jsxRuntime.jsxs(DataTableRow, {
+                                                            rowId: row.id,
+                                                            "aria-rowindex": virtualized ? firstIndex + offset + 2 : undefined,
+                                                            "data-clickable": onRowClick ? "" : undefined,
+                                                            onClick: onRowClick ? ()=>onRowClick(row) : undefined,
+                                                            children: [
+                                                                selectable && /*#__PURE__*/ jsxRuntime.jsx(SelectionCell, {
+                                                                    // The row itself carries `onClick={onRowClick}` above, and a
+                                                                    // native click on this cell's checkbox bubbles up through it
+                                                                    // (React attaches DataTableRow's handler on the <tr>, which
+                                                                    // sits between the checkbox and anything a consumer could stop
+                                                                    // it from at -- so this has to live here, not in the consumer).
+                                                                    // Without this, checking a row's box also fires `onRowClick`.
+                                                                    onClick: (event)=>event.stopPropagation(),
+                                                                    stickyFirst: stickyFirst,
+                                                                    children: /*#__PURE__*/ jsxRuntime.jsx(RowCheckbox, {
+                                                                        label: getRowSelectionLabel(row),
+                                                                        checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ jsxRuntime.jsx(ColumnBodyCells, {
+                                                                    columns: columns,
+                                                                    row: row,
+                                                                    classNames: classNames,
+                                                                    locale: locale,
+                                                                    selectable: !!selectable,
+                                                                    stickyFirst: stickyFirst,
+                                                                    stickyLast: resolvedStickyLast,
+                                                                    cellContextMenu: cellContextMenu,
+                                                                    onViewEditHistory: onViewEditHistory,
+                                                                    cellContextMenuItems: cellContextMenuItems
+                                                                })
+                                                            ]
+                                                        }, row.id))
+                                                })
+                                        }),
                                         onLoadMore && /*#__PURE__*/ jsxRuntime.jsx(InfiniteScrollRow, {
                                             colSpan: totalCols,
                                             classNames: classNames,
@@ -12104,7 +12248,69 @@ const DataTableTable = withContext$1(DataTableTable$1, "table");
  *  out of sync between the three. A column with no explicit width gets a bare `<col>`
  *  (no `style`): `table-layout: fixed`'s own algorithm gives every such column an equal
  *  share of whatever space is left, matching the old flex grid's `flex: 1 1 0%`
- *  default with no extra code needed here. */ function DataTableColGroup({ columns, selectable, stickyFirst }) {
+ *  default with no extra code needed here. */ /**
+ * Row virtualization's render slice. Lives inside `DataTableRoot` (it reads the
+ * windowing state off context, which `DataTableInner` above can't) and hands its
+ * children the visible `[start, end)` slice of `rows` plus that slice's first index,
+ * flanked by a spacer row each side that stands in for everything cut off -- so the
+ * scroll height stays `rows.length * rowHeight` and the scrollbar matches the full
+ * data set. `virtualized` off: every row, no spacers, the pre-0.12 output exactly.
+ */ function WindowedRows({ rows, virtualized, colSpan, children }) {
+    const { virtual } = useDataTableContext();
+    const windowed = React__namespace.useMemo(()=>virtualized ? computeVirtualWindow({
+            count: rows.length,
+            rowHeight: virtual.rowHeight,
+            scrollTop: virtual.scrollTop,
+            viewportHeight: virtual.viewportHeight,
+            overscan: virtual.overscan
+        }) : null, [
+        virtualized,
+        rows.length,
+        virtual.rowHeight,
+        virtual.scrollTop,
+        virtual.viewportHeight,
+        virtual.overscan
+    ]);
+    if (!windowed) return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: children(rows, 0)
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            windowed.topSpacer > 0 && /*#__PURE__*/ jsxRuntime.jsx(VirtualSpacerRow, {
+                height: windowed.topSpacer,
+                colSpan: colSpan
+            }),
+            children(rows.slice(windowed.start, windowed.end), windowed.start),
+            windowed.bottomSpacer > 0 && /*#__PURE__*/ jsxRuntime.jsx(VirtualSpacerRow, {
+                height: windowed.bottomSpacer,
+                colSpan: colSpan
+            })
+        ]
+    });
+}
+/** A plain `<tr><td colSpan>` of a given height -- deliberately NOT a `DataTableRow`/
+ *  `DataTableCell` (no hover tint, no cell chrome, no border, no 36px min height).
+ *  `colSpan` covers every column, so the `<colgroup>` still drives widths and sticky
+ *  columns are unaffected. */ function VirtualSpacerRow({ height, colSpan }) {
+    return /*#__PURE__*/ jsxRuntime.jsx("tr", {
+        "data-virtual-spacer": "",
+        style: {
+            height
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx("td", {
+            "aria-hidden": "true",
+            colSpan: colSpan,
+            style: {
+                height,
+                padding: 0,
+                border: 0,
+                display: "table-cell",
+                lineHeight: 0
+            }
+        })
+    });
+}
+function DataTableColGroup({ columns, selectable, stickyFirst }) {
     // MUST use the same pinned-first ordering every OTHER row (header/body/footer)
     // renders in (`useEffectiveColumns`'s own doc comment) -- a `<colgroup>`'s `<col>`s
     // are matched positionally to each row's cells, so if a pinned column visually moves
@@ -12179,7 +12385,7 @@ const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // to clip), so it never introduces a second vertical scrollbar next to whatever
 // ambient container the whole DataTable already sits in.
 const DataTableScrollBodyBase = withContext$1(Primitive.div, "scrollArea");
-function DataTableScrollBody({ children, scrollProps }) {
+function DataTableScrollBody({ children, virtualized, scrollProps }) {
     const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
     const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
     return /*#__PURE__*/ jsxRuntime.jsx(DataTableScrollBodyBase, {
@@ -12187,7 +12393,13 @@ function DataTableScrollBody({ children, scrollProps }) {
         ref: scrollAreaRef,
         onScroll: onScroll,
         className: scrollClassName,
-        style: scrollStyle,
+        // Virtualized: the browser's scroll anchoring would try to hold the visible rows
+        // steady as the spacer heights change under it, fighting the scroll position
+        // this windowing itself derives from -- turn it off.
+        style: virtualized ? {
+            ...scrollStyle,
+            overflowAnchor: "none"
+        } : scrollStyle,
         "data-scrolled-start": domUtils.dataAttr(scrolledStart),
         "data-scrolled-end": domUtils.dataAttr(scrolledEnd),
         children: children

package/dist/index.d.ts

@@ -534,6 +534,20 @@ interface DataTableProps<TRow extends {
      * 됩니다 -- 새 prop 없이 기존 `style` 전달만으로 두 모드 다 지원됩니다.
      */
     scrollProps?: Omit<react.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
+    /**
+     * 행 가상화(windowing): 스크롤 컨테이너 뷰포트 근처의 행만 렌더링하고 나머지는 위/아래
+     * spacer 행으로 대체해 전체 스크롤 높이를 유지합니다. 수천 행 이상에서 사용하세요.
+     * 기본값(`false`)이면 지금까지처럼 모든 행을 렌더링합니다. 켜면 모든 행이 `rowHeight`로
+     * 동일한 높이여야 하고, 스크롤이 생기도록 높이 제한(`style={{ maxHeight }}` 등)이
+     * 필요합니다. 무한 스크롤(`onLoadMore`)은 sentinel 대신 스크롤 위치로 트리거됩니다.
+     * @default false
+     */
+    virtualized?: boolean;
+    /** `virtualized`일 때 한 행의 높이(px)입니다. 레시피의 행 높이(36px)와 일치해야 합니다.
+     *  @default 36 */
+    rowHeight?: number;
+    /** `virtualized`일 때 뷰포트 위/아래로 추가 렌더링할 행 수입니다. @default 8 */
+    overscan?: number;
 }
 /**
  * @see https://seed-design.io/react/components/data-table

package/dist/index.js

@@ -1160,6 +1160,51 @@ function isStringArray(value) {
 /** Removes the view with this `id`. */ function removeDataTableView(views, id) {
     return views.filter((view)=>view.id !== id);
 }
+// -- row virtualization ---------------------------------------------------------------
+// `virtualized` renders only the rows inside (and a little around) the scroll
+// container's viewport, with two spacer rows standing in for the rest so the scroll
+// height -- and therefore the scrollbar -- still matches the full data set. Rows are a
+// fixed height, so which rows are visible is plain arithmetic on `scrollTop`; no
+// per-row measurement, no ResizeObserver per row.
+/** The recipe's own row height (`--seed-dimension-x9` = 36px, `row.height`). */ const DEFAULT_VIRTUAL_ROW_HEIGHT = 36;
+/** Rows rendered beyond each edge of the viewport, so a fast scroll never outruns the
+ *  render and flashes an empty gap. */ const DEFAULT_VIRTUAL_OVERSCAN = 8;
+/** Distance from the bottom (px) at which `onLoadMore` fires in virtualized mode --
+ *  the same 160px look-ahead the IntersectionObserver's rootMargin gives a non-
+ *  virtualized table. */ const LOAD_MORE_THRESHOLD = 160;
+/**
+ * Which slice `[start, end)` of `count` uniform-height rows to render for a viewport,
+ * plus the heights of the two spacers that keep the total scroll height at
+ * `count * rowHeight` (`topSpacer + rendered rows + bottomSpacer`). Pure -- the hook
+ * measures the DOM, this decides.
+ */ function computeVirtualWindow(input) {
+    const { count, rowHeight, viewportHeight, overscan } = input;
+    if (count <= 0 || rowHeight <= 0) return {
+        start: 0,
+        end: 0,
+        topSpacer: 0,
+        bottomSpacer: 0
+    };
+    const scrollTop = Math.max(0, input.scrollTop);
+    const firstVisible = Math.floor(scrollTop / rowHeight);
+    const lastVisibleExclusive = Math.ceil((scrollTop + Math.max(0, viewportHeight)) / rowHeight);
+    const start = Math.min(count, Math.max(0, firstVisible - overscan));
+    const end = Math.min(count, Math.max(start, lastVisibleExclusive + overscan));
+    return {
+        start,
+        end,
+        topSpacer: start * rowHeight,
+        bottomSpacer: (count - end) * rowHeight
+    };
+}
+/**
+ * Scroll-position replacement for the sentinel row's IntersectionObserver: a
+ * virtualized table can't rely on a sentinel (it would be windowed out along with the
+ * rows), so "close enough to the bottom" is read straight off the scroll container.
+ * The 1px slop matches `useDataTableScroll`'s own sub-pixel tolerance.
+ */ function isNearBottom(scrollTop, clientHeight, scrollHeight, threshold = LOAD_MORE_THRESHOLD) {
+    return scrollTop + clientHeight >= scrollHeight - threshold - 1;
+}
 const EMPTY_STRINGS = [];
 const EMPTY_RECORD = {};
 /**
@@ -1491,7 +1536,7 @@ const ROOT_MARGIN = "160px";
  * wires this to useDataTableScroll's own scroll container) so a BOUNDED table
  * triggers off its own internal scroll, not the browsing viewport.
  */ function useDataTableInfiniteScroll(props) {
-    const { onLoadMore, hasMore = true, loadingMore: loadingMoreProp, scrollRootRef } = props;
+    const { onLoadMore, hasMore = true, loadingMore: loadingMoreProp, scrollRootRef, virtualized = false } = props;
     const [internalLoadingMore, setInternalLoadingMore] = useState(false);
     const loadingMore = loadingMoreProp ?? internalLoadingMore;
     // Mirrors the latest props into a ref the observer callback reads -- the callback
@@ -1531,6 +1576,7 @@ const ROOT_MARGIN = "160px";
     const [sentinelNode, setSentinelNode] = useState(null);
     const sentinelRef = useCallback((node)=>setSentinelNode(node), []);
     useEffect(()=>{
+        if (virtualized) return;
         if (!sentinelNode || !onLoadMore || typeof IntersectionObserver === "undefined") return;
         // Effects run after every ref callback of the SAME commit (including
         // `scrollRootRef`'s own, set by useDataTableScroll's `scrollAreaRef`) regardless
@@ -1551,6 +1597,23 @@ const ROOT_MARGIN = "160px";
         sentinelNode,
         onLoadMore,
         scrollRootRef,
+        triggerLoadMore,
+        virtualized
+    ]);
+    // Virtualized mode's trigger: near the bottom of the scroll container (same gate --
+    // `hasMore`, not already loading -- via `triggerLoadMore`). Called on every scroll
+    // and again after the row count / loading state changes (a page that lands while
+    // the user is still at the bottom, or too short to overflow, must chain the next
+    // load rather than wait for a scroll that can never come).
+    const checkScrollPosition = useCallback(()=>{
+        const element = scrollRootRef?.current;
+        if (!virtualized || !element) return;
+        if (isNearBottom(element.scrollTop, element.clientHeight, element.scrollHeight)) {
+            triggerLoadMore();
+        }
+    }, [
+        virtualized,
+        scrollRootRef,
         triggerLoadMore
     ]);
     return {
@@ -1564,7 +1627,9 @@ const ROOT_MARGIN = "160px";
         /** Fires `onLoadMore` directly, subject to the same `hasMore`/`loadingMore` gate
      *  the observer itself uses -- exposed for a consumer that wants a manual retry
      *  affordance (e.g. after a failed load) rather than only the observer's own
-     *  scroll trigger. */ triggerLoadMore
+     *  scroll trigger. */ triggerLoadMore,
+        /** Virtualized mode's scroll-position check (no-op otherwise); `useDataTable`
+     *  calls it from the scroll container's `onScroll`. */ checkScrollPosition
     };
 }
 
@@ -1576,19 +1641,53 @@ const ROOT_MARGIN = "160px";
  * real ref to a real scrollable element, re-measured on every scroll (and whenever the
  * styled layer calls `remeasure`, e.g. after a column resize/reorder changes the
  * scrollable width without the element itself ever firing a `scroll` event).
- */ function useDataTableScroll() {
+ */ function useDataTableScroll(props = {}) {
+    const { virtualized = false, rowHeight = DEFAULT_VIRTUAL_ROW_HEIGHT } = props;
+    const overscan = props.overscan ?? DEFAULT_VIRTUAL_OVERSCAN;
     const elementRef = useRef(null);
     const [scrolledStart, setScrolledStart] = useState(false);
     const [scrolledEnd, setScrolledEnd] = useState(false);
+    const [viewport, setViewport] = useState({
+        scrollTop: 0,
+        viewportHeight: 0
+    });
     const remeasure = useCallback(()=>{
         const element = elementRef.current;
         if (!element) return;
+        if (virtualized) {
+            // Row 0 starts below the sticky header, so measure from there. Snapping to whole
+            // rows keeps re-renders to one per row scrolled (not one per scroll event); the
+            // extra `rowHeight` of viewport makes up for the rows the snap rounded away.
+            const headerHeight = element.querySelector("thead")?.offsetHeight ?? 0;
+            const scrollTop = Math.max(0, element.scrollTop - headerHeight);
+            const snapped = Math.floor(scrollTop / rowHeight) * rowHeight;
+            const viewportHeight = element.clientHeight + rowHeight;
+            setViewport((prev)=>prev.scrollTop === snapped && prev.viewportHeight === viewportHeight ? prev : {
+                    scrollTop: snapped,
+                    viewportHeight
+                });
+        }
         setScrolledStart(element.scrollLeft > 0);
         // A 1px slop: sub-pixel layout can leave `scrollLeft + clientWidth` a fraction
         // short of `scrollWidth` even when fully scrolled, which would otherwise leave
         // the trailing shadow stuck on forever.
         setScrolledEnd(element.scrollLeft + element.clientWidth < element.scrollWidth - 1);
-    }, []);
+    }, [
+        virtualized,
+        rowHeight
+    ]);
+    // The container can resize without scrolling (window resize, a bounded parent
+    // changing height) -- the viewport height feeds the window, so re-measure then too.
+    useEffect(()=>{
+        const element = elementRef.current;
+        if (!virtualized || !element || typeof ResizeObserver === "undefined") return;
+        const observer = new ResizeObserver(()=>remeasure());
+        observer.observe(element);
+        return ()=>observer.disconnect();
+    }, [
+        virtualized,
+        remeasure
+    ]);
     const scrollAreaRef = useCallback((node)=>{
         elementRef.current = node;
         if (node) remeasure();
@@ -1604,6 +1703,12 @@ const ROOT_MARGIN = "160px";
         scrolledEnd,
         onScroll,
         remeasure,
+        /** Row-virtualization state; `enabled: false` (the default) means render every row. */ virtual: {
+            enabled: virtualized,
+            rowHeight,
+            overscan,
+            ...viewport
+        },
         // The raw ref object itself (not just the callback ref above) -- useDataTable.ts
         // hands this to useDataTableInfiniteScroll as the IntersectionObserver `root` for
         // its sentinel row, so a scrolled/bounded table (DATATABLE-ATTIO-SPEC.md's
@@ -2002,7 +2107,7 @@ function useDataTable(props) {
     const toolbarFilter = useDataTableToolbarFilter(props);
     const columns = useDataTableColumns(props);
     const columnCalc = useDataTableColumnCalc(props);
-    const scroll = useDataTableScroll();
+    const scroll = useDataTableScroll(props);
     const edit = useDataTableEdit(props);
     // Feature C (#12) -- which single cell (if any) is showing its read-only "show
     // full content" overlay. Independent of `edit` above -- see
@@ -2016,6 +2121,28 @@ function useDataTable(props) {
         ...props,
         scrollRootRef: scroll.elementRef
     });
+    // Virtualized mode swaps the sentinel's IntersectionObserver for a scroll-position
+    // check: on every scroll (below), and again whenever the row count or loading state
+    // changes -- new rows can leave the user still at the bottom.
+    const { checkScrollPosition } = infiniteScroll;
+    const rowCount = props.rowIds?.length;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: rowCount/loadingMore/hasMore are the triggers, not values read in the effect
+    useEffect(()=>{
+        checkScrollPosition();
+    }, [
+        checkScrollPosition,
+        rowCount,
+        infiniteScroll.loadingMore,
+        infiniteScroll.hasMore
+    ]);
+    const { onScroll: measureScroll } = scroll;
+    const onScroll = useCallback(()=>{
+        measureScroll();
+        checkScrollPosition();
+    }, [
+        measureScroll,
+        checkScrollPosition
+    ]);
     // Unifies `sort` (the header's own single click-to-sort column, above) with
     // `toolbarSort.toolbarSorts` (the toolbar Sort popover's ordered list, above) into
     // ONE state instead of two -- before this, a header click only ever moved `sort`,
@@ -2127,6 +2254,7 @@ function useDataTable(props) {
         ...edit,
         ...peek,
         ...infiniteScroll,
+        onScroll,
         rootProps: elementProps({
             role: "table"
         })
@@ -2169,7 +2297,7 @@ function useDataTableRowContext({ strict = true } = {}) {
     return context;
 }
 const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, actionsColumnKey, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, ...otherProps } = props;
+    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, actionsColumnKey, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, virtualized, rowHeight, overscan, ...otherProps } = props;
     const api = useDataTable({
         sort,
         defaultSort,
@@ -2211,7 +2339,10 @@ const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
         onEdit,
         onLoadMore,
         hasMore,
-        loadingMore
+        loadingMore,
+        virtualized,
+        rowHeight,
+        overscan
     });
     return /*#__PURE__*/ jsx(DataTableProvider, {
         value: api,
@@ -11691,7 +11822,7 @@ function RowCount({ shown, total, countLabel }) {
 }
 
 function DataTableInner(props, ref) {
-    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, bulkActions, clearSelectionLabel, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, cellContextMenu = true, onViewEditHistory, cellContextMenuItems, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
+    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, bulkActions, clearSelectionLabel, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, cellContextMenu = true, onViewEditHistory, cellContextMenuItems, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, virtualized = false, rowHeight, overscan, ...restProps } = props;
     const classNames = dataTable({
         surface,
         interactive
@@ -11864,6 +11995,9 @@ function DataTableInner(props, ref) {
             onLoadMore: onLoadMore,
             hasMore: hasMore,
             loadingMore: loadingMore,
+            virtualized: virtualized,
+            rowHeight: rowHeight,
+            overscan: overscan,
             ...restProps,
             children: [
                 onColumnsChange && /*#__PURE__*/ jsx(ColumnsChangeEffect, {
@@ -11896,7 +12030,9 @@ function DataTableInner(props, ref) {
                 }),
                 /*#__PURE__*/ jsx(DataTableScrollBody, {
                     scrollProps: scrollProps,
+                    virtualized: virtualized,
                     children: /*#__PURE__*/ jsxs(DataTableTable, {
+                        "aria-rowcount": virtualized ? sortedData.length + 1 : undefined,
                         children: [
                             /*#__PURE__*/ jsx(DataTableColGroup, {
                                 columns: columns,
@@ -11952,39 +12088,47 @@ function DataTableInner(props, ref) {
                                     })
                                 }) : /*#__PURE__*/ jsxs(Fragment, {
                                     children: [
-                                        sortedData.map((row)=>/*#__PURE__*/ jsxs(DataTableRow, {
-                                                rowId: row.id,
-                                                "data-clickable": onRowClick ? "" : undefined,
-                                                onClick: onRowClick ? ()=>onRowClick(row) : undefined,
-                                                children: [
-                                                    selectable && /*#__PURE__*/ jsx(SelectionCell, {
-                                                        // The row itself carries `onClick={onRowClick}` above, and a
-                                                        // native click on this cell's checkbox bubbles up through it
-                                                        // (React attaches DataTableRow's handler on the <tr>, which
-                                                        // sits between the checkbox and anything a consumer could stop
-                                                        // it from at -- so this has to live here, not in the consumer).
-                                                        // Without this, checking a row's box also fires `onRowClick`.
-                                                        onClick: (event)=>event.stopPropagation(),
-                                                        stickyFirst: stickyFirst,
-                                                        children: /*#__PURE__*/ jsx(RowCheckbox, {
-                                                            label: getRowSelectionLabel(row),
-                                                            checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ jsx(ColumnBodyCells, {
-                                                        columns: columns,
-                                                        row: row,
-                                                        classNames: classNames,
-                                                        locale: locale,
-                                                        selectable: !!selectable,
-                                                        stickyFirst: stickyFirst,
-                                                        stickyLast: resolvedStickyLast,
-                                                        cellContextMenu: cellContextMenu,
-                                                        onViewEditHistory: onViewEditHistory,
-                                                        cellContextMenuItems: cellContextMenuItems
-                                                    })
-                                                ]
-                                            }, row.id)),
+                                        /*#__PURE__*/ jsx(WindowedRows, {
+                                            rows: sortedData,
+                                            virtualized: virtualized,
+                                            colSpan: totalCols,
+                                            children: (windowRows, firstIndex)=>/*#__PURE__*/ jsx(Fragment, {
+                                                    children: windowRows.map((row, offset)=>/*#__PURE__*/ jsxs(DataTableRow, {
+                                                            rowId: row.id,
+                                                            "aria-rowindex": virtualized ? firstIndex + offset + 2 : undefined,
+                                                            "data-clickable": onRowClick ? "" : undefined,
+                                                            onClick: onRowClick ? ()=>onRowClick(row) : undefined,
+                                                            children: [
+                                                                selectable && /*#__PURE__*/ jsx(SelectionCell, {
+                                                                    // The row itself carries `onClick={onRowClick}` above, and a
+                                                                    // native click on this cell's checkbox bubbles up through it
+                                                                    // (React attaches DataTableRow's handler on the <tr>, which
+                                                                    // sits between the checkbox and anything a consumer could stop
+                                                                    // it from at -- so this has to live here, not in the consumer).
+                                                                    // Without this, checking a row's box also fires `onRowClick`.
+                                                                    onClick: (event)=>event.stopPropagation(),
+                                                                    stickyFirst: stickyFirst,
+                                                                    children: /*#__PURE__*/ jsx(RowCheckbox, {
+                                                                        label: getRowSelectionLabel(row),
+                                                                        checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ jsx(ColumnBodyCells, {
+                                                                    columns: columns,
+                                                                    row: row,
+                                                                    classNames: classNames,
+                                                                    locale: locale,
+                                                                    selectable: !!selectable,
+                                                                    stickyFirst: stickyFirst,
+                                                                    stickyLast: resolvedStickyLast,
+                                                                    cellContextMenu: cellContextMenu,
+                                                                    onViewEditHistory: onViewEditHistory,
+                                                                    cellContextMenuItems: cellContextMenuItems
+                                                                })
+                                                            ]
+                                                        }, row.id))
+                                                })
+                                        }),
                                         onLoadMore && /*#__PURE__*/ jsx(InfiniteScrollRow, {
                                             colSpan: totalCols,
                                             classNames: classNames,
@@ -12085,7 +12229,69 @@ const DataTableTable = withContext$1(DataTableTable$1, "table");
  *  out of sync between the three. A column with no explicit width gets a bare `<col>`
  *  (no `style`): `table-layout: fixed`'s own algorithm gives every such column an equal
  *  share of whatever space is left, matching the old flex grid's `flex: 1 1 0%`
- *  default with no extra code needed here. */ function DataTableColGroup({ columns, selectable, stickyFirst }) {
+ *  default with no extra code needed here. */ /**
+ * Row virtualization's render slice. Lives inside `DataTableRoot` (it reads the
+ * windowing state off context, which `DataTableInner` above can't) and hands its
+ * children the visible `[start, end)` slice of `rows` plus that slice's first index,
+ * flanked by a spacer row each side that stands in for everything cut off -- so the
+ * scroll height stays `rows.length * rowHeight` and the scrollbar matches the full
+ * data set. `virtualized` off: every row, no spacers, the pre-0.12 output exactly.
+ */ function WindowedRows({ rows, virtualized, colSpan, children }) {
+    const { virtual } = useDataTableContext();
+    const windowed = React.useMemo(()=>virtualized ? computeVirtualWindow({
+            count: rows.length,
+            rowHeight: virtual.rowHeight,
+            scrollTop: virtual.scrollTop,
+            viewportHeight: virtual.viewportHeight,
+            overscan: virtual.overscan
+        }) : null, [
+        virtualized,
+        rows.length,
+        virtual.rowHeight,
+        virtual.scrollTop,
+        virtual.viewportHeight,
+        virtual.overscan
+    ]);
+    if (!windowed) return /*#__PURE__*/ jsx(Fragment, {
+        children: children(rows, 0)
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            windowed.topSpacer > 0 && /*#__PURE__*/ jsx(VirtualSpacerRow, {
+                height: windowed.topSpacer,
+                colSpan: colSpan
+            }),
+            children(rows.slice(windowed.start, windowed.end), windowed.start),
+            windowed.bottomSpacer > 0 && /*#__PURE__*/ jsx(VirtualSpacerRow, {
+                height: windowed.bottomSpacer,
+                colSpan: colSpan
+            })
+        ]
+    });
+}
+/** A plain `<tr><td colSpan>` of a given height -- deliberately NOT a `DataTableRow`/
+ *  `DataTableCell` (no hover tint, no cell chrome, no border, no 36px min height).
+ *  `colSpan` covers every column, so the `<colgroup>` still drives widths and sticky
+ *  columns are unaffected. */ function VirtualSpacerRow({ height, colSpan }) {
+    return /*#__PURE__*/ jsx("tr", {
+        "data-virtual-spacer": "",
+        style: {
+            height
+        },
+        children: /*#__PURE__*/ jsx("td", {
+            "aria-hidden": "true",
+            colSpan: colSpan,
+            style: {
+                height,
+                padding: 0,
+                border: 0,
+                display: "table-cell",
+                lineHeight: 0
+            }
+        })
+    });
+}
+function DataTableColGroup({ columns, selectable, stickyFirst }) {
     // MUST use the same pinned-first ordering every OTHER row (header/body/footer)
     // renders in (`useEffectiveColumns`'s own doc comment) -- a `<colgroup>`'s `<col>`s
     // are matched positionally to each row's cells, so if a pinned column visually moves
@@ -12160,7 +12366,7 @@ const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // to clip), so it never introduces a second vertical scrollbar next to whatever
 // ambient container the whole DataTable already sits in.
 const DataTableScrollBodyBase = withContext$1(Primitive.div, "scrollArea");
-function DataTableScrollBody({ children, scrollProps }) {
+function DataTableScrollBody({ children, virtualized, scrollProps }) {
     const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
     const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
     return /*#__PURE__*/ jsx(DataTableScrollBodyBase, {
@@ -12168,7 +12374,13 @@ function DataTableScrollBody({ children, scrollProps }) {
         ref: scrollAreaRef,
         onScroll: onScroll,
         className: scrollClassName,
-        style: scrollStyle,
+        // Virtualized: the browser's scroll anchoring would try to hold the visible rows
+        // steady as the spacer heights change under it, fighting the scroll position
+        // this windowing itself derives from -- turn it off.
+        style: virtualized ? {
+            ...scrollStyle,
+            overflowAnchor: "none"
+        } : scrollStyle,
         "data-scrolled-start": dataAttr(scrolledStart),
         "data-scrolled-end": dataAttr(scrolledEnd),
         children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
   "repository": {
     "type": "git",