@gridkitjs/react 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,10 +1,10 @@
 // src/DataGrid/DataGrid.tsx
 import {
-  useEffect as useEffect2,
+  useEffect as useEffect4,
   useImperativeHandle,
   useMemo as useMemo4,
-  useRef as useRef4,
-  useState as useState5
+  useRef as useRef6,
+  useState as useState6
 } from "react";
 import {
   applyColumnOrder,
@@ -21,6 +21,12 @@ import {
   withGroupAggregates
 } from "@gridkitjs/core";
 
+// src/DataGrid/components/GridColgroup.tsx
+import { jsx } from "react/jsx-runtime";
+function GridColgroup({ columns }) {
+  return /* @__PURE__ */ jsx("colgroup", { children: columns.map((entry) => /* @__PURE__ */ jsx("col", { style: { width: entry.width } }, entry.id)) });
+}
+
 // src/DataGrid/components/GridHeader.tsx
 import { createPortal } from "react-dom";
 import { buildKeyShortcuts, intentOf, KEYBOARD_STEP } from "@gridkitjs/core";
@@ -51,8 +57,8 @@ var FALLBACK_PAGE = 10;
 function tabIndexFor(columnIndex, focusedColumnIndex) {
   return columnIndex === focusedColumnIndex ? 0 : -1;
 }
-function cellAt(table, focus) {
-  const row = focus.rowIndex === HEADER_ROW ? table.tHead?.rows[0] ?? null : table.tBodies[0]?.rows[focus.rowIndex] ?? null;
+function cellAt(headerTable, bodyTable, focus) {
+  const row = focus.rowIndex === HEADER_ROW ? headerTable?.tHead?.rows[0] ?? null : bodyTable?.tBodies[0]?.rows[focus.rowIndex] ?? null;
   if (row === null) {
     return null;
   }
@@ -60,10 +66,12 @@ function cellAt(table, focus) {
   return row.cells[columnIndex] ?? null;
 }
 function useGridNavigation({
-  tableRef,
+  headerTableRef,
+  bodyTableRef,
   rowCount,
   columnCount,
-  isSkippableRow
+  isSkippableRow,
+  virtualRange
 }) {
   const [stored, setStored] = useState({
     rowIndex: HEADER_ROW,
@@ -78,15 +86,29 @@ function useGridNavigation({
     if (!pending.current) {
       return;
     }
-    pending.current = false;
-    const table = tableRef.current;
-    if (table === null) {
+    const cell = cellAt(headerTableRef.current, bodyTableRef.current, {
+      rowIndex: focus.rowIndex,
+      columnIndex: focus.columnIndex
+    });
+    if (cell !== null) {
+      pending.current = false;
+      cell.focus();
+      return;
+    }
+    if (virtualRange != null && focus.rowIndex !== HEADER_ROW && (focus.rowIndex < virtualRange.startIndex || focus.rowIndex > virtualRange.endIndex)) {
+      virtualRange.scrollToIndex(focus.rowIndex);
       return;
     }
-    cellAt(table, { rowIndex: focus.rowIndex, columnIndex: focus.columnIndex })?.focus();
-  }, [tableRef, focus.rowIndex, focus.columnIndex]);
+    pending.current = false;
+  }, [
+    headerTableRef,
+    bodyTableRef,
+    focus.rowIndex,
+    focus.columnIndex,
+    virtualRange
+  ]);
   function pageSize() {
-    const table = tableRef.current;
+    const table = bodyTableRef.current;
     const firstRow = table?.tBodies[0]?.rows[0];
     const viewport = table?.parentElement;
     if (firstRow === void 0 || viewport === null || viewport === void 0 || firstRow.offsetHeight === 0) {
@@ -356,9 +378,9 @@ function useGridSelection({
 }
 
 // src/DataGrid/components/GridHeader.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Icon({ children }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -374,18 +396,18 @@ function Icon({ children }) {
 }
 function ChevronsUpDownIcon() {
   return /* @__PURE__ */ jsxs(Icon, { children: [
-    /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
-    /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+    /* @__PURE__ */ jsx2("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m7 9 5-5 5 5" })
   ] });
 }
 function ChevronUpIcon() {
-  return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
+  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" }) });
 }
 function GroupIcon() {
   return /* @__PURE__ */ jsxs(Icon, { children: [
-    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx("rect", { x: "8.5", y: "14", width: "7", height: "7", rx: "1" })
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "8.5", y: "14", width: "7", height: "7", rx: "1" })
   ] });
 }
 function GridHeader({
@@ -403,7 +425,7 @@ function GridHeader({
   const beforeId = drag.dropTarget?.kind === "column-order" ? drag.dropTarget.beforeId : void 0;
   const draggedEntry = columns.find((entry) => entry.id === drag.draggedColumnId) ?? null;
   return /* @__PURE__ */ jsxs("thead", { children: [
-    /* @__PURE__ */ jsx("tr", { className: "grid-header", role: "row", "aria-rowindex": 1, children: columns.map((entry, index) => {
+    /* @__PURE__ */ jsx2("tr", { className: "grid-header", role: "row", "aria-rowindex": 1, children: columns.map((entry, index) => {
       const { column } = entry;
       const resizing = resize.activeColumnId === entry.id;
       const dragging = drag.draggedColumnId === entry.id;
@@ -523,7 +545,7 @@ function GridHeader({
              * A pointer affordance only, same as the other two — the
              * keyboard equivalent is Alt+ArrowDown on the header itself.
              */
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "span",
               {
                 className: classNames(
@@ -539,7 +561,7 @@ function GridHeader({
                   event.stopPropagation();
                   grouping.toggleGroupBy(entry.id);
                 },
-                children: /* @__PURE__ */ jsx(GroupIcon, {})
+                children: /* @__PURE__ */ jsx2(GroupIcon, {})
               }
             ),
             entry.label,
@@ -565,8 +587,8 @@ function GridHeader({
                   sort.toggle(entry, { shiftKey: event.shiftKey });
                 },
                 children: [
-                  sortDirection === null ? /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx(ChevronUpIcon, {}),
-                  sortPriority !== null && sortPriority > 1 && /* @__PURE__ */ jsx("span", { className: "header-sort-priority", children: sortPriority })
+                  sortDirection === null ? /* @__PURE__ */ jsx2(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx2(ChevronUpIcon, {}),
+                  sortPriority !== null && sortPriority > 1 && /* @__PURE__ */ jsx2("span", { className: "header-sort-priority", children: sortPriority })
                 ]
               }
             ),
@@ -576,7 +598,7 @@ function GridHeader({
              * put N tab stops inside a widget that is meant to have one.
              * The keyboard resizes from the header itself, under Alt.
              */
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "span",
               {
                 className: "header-resize-handle",
@@ -596,7 +618,7 @@ function GridHeader({
       );
     }) }),
     draggedEntry !== null && drag.ghostTransform !== null && createPortal(
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "div",
         {
           className: "gridkit-data-grid header-cell drag-ghost",
@@ -647,7 +669,7 @@ function formatAggregateValue(value) {
 }
 
 // src/DataGrid/components/GridGroupRow.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function formatGroupValue(value) {
   if (value === null || value === void 0) {
     return "(blank)";
@@ -676,18 +698,21 @@ function GridGroupRowComponent({
   value,
   expanded,
   count,
+  rowIndex,
   datasetIndex,
   posinset,
   setsize,
   focused,
   aggregates,
   results,
-  columns
+  columns,
+  ref
 }) {
   const byId = new Map(columns.map((entry) => [entry.id, entry]));
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "tr",
     {
+      ref,
       role: "row",
       "aria-rowindex": datasetIndex + 2,
       "aria-level": level + 1,
@@ -695,11 +720,12 @@ function GridGroupRowComponent({
       "aria-setsize": setsize,
       "aria-posinset": posinset,
       "data-gridkit-group": groupId,
+      "data-gridkit-row-index": rowIndex,
       className: classNames(
         "grid-group-row",
         `is-group-level-${String(level)}`
       ),
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         "td",
         {
           role: "gridcell",
@@ -713,7 +739,7 @@ function GridGroupRowComponent({
               className: "grid-group-cell-content",
               style: { paddingInlineStart: `${String(level * 1.25 + 0.5)}rem` },
               children: [
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "span",
                   {
                     className: classNames(
@@ -733,7 +759,7 @@ function GridGroupRowComponent({
                   count,
                   ")"
                 ] }),
-                aggregates.length > 0 && /* @__PURE__ */ jsx2("span", { className: "group-aggregates", children: aggregates.map((spec) => {
+                aggregates.length > 0 && /* @__PURE__ */ jsx3("span", { className: "group-aggregates", children: aggregates.map((spec) => {
                   const key = spec.id ?? spec.columnId;
                   const aggregateValue = results.get(key);
                   const column = byId.get(spec.columnId);
@@ -763,21 +789,25 @@ var GridGroupRow_default = GridGroupRow;
 
 // src/DataGrid/components/GridGroupSummaryRow.tsx
 import { memo as memo2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function GridGroupSummaryRowComponent({
   groupId,
   level,
+  rowIndex,
   datasetIndex,
   results,
   aggregates,
-  columns
+  columns,
+  ref
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "tr",
     {
+      ref,
       role: "row",
       "aria-rowindex": datasetIndex + 2,
       "data-gridkit-group-summary": groupId,
+      "data-gridkit-row-index": rowIndex,
       className: classNames(
         "grid-group-summary-row",
         `is-group-level-${String(level)}`
@@ -795,7 +825,7 @@ function GridGroupSummaryRowComponent({
             className: "grid-group-summary-cell",
             style: { textAlign: specs[0]?.alignment ?? entry.alignment },
             children: [
-              entry.id === columns[0]?.id && /* @__PURE__ */ jsx3(
+              entry.id === columns[0]?.id && /* @__PURE__ */ jsx4(
                 "span",
                 {
                   className: "grid-group-summary-indent",
@@ -825,7 +855,7 @@ var GridGroupSummaryRow_default = GridGroupSummaryRow;
 // src/DataGrid/components/GridRow.tsx
 import { accessDotted } from "@gridkitjs/core";
 import { memo as memo3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function GridRowComponent({
   columns,
   rowId,
@@ -838,19 +868,22 @@ function GridRowComponent({
   selectedColumnId,
   focusedColumnIndex,
   rowsSelectable,
-  cellsSelectable
+  cellsSelectable,
+  ref
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "tr",
     {
+      ref,
       role: "row",
       "aria-rowindex": datasetIndex + 2,
+      "data-gridkit-row-index": rowIndex,
       ...ariaAttr(rowsSelectable, "aria-selected", selected),
       className: classNames("grid-row", selected ? "is-selected" : ""),
       children: columns.map(({ id, column, alignment }, columnIndex) => {
         const value = accessDotted(row, column.field);
         const cellSelected = id === selectedColumnId;
-        return /* @__PURE__ */ jsx4(
+        return /* @__PURE__ */ jsx5(
           "td",
           {
             role: "gridcell",
@@ -886,7 +919,11 @@ var GridRow = memo3(GridRowComponent);
 var GridRow_default = GridRow;
 
 // src/DataGrid/components/GridBody.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function rowIndexOf(row) {
+  const attribute = row.getAttribute("data-gridkit-row-index");
+  return attribute === null ? null : Number(attribute);
+}
 function cellFrom(target) {
   if (!(target instanceof Element)) {
     return null;
@@ -894,11 +931,12 @@ function cellFrom(target) {
   const cell = target.closest("td[data-gridkit-column]");
   const row = cell?.parentElement;
   const columnId = cell?.getAttribute("data-gridkit-column");
-  if (!(cell instanceof HTMLTableCellElement) || !(row instanceof HTMLTableRowElement) || columnId === null || columnId === void 0) {
+  const rowIndex = row === null || row === void 0 ? null : rowIndexOf(row);
+  if (!(cell instanceof HTMLTableCellElement) || !(row instanceof HTMLTableRowElement) || columnId === null || columnId === void 0 || rowIndex === null) {
     return null;
   }
   return {
-    rowIndex: row.sectionRowIndex,
+    rowIndex,
     columnIndex: cell.cellIndex,
     columnId
   };
@@ -909,10 +947,11 @@ function groupRowFrom(target) {
   }
   const row = target.closest("tr[data-gridkit-group]");
   const groupId = row?.getAttribute("data-gridkit-group");
-  if (!(row instanceof HTMLTableRowElement) || groupId === null || groupId === void 0) {
+  const rowIndex = row === null ? null : rowIndexOf(row);
+  if (!(row instanceof HTMLTableRowElement) || groupId === null || groupId === void 0 || rowIndex === null) {
     return null;
   }
-  return { rowIndex: row.sectionRowIndex, groupId };
+  return { rowIndex, groupId };
 }
 function groupAriaMeta(rows) {
   const totals = /* @__PURE__ */ new Map();
@@ -943,10 +982,14 @@ function GridBody({
   selection,
   grouping,
   aggregates,
-  groupAggregateDisplay
+  groupAggregateDisplay,
+  virtualRange,
+  infiniteScroll,
+  sentinelRef
 }) {
   const { selectedCell, rowMode, cellMode } = selection;
   const ariaMeta = useMemo3(() => groupAriaMeta(rows), [rows]);
+  const visibleRows = virtualRange === null ? rows : rows.slice(virtualRange.startIndex, virtualRange.endIndex + 1);
   function targetOf(target) {
     const position = cellFrom(target);
     const entry = position === null ? void 0 : rows[position.rowIndex];
@@ -964,7 +1007,7 @@ function GridBody({
       selection.selectCell({ rowId, columnId }, intent);
     }
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs4(
     "tbody",
     {
       className: "grid-body",
@@ -1016,80 +1059,131 @@ function GridBody({
         }
         nav.onKeyDown(event);
       },
-      children: rows.map((entry) => {
-        if (!("kind" in entry)) {
-          return /* @__PURE__ */ jsx5(
-            GridRow_default,
-            {
-              columns,
-              rowId: entry.rowId,
-              row: entry.row,
-              rowIndex: entry.rowIndex,
-              datasetIndex: entry.datasetIndex,
-              activeColumnId,
-              selectedColumnIds: selection.selectedColumnIds,
-              selected: selection.selectedRowIds.has(entry.rowId),
-              selectedColumnId: selectedCell?.rowId === entry.rowId ? selectedCell.columnId : null,
-              focusedColumnIndex: nav.focus.rowIndex === entry.rowIndex ? nav.focus.columnIndex : null,
-              rowsSelectable: rowMode !== false,
-              cellsSelectable: cellMode !== false
-            },
-            entry.rowId
-          );
-        }
-        if (entry.kind === "group-summary") {
-          return /* @__PURE__ */ jsx5(
-            GridGroupSummaryRow_default,
+      children: [
+        virtualRange !== null && virtualRange.offsetBefore > 0 && // `aria-hidden` and carrying neither `data-gridkit-column` nor
+        // `data-gridkit-group`/`data-gridkit-row-index`, so `cellFrom`/
+        // `groupRowFrom` never mistake it for a real row — it exists purely
+        // to give the browser's scrollbar the correct total height and thumb
+        // position, the same way `GridFooter`'s `<tfoot>` isn't a "row" to
+        // any of this grid's own row-counting logic.
+        /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx6(
+          "td",
+          {
+            style: {
+              height: virtualRange.offsetBefore,
+              padding: 0,
+              border: "none"
+            }
+          }
+        ) }),
+        visibleRows.map((entry) => {
+          if (!("kind" in entry)) {
+            return /* @__PURE__ */ jsx6(
+              GridRow_default,
+              {
+                ref: virtualRange?.measureRow(entry.rowIndex),
+                columns,
+                rowId: entry.rowId,
+                row: entry.row,
+                rowIndex: entry.rowIndex,
+                datasetIndex: entry.datasetIndex,
+                activeColumnId,
+                selectedColumnIds: selection.selectedColumnIds,
+                selected: selection.selectedRowIds.has(entry.rowId),
+                selectedColumnId: selectedCell?.rowId === entry.rowId ? selectedCell.columnId : null,
+                focusedColumnIndex: nav.focus.rowIndex === entry.rowIndex ? nav.focus.columnIndex : null,
+                rowsSelectable: rowMode !== false,
+                cellsSelectable: cellMode !== false
+              },
+              entry.rowId
+            );
+          }
+          if (entry.kind === "group-summary") {
+            return /* @__PURE__ */ jsx6(
+              GridGroupSummaryRow_default,
+              {
+                ref: virtualRange?.measureRow(entry.rowIndex),
+                groupId: entry.groupId,
+                level: entry.level,
+                rowIndex: entry.rowIndex,
+                datasetIndex: entry.datasetIndex,
+                results: entry.aggregates,
+                aggregates,
+                columns
+              },
+              `${entry.groupId}-summary`
+            );
+          }
+          return /* @__PURE__ */ jsx6(
+            GridGroupRow_default,
             {
+              ref: virtualRange?.measureRow(entry.rowIndex),
+              columnCount: columns.length,
               groupId: entry.groupId,
               level: entry.level,
+              columnLabel: columns.find((column) => column.id === entry.columnId)?.label ?? entry.columnId,
+              value: entry.value,
+              expanded: entry.expanded,
+              count: entry.count,
+              rowIndex: entry.rowIndex,
               datasetIndex: entry.datasetIndex,
+              posinset: ariaMeta.get(entry.groupId)?.posinset ?? 1,
+              setsize: ariaMeta.get(entry.groupId)?.setsize ?? 1,
+              aggregates: groupAggregateDisplay === "inline" ? aggregates : [],
               results: entry.aggregates,
-              aggregates,
-              columns
+              columns,
+              focused: nav.focus.rowIndex === entry.rowIndex
             },
-            `${entry.groupId}-summary`
+            entry.groupId
           );
-        }
-        return /* @__PURE__ */ jsx5(
-          GridGroupRow_default,
+        }),
+        virtualRange !== null && virtualRange.offsetAfter > 0 && /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx6(
+          "td",
           {
-            columnCount: columns.length,
-            groupId: entry.groupId,
-            level: entry.level,
-            columnLabel: columns.find((column) => column.id === entry.columnId)?.label ?? entry.columnId,
-            value: entry.value,
-            expanded: entry.expanded,
-            count: entry.count,
-            datasetIndex: entry.datasetIndex,
-            posinset: ariaMeta.get(entry.groupId)?.posinset ?? 1,
-            setsize: ariaMeta.get(entry.groupId)?.setsize ?? 1,
-            aggregates: groupAggregateDisplay === "inline" ? aggregates : [],
-            results: entry.aggregates,
-            columns,
-            focused: nav.focus.rowIndex === entry.rowIndex
-          },
-          entry.groupId
-        );
-      })
+            style: {
+              height: virtualRange.offsetAfter,
+              padding: 0,
+              border: "none"
+            }
+          }
+        ) }),
+        infiniteScroll?.hasMore && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          infiniteScroll.isLoadingMore === true && /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", className: "grid-loading-row", children: /* @__PURE__ */ jsx6("td", { colSpan: columns.length, className: "grid-loading-cell", children: infiniteScroll.loadingTemplate ? infiniteScroll.loadingTemplate() : "Loading more\u2026" }) }),
+          /* @__PURE__ */ jsx6(
+            "tr",
+            {
+              "aria-hidden": "true",
+              ref: sentinelRef,
+              className: "grid-sentinel-row",
+              children: /* @__PURE__ */ jsx6(
+                "td",
+                {
+                  colSpan: columns.length,
+                  style: { padding: 0, border: "none" }
+                }
+              )
+            }
+          )
+        ] })
+      ]
     }
   );
 }
 
 // src/DataGrid/components/GridFooter.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function GridFooter({
   columns,
   aggregates,
   results,
   rows
 }) {
-  return /* @__PURE__ */ jsx6("tfoot", { children: /* @__PURE__ */ jsx6("tr", { className: "grid-footer", role: "row", children: columns.map((entry) => {
+  return /* @__PURE__ */ jsx7("tfoot", { children: /* @__PURE__ */ jsx7("tr", { className: "grid-footer", role: "row", children: columns.map((entry) => {
     const specs = aggregates.filter(
       (candidate) => candidate.columnId === entry.id
     );
     const { column } = entry;
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       "td",
       {
         role: "gridcell",
@@ -1110,13 +1204,13 @@ function GridFooter({
 
 // src/DataGrid/components/GridPager.tsx
 import { paginationWindow } from "@gridkitjs/core";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function GridPager({ pager, config }) {
   const { pagination, pageCount, currentPage } = pager;
   const variant = config?.variant ?? "compact";
   const sizeOptions = config?.sizeOptions;
-  return /* @__PURE__ */ jsxs4("div", { className: "gridkit-grid-pager", role: "group", "aria-label": "Pagination", children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5("div", { className: "gridkit-grid-pager", role: "group", "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1132,7 +1226,7 @@ function GridPager({ pager, config }) {
       boundaryCount: config?.boundaryCount,
       siblingCount: config?.siblingCount
     }).map(
-      (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx7(
+      (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx8(
         "span",
         {
           className: "grid-pager-ellipsis",
@@ -1140,7 +1234,7 @@ function GridPager({ pager, config }) {
           children: "\u2026"
         },
         `ellipsis-${String(index)}`
-      ) : /* @__PURE__ */ jsx7(
+      ) : /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -1154,13 +1248,13 @@ function GridPager({ pager, config }) {
         },
         entry
       )
-    ) : /* @__PURE__ */ jsxs4("span", { className: "grid-pager-status", children: [
+    ) : /* @__PURE__ */ jsxs5("span", { className: "grid-pager-status", children: [
       "Page ",
       pageCount === 0 ? 0 : currentPage,
       " of ",
       pageCount
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1172,16 +1266,16 @@ function GridPager({ pager, config }) {
         children: "Next"
       }
     ),
-    sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs4("label", { className: "grid-pager-page-size", children: [
+    sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs5("label", { className: "grid-pager-page-size", children: [
       "Rows per page",
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "select",
         {
           value: pagination.pageSize,
           onChange: (event) => {
             pager.setPageSize(Number(event.target.value));
           },
-          children: sizeOptions.map((size) => /* @__PURE__ */ jsx7("option", { value: size, children: size }, size))
+          children: sizeOptions.map((size) => /* @__PURE__ */ jsx8("option", { value: size, children: size }, size))
         }
       )
     ] })
@@ -1350,7 +1444,7 @@ function useGroupByDrag({
 }
 
 // src/DataGrid/components/GroupByBar.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function GroupByBar({
   columns,
   grouping,
@@ -1384,7 +1478,7 @@ function GroupByBar({
     }
     grouping.moveGroupBy(columnId, beforeColumnId);
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: classNames(
@@ -1396,12 +1490,12 @@ function GroupByBar({
       role: "group",
       "aria-label": "Grouped by",
       children: [
-        showPlaceholder && /* @__PURE__ */ jsx8("span", { className: "group-by-bar-placeholder", children: "Drag a column here to group by it" }),
+        showPlaceholder && /* @__PURE__ */ jsx9("span", { className: "group-by-bar-placeholder", children: "Drag a column here to group by it" }),
         groupBy.map((entry, index) => {
           const dropBefore = activeDropTarget?.beforeColumnId === entry.columnId;
           const dropAfter = activeDropTarget?.beforeColumnId === null && index === groupBy.length - 1;
           const dragging = chipDrag.draggedColumnId === entry.columnId;
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6(
             "span",
             {
               className: classNames(
@@ -1428,8 +1522,8 @@ function GroupByBar({
                 }
               },
               children: [
-                /* @__PURE__ */ jsx8("span", { className: "group-by-chip-label", children: labelFor(entry.columnId) }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9("span", { className: "group-by-chip-label", children: labelFor(entry.columnId) }),
+                /* @__PURE__ */ jsx9(
                   "button",
                   {
                     type: "button",
@@ -1450,7 +1544,7 @@ function GroupByBar({
           );
         }),
         chipDrag.draggedColumnId !== null && chipDrag.ghostTransform !== null && createPortal2(
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "span",
             {
               className: "group-by-chip drag-ghost",
@@ -1684,6 +1778,74 @@ function useElementWidth(ref, enabled) {
   return width;
 }
 
+// src/DataGrid/useInfiniteScroll.ts
+import { useCallback, useEffect as useEffect2, useRef as useRef4 } from "react";
+function useInfiniteScroll({
+  rootRef,
+  sentinelRef,
+  config
+}) {
+  const hasMore = config?.hasMore ?? false;
+  const isLoadingMore = config?.isLoadingMore ?? false;
+  const rootMargin = config?.rootMargin ?? "200px";
+  const latestRef = useRef4({
+    hasMore,
+    isLoadingMore,
+    onLoadMore: config?.onLoadMore
+  });
+  useEffect2(() => {
+    latestRef.current = {
+      hasMore,
+      isLoadingMore,
+      onLoadMore: config?.onLoadMore
+    };
+  });
+  const firedRef = useRef4(false);
+  const intersectingRef = useRef4(false);
+  const maybeLoadMore = useCallback(() => {
+    const current = latestRef.current;
+    if (!intersectingRef.current || !current.hasMore || current.isLoadingMore || firedRef.current) {
+      return;
+    }
+    firedRef.current = true;
+    current.onLoadMore?.();
+  }, []);
+  const wasLoadingRef = useRef4(isLoadingMore);
+  useEffect2(() => {
+    if (wasLoadingRef.current && !isLoadingMore) {
+      firedRef.current = false;
+      maybeLoadMore();
+    }
+    wasLoadingRef.current = isLoadingMore;
+  }, [isLoadingMore, maybeLoadMore]);
+  useEffect2(() => {
+    if (!hasMore) {
+      return void 0;
+    }
+    const root = rootRef.current;
+    const sentinel = sentinelRef.current;
+    if (root === null || sentinel === null) {
+      return void 0;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[entries.length - 1];
+        if (entry === void 0) {
+          return;
+        }
+        intersectingRef.current = entry.isIntersecting;
+        maybeLoadMore();
+      },
+      { root, rootMargin }
+    );
+    observer.observe(sentinel);
+    return () => {
+      observer.disconnect();
+      intersectingRef.current = false;
+    };
+  }, [hasMore, rootMargin, rootRef, sentinelRef, maybeLoadMore]);
+}
+
 // src/DataGrid/usePagination.ts
 import {
   paginateRows
@@ -1784,8 +1946,183 @@ function useRowGrouping({
   };
 }
 
+// src/DataGrid/useRowVirtualizer.ts
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef5,
+  useState as useState5
+} from "react";
+import { visibleRange } from "@gridkitjs/core";
+var EMPTY_RANGE = {
+  startIndex: 0,
+  endIndex: -1,
+  offsetBefore: 0,
+  offsetAfter: 0
+};
+function useRowVirtualizer({
+  enabled,
+  rows,
+  bodyScrollRef,
+  estimatedRowHeight,
+  overscan
+}) {
+  const rowCount = rows.length;
+  const heightsRef = useRef5([]);
+  const scrollTopRef = useRef5(0);
+  const viewportHeightRef = useRef5(0);
+  const elementsRef = useRef5(/* @__PURE__ */ new Map());
+  const indexByElementRef = useRef5(/* @__PURE__ */ new Map());
+  const refCallbacksRef = useRef5(
+    /* @__PURE__ */ new Map()
+  );
+  const observerRef = useRef5(null);
+  const pendingScrollRef = useRef5(void 0);
+  const [range, setRange] = useState5(EMPTY_RANGE);
+  const recompute = useCallback2(() => {
+    setRange(
+      enabled ? visibleRange(
+        heightsRef.current,
+        estimatedRowHeight,
+        scrollTopRef.current,
+        viewportHeightRef.current,
+        overscan
+      ) : rowCount === 0 ? EMPTY_RANGE : {
+        startIndex: 0,
+        endIndex: rowCount - 1,
+        offsetBefore: 0,
+        offsetAfter: 0
+      }
+    );
+  }, [enabled, rowCount, estimatedRowHeight, overscan]);
+  useLayoutEffect2(() => {
+    heightsRef.current = new Array(rowCount).fill(
+      void 0
+    );
+    recompute();
+  }, [rows, rowCount, recompute]);
+  useLayoutEffect2(() => {
+    if (!enabled) {
+      return void 0;
+    }
+    const element = bodyScrollRef.current;
+    if (element === null) {
+      return void 0;
+    }
+    scrollTopRef.current = element.scrollTop;
+    viewportHeightRef.current = element.clientHeight;
+    recompute();
+    const handleScroll = () => {
+      scrollTopRef.current = element.scrollTop;
+      recompute();
+    };
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    const resizeObserver = new ResizeObserver(() => {
+      viewportHeightRef.current = element.clientHeight;
+      recompute();
+    });
+    resizeObserver.observe(element);
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, [enabled, bodyScrollRef, recompute]);
+  useEffect3(() => {
+    if (!enabled) {
+      return void 0;
+    }
+    const observer = new ResizeObserver((entries) => {
+      let changed = false;
+      for (const entry of entries) {
+        const index = indexByElementRef.current.get(entry.target);
+        if (index === void 0) continue;
+        const height = entry.target.getBoundingClientRect().height;
+        if (heightsRef.current[index] !== height) {
+          heightsRef.current[index] = height;
+          changed = true;
+        }
+      }
+      if (changed) {
+        recompute();
+      }
+    });
+    observerRef.current = observer;
+    for (const element of elementsRef.current.values()) {
+      observer.observe(element);
+    }
+    return () => {
+      observer.disconnect();
+      observerRef.current = null;
+    };
+  }, [enabled, recompute]);
+  function measureRow(index) {
+    let callback = refCallbacksRef.current.get(index);
+    if (callback === void 0) {
+      callback = (element) => {
+        const observer = observerRef.current;
+        const previous = elementsRef.current.get(index);
+        if (previous !== void 0) {
+          observer?.unobserve(previous);
+          indexByElementRef.current.delete(previous);
+          elementsRef.current.delete(index);
+        }
+        if (element === null) {
+          return;
+        }
+        elementsRef.current.set(index, element);
+        indexByElementRef.current.set(element, index);
+        observer?.observe(element);
+      };
+      refCallbacksRef.current.set(index, callback);
+    }
+    return callback;
+  }
+  useEffect3(() => {
+    const pending = pendingScrollRef.current;
+    if (pending === void 0) {
+      return;
+    }
+    const element = elementsRef.current.get(pending.index);
+    if (element === void 0) {
+      return;
+    }
+    element.scrollIntoView(pending.options);
+    pendingScrollRef.current = void 0;
+  }, [range]);
+  function estimateOffsetBefore(index) {
+    let total = 0;
+    for (let current = 0; current < index; current++) {
+      total += heightsRef.current[current] ?? estimatedRowHeight;
+    }
+    return total;
+  }
+  function scrollToIndex(index, options) {
+    const element = bodyScrollRef.current;
+    if (element === null || rowCount === 0) {
+      return;
+    }
+    const clamped = Math.max(0, Math.min(index, rowCount - 1));
+    const mounted = elementsRef.current.get(clamped);
+    if (mounted !== void 0) {
+      mounted.scrollIntoView(options);
+      return;
+    }
+    pendingScrollRef.current = { index: clamped, options };
+    element.scrollTop = estimateOffsetBefore(clamped);
+  }
+  return {
+    startIndex: range.startIndex,
+    endIndex: range.endIndex,
+    offsetBefore: range.offsetBefore,
+    offsetAfter: range.offsetAfter,
+    measureRow,
+    scrollToIndex
+  };
+}
+
 // src/DataGrid/DataGrid.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_PAGE_SIZE = 25;
 var NO_AGGREGATES = [];
 function DataGridComponent({
@@ -1822,8 +2159,13 @@ function DataGridComponent({
   defaultPagination,
   pager,
   onPaginationChange,
+  infiniteScroll,
   aggregates,
   groupAggregateDisplay = "inline",
+  height,
+  virtualized = false,
+  overscan = 4,
+  estimatedRowHeight = 40,
   label,
   labelledBy,
   ref,
@@ -1832,33 +2174,36 @@ function DataGridComponent({
   const hoverRows = hoverable?.rows ?? true;
   const hoverColumns = hoverable?.columns ?? true;
   const hoverCells = hoverable?.cells ?? true;
-  const viewportRef = useRef4(null);
-  const tableRef = useRef4(null);
+  const viewportRef = useRef6(null);
+  const headerTableRef = useRef6(null);
+  const bodyTableRef = useRef6(null);
+  const bodyScrollRef = useRef6(null);
+  const sentinelRef = useRef6(null);
   const viewportWidth = useElementWidth(viewportRef, resizeMode === "fit");
-  const subscribersRef = useRef4(/* @__PURE__ */ new Set());
-  const [sizing, setSizing] = useState5(
+  const subscribersRef = useRef6(/* @__PURE__ */ new Set());
+  const [sizing, setSizing] = useState6(
     defaultColumnSizing ?? {}
   );
-  const [order, setOrder] = useState5(
+  const [order, setOrder] = useState6(
     defaultColumnOrder ?? []
   );
-  const [sort, setSort] = useState5(defaultColumnSort ?? []);
-  const [groupBy, setGroupBy] = useState5(defaultGroupBy ?? []);
-  const [expansion, setExpansion] = useState5(
+  const [sort, setSort] = useState6(defaultColumnSort ?? []);
+  const [groupBy, setGroupBy] = useState6(defaultGroupBy ?? []);
+  const [expansion, setExpansion] = useState6(
     defaultGroupExpansion ?? []
   );
-  const [filter] = useState5(defaultFilter ?? []);
-  const [pagination, setPagination] = useState5(
+  const [filter] = useState6(defaultFilter ?? []);
+  const [pagination, setPagination] = useState6(
     defaultPagination ?? { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }
   );
-  const [announcement, setAnnouncement] = useState5("");
-  const [rowSelection, setRowSelection] = useState5(
+  const [announcement, setAnnouncement] = useState6("");
+  const [rowSelection, setRowSelection] = useState6(
     defaultRowSelection ?? []
   );
-  const [columnSelection, setColumnSelection] = useState5(
+  const [columnSelection, setColumnSelection] = useState6(
     defaultColumnSelection ?? []
   );
-  const [cellSelection, setCellSelection] = useState5(
+  const [cellSelection, setCellSelection] = useState6(
     defaultCellSelection ?? null
   );
   const rows = useMemo4(
@@ -1937,6 +2282,33 @@ function DataGridComponent({
     () => paginated ? paginateRows2(aggregatedRows, pagination) : { rows: aggregatedRows, pageCount: 1, pageIndex: 0 },
     [paginated, aggregatedRows, pagination]
   );
+  const virtualizer = useRowVirtualizer({
+    enabled: virtualized,
+    rows: paginatedRows.rows,
+    bodyScrollRef,
+    estimatedRowHeight,
+    overscan
+  });
+  useEffect4(() => {
+    if (virtualized && height === void 0) {
+      console.error(
+        "DataGridComponent: `virtualized` has no effect without `height` \u2014 a body with no bounded height has no viewport to window rows against."
+      );
+    }
+  }, [virtualized, height]);
+  const hasInfiniteScroll = infiniteScroll !== void 0;
+  useEffect4(() => {
+    if (paginated && hasInfiniteScroll) {
+      console.error(
+        "DataGridComponent: `paginated` and `infiniteScroll` are mutually exclusive \u2014 only `paginated` takes effect while both are set."
+      );
+    }
+  }, [paginated, hasInfiniteScroll]);
+  useInfiniteScroll({
+    rootRef: bodyScrollRef,
+    sentinelRef,
+    config: infiniteScroll
+  });
   const paginationSnapshot = useMemo4(
     () => ({
       pageIndex: paginatedRows.pageIndex,
@@ -1969,7 +2341,10 @@ function DataGridComponent({
     }
   }
   const resize = useColumnResize({
-    tableRef,
+    // `measureColumnContent` only ever matches `td[data-gridkit-column]`
+    // (never `th`), so the header table has nothing for it to find — the
+    // body table alone was already the effective scope before this split.
+    tableRef: bodyTableRef,
     sizing,
     setSizing,
     columnSizeDefaults,
@@ -2009,7 +2384,11 @@ function DataGridComponent({
     onGroupExpansionChange: handleGroupExpansionChange
   });
   const nav = useGridNavigation({
-    tableRef,
+    headerTableRef,
+    bodyTableRef,
+    // `null` when virtualization is off, in which case behavior is
+    // byte-for-byte unchanged from before this feature existed.
+    virtualRange: virtualized ? virtualizer : null,
     // Group headers are addressable rows too — the whole point of the flat
     // `DisplayRow[]` shape is that they share one position space with data
     // rows, so navigation counts them the same way. Page-relative
@@ -2095,7 +2474,7 @@ function DataGridComponent({
     rows: displayRows,
     onPaginationChange: handlePaginationChange
   });
-  const [previous, setPrevious] = useState5({ filter, sort, groupBy });
+  const [previous, setPrevious] = useState6({ filter, sort, groupBy });
   if (previous.filter !== filter || previous.sort !== sort || previous.groupBy !== groupBy) {
     setPrevious({ filter, sort, groupBy });
     if (pagination.pageIndex !== 0) {
@@ -2117,7 +2496,7 @@ function DataGridComponent({
     columnName
   });
   const multiselectable = selection.rowMode === "multiple" || selection.columnMode === "multiple";
-  useEffect2(() => {
+  useEffect4(() => {
     for (const listener of subscribersRef.current) {
       listener();
     }
@@ -2143,7 +2522,7 @@ function DataGridComponent({
       return viewportRef.current;
     },
     get table() {
-      return tableRef.current;
+      return bodyTableRef.current;
     },
     getRows: () => shownRows,
     // `aggregatedRows`, not the plain `displayRows` it's derived from: the
@@ -2180,10 +2559,16 @@ function DataGridComponent({
         (entry) => !("kind" in entry) && entry.rowId === rowId
       );
       if (index === -1) return;
-      tableRef.current?.tBodies[0]?.rows[index]?.scrollIntoView(options);
+      if (virtualized) {
+        virtualizer.scrollToIndex(index, options);
+        return;
+      }
+      bodyTableRef.current?.tBodies[0]?.rows[index]?.scrollIntoView(options);
     },
     scrollToColumn: (columnId, options) => {
-      const cells = tableRef.current?.querySelectorAll("[data-gridkit-column]");
+      const cells = viewportRef.current?.querySelectorAll(
+        "[data-gridkit-column]"
+      );
       const cell = cells ? Array.from(cells).find(
         (entry) => entry.getAttribute("data-gridkit-column") === columnId
       ) : void 0;
@@ -2196,8 +2581,21 @@ function DataGridComponent({
       };
     }
   }));
-  return /* @__PURE__ */ jsxs6("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
-    showGroupByBar && /* @__PURE__ */ jsx9(
+  const gridTableClassName = classNames(
+    "gridkit-data-grid",
+    borders ? `borders-${borders}` : "",
+    // Hover is on by default and selection off, so one set of classes
+    // turns styling off and the other turns it on. The polarity differs
+    // because the defaults do.
+    hoverRows ? "" : "no-hover-rows",
+    hoverColumns ? "" : "no-hover-columns",
+    hoverCells ? "" : "no-hover-cells",
+    selection.rowMode === false ? "" : "selectable-rows",
+    selection.columnMode === false ? "" : "selectable-columns",
+    selection.cellMode === false ? "" : "selectable-cells"
+  );
+  return /* @__PURE__ */ jsxs7("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
+    showGroupByBar && /* @__PURE__ */ jsx10(
       GroupByBar,
       {
         columns: resolved,
@@ -2208,10 +2606,10 @@ function DataGridComponent({
         headerDropTarget: headerGroupByDropTarget
       }
     ),
-    /* @__PURE__ */ jsxs6(
-      "table",
+    /* @__PURE__ */ jsxs7(
+      "div",
       {
-        ref: tableRef,
+        className: "gridkit-data-grid-tables",
         role: groupBy.length > 0 ? "treegrid" : "grid",
         "aria-rowcount": aggregatedRows.length + 1,
         "aria-colcount": resolved.length,
@@ -2235,57 +2633,90 @@ function DataGridComponent({
             selection.selectAllRows();
           }
         },
-        style: { width: totalColumnWidth(resolved) },
-        className: classNames(
-          "gridkit-data-grid",
-          borders ? `borders-${borders}` : "",
-          // Hover is on by default and selection off, so one set of classes
-          // turns styling off and the other turns it on. The polarity differs
-          // because the defaults do.
-          hoverRows ? "" : "no-hover-rows",
-          hoverColumns ? "" : "no-hover-columns",
-          hoverCells ? "" : "no-hover-cells",
-          selection.rowMode === false ? "" : "selectable-rows",
-          selection.columnMode === false ? "" : "selectable-columns",
-          selection.cellMode === false ? "" : "selectable-cells"
-        ),
         children: [
-          /* @__PURE__ */ jsx9("colgroup", { children: resolved.map((entry) => /* @__PURE__ */ jsx9("col", { style: { width: entry.width } }, entry.id)) }),
-          /* @__PURE__ */ jsx9(
-            GridHeader,
+          /* @__PURE__ */ jsxs7(
+            "table",
             {
-              columns: resolved,
-              resize,
-              drag,
-              sort: columnSort,
-              sortableColumns,
-              grouping,
-              groupableColumns,
-              groupToggleIconColumns,
-              nav,
-              selection
+              ref: headerTableRef,
+              style: { width: totalColumnWidth(resolved) },
+              className: classNames(gridTableClassName, "gridkit-data-grid-header"),
+              children: [
+                /* @__PURE__ */ jsx10(GridColgroup, { columns: resolved }),
+                /* @__PURE__ */ jsx10(
+                  GridHeader,
+                  {
+                    columns: resolved,
+                    resize,
+                    drag,
+                    sort: columnSort,
+                    sortableColumns,
+                    grouping,
+                    groupableColumns,
+                    groupToggleIconColumns,
+                    nav,
+                    selection
+                  }
+                )
+              ]
             }
           ),
-          /* @__PURE__ */ jsx9(
-            GridBody,
+          /* @__PURE__ */ jsx10(
+            "div",
             {
-              columns: resolved,
-              rows: paginatedRows.rows,
-              activeColumnId: resize.activeColumnId,
-              nav,
-              selection,
-              grouping,
-              aggregates: activeAggregates,
-              groupAggregateDisplay
+              className: "gridkit-data-grid-body",
+              ref: bodyScrollRef,
+              style: height === void 0 ? void 0 : {
+                "--gridkit-body-height": typeof height === "number" ? `${String(height)}px` : height
+              },
+              children: /* @__PURE__ */ jsxs7(
+                "table",
+                {
+                  ref: bodyTableRef,
+                  style: { width: totalColumnWidth(resolved) },
+                  className: gridTableClassName,
+                  children: [
+                    /* @__PURE__ */ jsx10(GridColgroup, { columns: resolved }),
+                    /* @__PURE__ */ jsx10(
+                      GridBody,
+                      {
+                        columns: resolved,
+                        rows: paginatedRows.rows,
+                        activeColumnId: resize.activeColumnId,
+                        nav,
+                        selection,
+                        grouping,
+                        aggregates: activeAggregates,
+                        groupAggregateDisplay,
+                        virtualRange: virtualized ? virtualizer : null,
+                        infiniteScroll,
+                        sentinelRef
+                      }
+                    )
+                  ]
+                }
+              )
             }
           ),
-          activeAggregates.length > 0 && /* @__PURE__ */ jsx9(
-            GridFooter,
+          activeAggregates.length > 0 && /* @__PURE__ */ jsxs7(
+            "table",
             {
-              columns: resolved,
-              aggregates: activeAggregates,
-              results: grandTotal,
-              rows: shownRows.map((entry) => entry.row)
+              style: { width: totalColumnWidth(resolved) },
+              className: classNames(
+                gridTableClassName,
+                "gridkit-data-grid-footer"
+              ),
+              children: [
+                /* @__PURE__ */ jsx10(GridColgroup, { columns: resolved }),
+                /* @__PURE__ */ jsx10(
+                  GridFooter,
+                  {
+                    columns: resolved,
+                    aggregates: activeAggregates,
+                    results: grandTotal,
+                    rows: shownRows.map((entry) => entry.row)
+                  }
+                )
+              ]
             }
           )
         ]
@@ -2300,18 +2731,18 @@ function DataGridComponent({
       nextPage: paginationApi.nextPage,
       previousPage: paginationApi.previousPage,
       setPageSize: paginationApi.setPageSize
-    }) : /* @__PURE__ */ jsx9(GridPager, { pager: paginationApi, config: pager })),
-    /* @__PURE__ */ jsx9("div", { className: "gridkit-sr-only", role: "status", "aria-live": "polite", children: announcement })
+    }) : /* @__PURE__ */ jsx10(GridPager, { pager: paginationApi, config: pager })),
+    /* @__PURE__ */ jsx10("div", { className: "gridkit-sr-only", role: "status", "aria-live": "polite", children: announcement })
   ] });
 }
 
 // src/DataGrid/hooks/usePaginationState.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback4 } from "react";
 
 // src/DataGrid/hooks/useGridSnapshot.ts
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback as useCallback3, useSyncExternalStore } from "react";
 function useGridSnapshot(gridRef, getSnapshot, fallback) {
-  const subscribe = useCallback(
+  const subscribe = useCallback3(
     (listener) => {
       const api = gridRef.current;
       if (api === null) {
@@ -2333,12 +2764,12 @@ var FALLBACK_PAGINATION = { pageIndex: 0, pageSize: 0 };
 function usePaginationState(gridRef) {
   const pagination = useGridSnapshot(
     gridRef,
-    useCallback2((api) => api.getPagination(), []),
+    useCallback4((api) => api.getPagination(), []),
     FALLBACK_PAGINATION
   );
   const pageCount = useGridSnapshot(
     gridRef,
-    useCallback2((api) => api.getPageCount(), []),
+    useCallback4((api) => api.getPageCount(), []),
     0
   );
   return {
@@ -2360,18 +2791,18 @@ function usePaginationState(gridRef) {
 }
 
 // src/DataGrid/hooks/useGroupByState.ts
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback5 } from "react";
 var FALLBACK_GROUP_BY = [];
 var FALLBACK_EXPANSION = [];
 function useGroupByState(gridRef) {
   const groupBy = useGridSnapshot(
     gridRef,
-    useCallback3((api) => api.getGroupBy(), []),
+    useCallback5((api) => api.getGroupBy(), []),
     FALLBACK_GROUP_BY
   );
   const groupExpansion = useGridSnapshot(
     gridRef,
-    useCallback3((api) => api.getGroupExpansion(), []),
+    useCallback5((api) => api.getGroupExpansion(), []),
     FALLBACK_EXPANSION
   );
   return {
@@ -2387,34 +2818,34 @@ function useGroupByState(gridRef) {
 }
 
 // src/DataGrid/hooks/useColumnSortState.ts
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback6 } from "react";
 var FALLBACK_SORT = [];
 function useColumnSortState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback4((api) => api.getColumnSort(), []),
+    useCallback6((api) => api.getColumnSort(), []),
     FALLBACK_SORT
   );
 }
 
 // src/DataGrid/hooks/useSelectionState.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback7 } from "react";
 var FALLBACK_SELECTION = [];
 var FALLBACK_CELL_SELECTION = null;
 function useSelectionState(gridRef) {
   const rowSelection = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getRowSelection(), []),
+    useCallback7((api) => api.getRowSelection(), []),
     FALLBACK_SELECTION
   );
   const columnSelection = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getColumnSelection(), []),
+    useCallback7((api) => api.getColumnSelection(), []),
     FALLBACK_SELECTION
   );
   const cellSelection = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getCellSelection(), []),
+    useCallback7((api) => api.getCellSelection(), []),
     FALLBACK_CELL_SELECTION
   );
   return {
@@ -2431,34 +2862,34 @@ function useSelectionState(gridRef) {
 }
 
 // src/DataGrid/hooks/useAggregateState.ts
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback8 } from "react";
 var FALLBACK_AGGREGATES = /* @__PURE__ */ new Map();
 function useAggregateState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback6((api) => api.getAggregates(), []),
+    useCallback8((api) => api.getAggregates(), []),
     FALLBACK_AGGREGATES
   );
 }
 
 // src/DataGrid/hooks/useColumnSizingState.ts
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback9 } from "react";
 var FALLBACK_SIZING = {};
 function useColumnSizingState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback7((api) => api.getColumnSizing(), []),
+    useCallback9((api) => api.getColumnSizing(), []),
     FALLBACK_SIZING
   );
 }
 
 // src/DataGrid/hooks/useColumnOrderState.ts
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback10 } from "react";
 var FALLBACK_ORDER = [];
 function useColumnOrderState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback8((api) => api.getColumnOrder(), []),
+    useCallback10((api) => api.getColumnOrder(), []),
     FALLBACK_ORDER
   );
 }