@gridkitjs/react 0.8.0 → 0.10.0

package/dist/index.js

@@ -1,29 +1,36 @@
+"use client";
+
 // src/DataGrid/DataGrid.tsx
 import {
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useImperativeHandle,
-  useMemo as useMemo4,
+  useMemo as useMemo3,
   useRef as useRef4,
-  useState as useState5
+  useState as useState8
 } from "react";
 import {
-  applyColumnOrder,
-  computeAggregates,
-  defineColumnsFromRows,
-  fitColumnsToWidth,
-  groupRows,
   moveColumnBefore,
-  paginateRows as paginateRows2,
-  resolveColumnWidths,
-  resolveRowId,
-  resolveShownRows,
-  totalColumnWidth,
-  withGroupAggregates
+  resolveColumnHeaderText,
+  resolveMessages,
+  resolveRows,
+  totalColumnWidth
 } 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";
+import {
+  buildKeyShortcuts,
+  intentOf,
+  KEYBOARD_STEP,
+  sortDirectionFor,
+  sortPriorityFor
+} from "@gridkitjs/core";
 
 // src/DataGrid/ariaAttr.ts
 function ariaAttr(condition, key, value) {
@@ -38,133 +45,67 @@ function classNames(...values) {
 // src/DataGrid/useGridNavigation.ts
 import {
   useEffect,
-  useMemo,
-  useRef,
-  useState
+  useLayoutEffect,
+  useState,
+  useSyncExternalStore
 } from "react";
+import { HEADER_ROW } from "@gridkitjs/core";
 import {
-  clampFocus,
-  nextFocusForKey,
-  HEADER_ROW
-} from "@gridkitjs/core";
-var FALLBACK_PAGE = 10;
+  createGridFocus,
+  findBodyRow,
+  measurePageSize
+} from "@gridkitjs/dom";
 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;
-  if (row === null) {
-    return null;
-  }
-  const columnIndex = Math.min(focus.columnIndex, row.cells.length - 1);
-  return row.cells[columnIndex] ?? null;
-}
 function useGridNavigation({
-  tableRef,
+  headerTableRef,
+  bodyTableRef,
   rowCount,
   columnCount,
-  isSkippableRow
+  isSkippableRow,
+  virtualRange
 }) {
-  const [stored, setStored] = useState({
-    rowIndex: HEADER_ROW,
-    columnIndex: 0
-  });
-  const focus = useMemo(
-    () => clampFocus(stored, rowCount, columnCount),
-    [stored, rowCount, columnCount]
+  const options = {
+    rowCount,
+    columnCount,
+    isSkippableRow,
+    virtualRange
+  };
+  const [gridFocus] = useState(() => createGridFocus(options));
+  gridFocus.setOptions(options);
+  const focus = useSyncExternalStore(gridFocus.subscribe, gridFocus.getFocus);
+  useLayoutEffect(
+    () => gridFocus.attach({
+      getHeaderRow: () => headerTableRef.current?.tHead?.rows[0] ?? null,
+      getBodyRow: (rowIndex) => findBodyRow(bodyTableRef.current, rowIndex)
+    }),
+    [gridFocus, headerTableRef, bodyTableRef]
   );
-  const pending = useRef(false);
   useEffect(() => {
-    if (!pending.current) {
-      return;
-    }
-    pending.current = false;
-    const table = tableRef.current;
-    if (table === null) {
-      return;
-    }
-    cellAt(table, { rowIndex: focus.rowIndex, columnIndex: focus.columnIndex })?.focus();
-  }, [tableRef, focus.rowIndex, focus.columnIndex]);
-  function pageSize() {
-    const table = tableRef.current;
-    const firstRow = table?.tBodies[0]?.rows[0];
-    const viewport = table?.parentElement;
-    if (firstRow === void 0 || viewport === null || viewport === void 0 || firstRow.offsetHeight === 0) {
-      return FALLBACK_PAGE;
-    }
-    return Math.max(
-      1,
-      Math.floor(viewport.clientHeight / firstRow.offsetHeight)
-    );
-  }
-  function focusCell(rowIndex, columnIndex) {
-    const next = clampFocus({ rowIndex, columnIndex }, rowCount, columnCount);
-    if (next.rowIndex === focus.rowIndex && next.columnIndex === focus.columnIndex) {
-      return;
-    }
-    pending.current = true;
-    setStored(next);
-  }
-  function onKeyDown(event) {
-    const next = nextFocusForKey(
-      event.key,
-      {
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        altKey: event.altKey,
-        shiftKey: event.shiftKey
-      },
-      focus,
-      rowCount,
-      columnCount,
-      pageSize(),
-      isSkippableRow
-    );
-    if (next === null) {
-      return;
-    }
-    event.preventDefault();
-    focusCell(next.rowIndex, next.columnIndex);
-  }
+    gridFocus.focusDrawnCell(focus);
+  });
   return {
     focus,
     tabIndexFor: (rowIndex, columnIndex) => tabIndexFor(
       columnIndex,
       rowIndex === focus.rowIndex ? focus.columnIndex : null
     ),
-    focusCell,
-    onKeyDown
+    focusCell: gridFocus.focusCell,
+    onKeyDown: (event) => {
+      if (gridFocus.handleKey(
+        event.key,
+        event,
+        measurePageSize(bodyTableRef.current)
+      )) {
+        event.preventDefault();
+      }
+    }
   };
 }
 
 // src/DataGrid/useGridSelection.ts
-import {
-  useMemo as useMemo2,
-  useRef as useRef2
-} from "react";
-import {
-  applySelectionIntent,
-  clearSelection,
-  diffSelection,
-  resolveCell,
-  resolveColumns,
-  resolveRows,
-  selectAll,
-  selectCell,
-  toggleCellSelection
-} from "@gridkitjs/core";
-
-// src/DataGrid/commitIfChanged.ts
-function commitIfChanged(current, next, setState, onCommit) {
-  if (next === current) {
-    return false;
-  }
-  setState(next);
-  onCommit?.(next);
-  return true;
-}
-
-// src/DataGrid/useGridSelection.ts
+import { useMemo } from "react";
 function keyboardSelectIntent(event) {
   return {
     ctrlKey: event.key === " " || event.ctrlKey,
@@ -172,193 +113,39 @@ function keyboardSelectIntent(event) {
     shiftKey: event.shiftKey
   };
 }
-function countMessage(count, noun) {
-  if (count === 0) {
-    return `No ${noun}s selected`;
-  }
-  return count === 1 ? `1 ${noun} selected` : `${String(count)} ${noun}s selected`;
-}
-function useAsSet(values) {
-  return useMemo2(() => new Set(values), [values]);
-}
-function useIndexedBy(values, key) {
-  return useMemo2(
-    () => new Map(values.map((value) => [value[key], value])),
-    [values, key]
-  );
-}
-function useMappedArray(values, key) {
-  return useMemo2(() => values.map((value) => value[key]), [values, key]);
-}
 function useGridSelection({
-  rows,
-  columns,
-  selectable,
-  rowSelection,
-  setRowSelection,
-  columnSelection,
-  setColumnSelection,
-  cellSelection,
-  setCellSelection,
-  callbacks,
-  announce,
-  columnName
+  controller,
+  state,
+  selectable
 }) {
-  const rowMode = selectable?.rows ?? false;
-  const columnMode = selectable?.columns ?? false;
-  const cellMode = selectable?.cells ?? false;
-  const rowsById = useIndexedBy(rows, "rowId");
-  const rowIds = useMappedArray(rows, "rowId");
-  const columnIds = useMappedArray(columns, "id");
-  const selectedRowIds = useAsSet(rowSelection);
-  const selectedColumnIds = useAsSet(columnSelection);
-  const rowAnchor = useRef2(null);
-  const columnAnchor = useRef2(null);
-  function announceCount(changed, total, noun) {
-    if (changed > 1) {
-      announce(countMessage(total, noun));
-    }
-  }
-  function commitRows(next) {
-    commitIfChanged(rowSelection, next, setRowSelection, (committed) => {
-      const { added, removed } = diffSelection(rowSelection, committed);
-      const addedRows = resolveRows(rowsById, added);
-      const removedRows = resolveRows(rowsById, removed);
-      for (const row of addedRows) {
-        callbacks.onRowSelect?.({ row, selection: committed });
-      }
-      if (addedRows.length > 0) {
-        callbacks.onRowsSelect?.({ rows: addedRows, selection: committed });
-      }
-      for (const row of removedRows) {
-        callbacks.onRowDeselect?.({ row, selection: committed });
-      }
-      if (removedRows.length > 0) {
-        callbacks.onRowsDeselect?.({ rows: removedRows, selection: committed });
-      }
-      callbacks.onRowSelectionChange?.({
-        added: addedRows,
-        removed: removedRows,
-        selected: resolveRows(rowsById, committed),
-        selection: committed
-      });
-      announceCount(added.length + removed.length, committed.length, "row");
-    });
-  }
-  function commitColumns(next) {
-    commitIfChanged(columnSelection, next, setColumnSelection, (committed) => {
-      const { added, removed } = diffSelection(columnSelection, committed);
-      const addedColumns = resolveColumns(columns, added);
-      const removedColumns = resolveColumns(columns, removed);
-      for (const column of addedColumns) {
-        callbacks.onColumnSelect?.({ column, selection: committed });
-      }
-      if (addedColumns.length > 0) {
-        callbacks.onColumnsSelect?.({
-          columns: addedColumns,
-          selection: committed
-        });
-      }
-      for (const column of removedColumns) {
-        callbacks.onColumnDeselect?.({ column, selection: committed });
-      }
-      if (removedColumns.length > 0) {
-        callbacks.onColumnsDeselect?.({
-          columns: removedColumns,
-          selection: committed
-        });
-      }
-      callbacks.onColumnSelectionChange?.({
-        added: addedColumns,
-        removed: removedColumns,
-        selected: resolveColumns(columns, committed),
-        selection: committed
-      });
-      announceCount(added.length + removed.length, committed.length, "column");
-    });
-  }
-  function commitCell(next) {
-    commitIfChanged(cellSelection, next, setCellSelection, (committed) => {
-      const selected = resolveCell(rowsById, columns, committed);
-      const deselected = resolveCell(rowsById, columns, cellSelection);
-      if (deselected !== null) {
-        callbacks.onCellDeselect?.({ cell: deselected, selection: committed });
-      }
-      if (selected !== null) {
-        callbacks.onCellSelect?.({ cell: selected, selection: committed });
-      }
-      callbacks.onCellSelectionChange?.({
-        selected,
-        deselected,
-        selection: committed
-      });
-      if (selected !== null) {
-        announce(
-          `${columnName(selected.columnId)}, row ${String(selected.rowIndex + 1)}, selected`
-        );
-      }
-    });
-  }
-  function selectRow(rowId, intent) {
-    const next = applySelectionIntent(
-      rowSelection,
-      rowIds,
-      rowAnchor.current,
-      rowId,
-      intent,
-      rowMode
-    );
-    if (intent !== "range") {
-      rowAnchor.current = rowId;
-    }
-    commitRows(next);
-  }
-  function selectColumn(columnId, intent) {
-    const next = applySelectionIntent(
-      columnSelection,
-      columnIds,
-      columnAnchor.current,
-      columnId,
-      intent,
-      columnMode
-    );
-    if (intent !== "range") {
-      columnAnchor.current = columnId;
-    }
-    commitColumns(next);
-  }
-  function selectCellAt(cell, intent) {
-    commitCell(
-      intent === "toggle" ? toggleCellSelection(cellSelection, cell, cellMode) : selectCell(cellSelection, cell, cellMode)
-    );
-  }
-  function selectAllRows() {
-    commitRows(selectAll(rowSelection, rowIds, rowMode));
-  }
-  function clear() {
-    commitRows(clearSelection(rowSelection));
-    commitColumns(clearSelection(columnSelection));
-    commitCell(null);
-  }
+  const selectedRowIds = useMemo(
+    () => new Set(state.rowSelection),
+    [state.rowSelection]
+  );
+  const selectedColumnIds = useMemo(
+    () => new Set(state.columnSelection),
+    [state.columnSelection]
+  );
   return {
-    rowMode,
-    columnMode,
-    cellMode,
+    rowMode: selectable?.rows ?? false,
+    columnMode: selectable?.columns ?? false,
+    cellMode: selectable?.cells ?? false,
+    toggleOnClick: selectable?.toggleOnClick ?? false,
     selectedRowIds,
     selectedColumnIds,
-    selectedCell: cellSelection,
-    selectRow,
-    selectColumn,
-    selectCell: selectCellAt,
-    selectAllRows,
-    clear
+    selectedCell: state.cellSelection,
+    selectRow: controller.selectRow,
+    selectColumn: controller.selectColumn,
+    selectCell: controller.selectCell,
+    selectAllRows: controller.selectAllRows,
+    clear: controller.clearSelection
   };
 }
 
 // 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,27 +161,28 @@ 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({
   columns,
   resize,
   drag,
-  sort,
+  controller,
+  columnSort,
   sortableColumns,
-  grouping,
+  groupBy,
   groupableColumns,
   groupToggleIconColumns,
   nav,
@@ -403,7 +191,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;
@@ -411,11 +199,11 @@ function GridHeader({
       const dropAfter = beforeId === null && index === columns.length - 1;
       const selected = selection.selectedColumnIds.has(entry.id);
       const sortable = column.sortable ?? sortableColumns;
-      const sortDirection = sort.directionFor(entry.id);
-      const sortPriority = sort.priorityFor(entry.id);
+      const sortDirection = sortDirectionFor(columnSort, entry.id);
+      const sortPriority = sortPriorityFor(columnSort, entry.id);
       const groupable = column.groupable ?? groupableColumns;
       const showGroupToggleIcon = column.groupToggleIcon ?? groupToggleIconColumns;
-      const isGrouped = grouping.groupBy.some(
+      const isGrouped = groupBy.some(
         (level) => level.columnId === entry.id
       );
       const shortcuts = buildKeyShortcuts({
@@ -469,12 +257,14 @@ function GridHeader({
             }
             if (event.key === "ArrowUp" && event.altKey && sortable) {
               event.preventDefault();
-              sort.toggle(entry, { shiftKey: event.shiftKey });
+              controller.toggleColumnSort(entry.id, {
+                stack: event.shiftKey
+              });
               return;
             }
             if (event.key === "ArrowDown" && event.altKey && groupable) {
               event.preventDefault();
-              grouping.toggleGroupBy(entry.id);
+              controller.toggleGroupBy(entry.id);
               return;
             }
             if (event.key === " " || event.key === "Enter") {
@@ -523,7 +313,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(
@@ -537,9 +327,9 @@ function GridHeader({
                 },
                 onClick: (event) => {
                   event.stopPropagation();
-                  grouping.toggleGroupBy(entry.id);
+                  controller.toggleGroupBy(entry.id);
                 },
-                children: /* @__PURE__ */ jsx(GroupIcon, {})
+                children: /* @__PURE__ */ jsx2(GroupIcon, {})
               }
             ),
             entry.label,
@@ -562,11 +352,13 @@ function GridHeader({
                   event.stopPropagation();
                 },
                 onClick: (event) => {
-                  sort.toggle(entry, { shiftKey: event.shiftKey });
+                  controller.toggleColumnSort(entry.id, {
+                    stack: 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 +368,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 +388,7 @@ function GridHeader({
       );
     }) }),
     draggedEntry !== null && drag.ghostTransform !== null && createPortal(
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "div",
         {
           className: "gridkit-data-grid header-cell drag-ghost",
@@ -614,80 +406,101 @@ function GridHeader({
 }
 
 // src/DataGrid/components/GridBody.tsx
-import { useMemo as useMemo3 } from "react";
+import {
+  useMemo as useMemo2,
+  useState as useState2
+} from "react";
 import {
   groupRowId,
   intentOf as intentOf2
 } from "@gridkitjs/core";
+import {
+  bodyCellFrom,
+  bodyRowFrom,
+  groupRowFrom
+} from "@gridkitjs/dom";
+
+// src/DataGrid/rowProps.ts
+var NO_ATTRIBUTES = {};
+var NO_ROW_PROPS = {
+  className: "",
+  attributes: NO_ATTRIBUTES
+};
+function sameAttributes(a, b) {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key]);
+}
+function createRowPropsResolver() {
+  let previous = /* @__PURE__ */ new Map();
+  return (rows, getRowProps) => {
+    if (getRowProps === void 0) {
+      previous = /* @__PURE__ */ new Map();
+      return () => NO_ROW_PROPS;
+    }
+    const resolved = /* @__PURE__ */ new Map();
+    const attributesById = /* @__PURE__ */ new Map();
+    for (const entry of rows) {
+      const { className = "", attributes = NO_ATTRIBUTES } = getRowProps(entry);
+      const last = previous.get(entry.rowId);
+      const stable = last !== void 0 && sameAttributes(last, attributes) ? last : attributes;
+      attributesById.set(entry.rowId, stable);
+      resolved.set(entry.rowId, { className, attributes: stable });
+    }
+    previous = attributesById;
+    return (rowId) => resolved.get(rowId) ?? NO_ROW_PROPS;
+  };
+}
 
 // src/DataGrid/components/GridGroupRow.tsx
 import { memo } from "react";
+import {
+  formatCellValue,
+  resolveColumnLabel
+} from "@gridkitjs/core";
 
-// src/DataGrid/components/formatAggregateValue.ts
-function formatAggregateValue(value) {
+// src/DataGrid/components/renderAggregate.ts
+import {
+  formatAggregateValue
+} from "@gridkitjs/core";
+function renderAggregate(value, spec, column, rows, locale) {
+  if (column?.footerTemplate) {
+    return column.footerTemplate({ value, rows });
+  }
   if (value === null || value === void 0) {
     return "\u2014";
   }
-  if (value instanceof Date) {
-    return value.toLocaleString();
-  }
-  switch (typeof value) {
-    case "string":
-    case "boolean":
-    case "bigint":
-    case "symbol":
-      return String(value);
-    case "number":
-      return value.toLocaleString();
-    case "function":
-      return "(function)";
-    default:
-      return JSON.stringify(value);
-  }
+  return formatAggregateValue(value, spec, column, locale);
 }
 
 // src/DataGrid/components/GridGroupRow.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function formatGroupValue(value) {
-  if (value === null || value === void 0) {
-    return "(blank)";
-  }
-  if (value instanceof Date) {
-    return value.toLocaleString();
-  }
-  switch (typeof value) {
-    case "string":
-    case "number":
-    case "boolean":
-    case "bigint":
-    case "symbol":
-      return String(value);
-    case "function":
-      return "(function)";
-    default:
-      return JSON.stringify(value);
-  }
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatGroupValue(value, column, locale, messages) {
+  return value === null || value === void 0 ? messages.blankGroupValue : formatCellValue(value, column, locale, void 0, messages);
 }
 function GridGroupRowComponent({
   columnCount,
   groupId,
   level,
-  columnLabel,
+  groupColumn,
   value,
   expanded,
   count,
+  rowIndex,
   datasetIndex,
   posinset,
   setsize,
   focused,
   aggregates,
   results,
-  columns
+  definitions,
+  locale,
+  cellMessages,
+  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 +508,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 +527,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(
@@ -724,24 +538,28 @@ function GridGroupRowComponent({
                   }
                 ),
                 /* @__PURE__ */ jsxs2("span", { className: "group-label", children: [
-                  columnLabel,
-                  ": ",
-                  formatGroupValue(value)
+                  resolveColumnLabel(groupColumn),
+                  ":",
+                  " ",
+                  formatGroupValue(value, groupColumn, locale, cellMessages)
                 ] }),
                 /* @__PURE__ */ jsxs2("span", { className: "group-count", children: [
                   "(",
                   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);
-                  const rendered = column?.column.footerTemplate ? column.column.footerTemplate({
-                    value: aggregateValue,
-                    rows: []
-                  }) : formatAggregateValue(aggregateValue);
-                  const aggregateLabel = spec.id ?? column?.label ?? spec.columnId;
+                  const column = definitions.get(spec.columnId);
+                  const rendered = renderAggregate(
+                    aggregateValue,
+                    spec,
+                    column,
+                    [],
+                    locale
+                  );
+                  const aggregateLabel = spec.id ?? (column === void 0 ? spec.columnId : resolveColumnLabel(column));
                   return /* @__PURE__ */ jsxs2("span", { className: "group-aggregate", children: [
                     aggregateLabel,
                     ": ",
@@ -763,21 +581,26 @@ 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,
+  locale,
+  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)}`
@@ -786,7 +609,6 @@ function GridGroupSummaryRowComponent({
         const specs = aggregates.filter(
           (candidate) => candidate.columnId === entry.id
         );
-        const { column } = entry;
         return /* @__PURE__ */ jsxs3(
           "td",
           {
@@ -795,7 +617,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",
@@ -803,10 +625,15 @@ function GridGroupSummaryRowComponent({
                   "aria-hidden": "true"
                 }
               ),
-              specs.map((spec) => {
-                const value = results.get(spec.id ?? spec.columnId);
-                return column.footerTemplate ? column.footerTemplate({ value, rows: [] }) : formatAggregateValue(value);
-              }).flatMap(
+              specs.map(
+                (spec) => renderAggregate(
+                  results.get(spec.id ?? spec.columnId),
+                  spec,
+                  entry.column,
+                  [],
+                  locale
+                )
+              ).flatMap(
                 (rendered, index) => index === 0 ? [rendered] : [", ", rendered]
               )
             ]
@@ -823,9 +650,12 @@ var GridGroupSummaryRow = memo2(
 var GridGroupSummaryRow_default = GridGroupSummaryRow;
 
 // src/DataGrid/components/GridRow.tsx
-import { accessDotted } from "@gridkitjs/core";
+import {
+  accessDotted,
+  formatCellValue as formatCellValue2
+} 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 +668,32 @@ function GridRowComponent({
   selectedColumnId,
   focusedColumnIndex,
   rowsSelectable,
-  cellsSelectable
+  cellsSelectable,
+  locale,
+  cellMessages,
+  rowClassName,
+  rowAttributes,
+  ref
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "tr",
     {
+      ...rowAttributes,
+      ref,
       role: "row",
       "aria-rowindex": datasetIndex + 2,
+      "data-gridkit-row-index": rowIndex,
+      "data-gridkit-row-id": rowId,
       ...ariaAttr(rowsSelectable, "aria-selected", selected),
-      className: classNames("grid-row", selected ? "is-selected" : ""),
+      className: classNames(
+        "grid-row",
+        selected ? "is-selected" : "",
+        rowClassName
+      ),
       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",
@@ -874,7 +717,7 @@ function GridRowComponent({
               datasetIndex,
               rowId,
               selected
-            }) : value
+            }) : formatCellValue2(value, column, locale, row, cellMessages)
           },
           id
         );
@@ -886,34 +729,7 @@ var GridRow = memo3(GridRowComponent);
 var GridRow_default = GridRow;
 
 // src/DataGrid/components/GridBody.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function cellFrom(target) {
-  if (!(target instanceof Element)) {
-    return null;
-  }
-  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) {
-    return null;
-  }
-  return {
-    rowIndex: row.sectionRowIndex,
-    columnIndex: cell.cellIndex,
-    columnId
-  };
-}
-function groupRowFrom(target) {
-  if (!(target instanceof Element)) {
-    return null;
-  }
-  const row = target.closest("tr[data-gridkit-group]");
-  const groupId = row?.getAttribute("data-gridkit-group");
-  if (!(row instanceof HTMLTableRowElement) || groupId === null || groupId === void 0) {
-    return null;
-  }
-  return { rowIndex: row.sectionRowIndex, groupId };
-}
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function groupAriaMeta(rows) {
   const totals = /* @__PURE__ */ new Map();
   for (const entry of rows) {
@@ -937,18 +753,40 @@ function groupAriaMeta(rows) {
 }
 function GridBody({
   columns,
+  definitions,
   rows,
   activeColumnId,
   nav,
   selection,
-  grouping,
+  controller,
   aggregates,
-  groupAggregateDisplay
+  groupAggregateDisplay,
+  virtualRange,
+  infiniteScroll,
+  sentinelRef,
+  locale,
+  getRowProps,
+  onRowClick,
+  onRowDoubleClick,
+  messages
 }) {
-  const { selectedCell, rowMode, cellMode } = selection;
-  const ariaMeta = useMemo3(() => groupAriaMeta(rows), [rows]);
+  const { selectedCell, rowMode, cellMode, toggleOnClick } = selection;
+  const ariaMeta = useMemo2(() => groupAriaMeta(rows), [rows]);
+  const visibleRows = virtualRange === null ? rows : rows.slice(virtualRange.startIndex, virtualRange.endIndex + 1);
+  const { booleanTrue, booleanFalse, blankGroupValue } = messages;
+  const cellMessages = useMemo2(
+    () => ({ booleanTrue, booleanFalse, blankGroupValue }),
+    [booleanTrue, booleanFalse, blankGroupValue]
+  );
+  const [resolveRowProps] = useState2(() => createRowPropsResolver());
+  const rowPropsOf = resolveRowProps(
+    visibleRows.filter(
+      (entry) => !("kind" in entry)
+    ),
+    getRowProps
+  );
   function targetOf(target) {
-    const position = cellFrom(target);
+    const position = bodyCellFrom(target);
     const entry = position === null ? void 0 : rows[position.rowIndex];
     if (position === null || entry === void 0 || "kind" in entry) {
       return null;
@@ -956,15 +794,39 @@ function GridBody({
     return { position, rowId: entry.rowId };
   }
   function select(rowId, columnId, modifiers) {
-    const intent = intentOf2(modifiers);
     if (rowMode !== false) {
-      selection.selectRow(rowId, intent);
+      selection.selectRow(rowId, intentOf2(modifiers, { toggleOnClick }));
     }
     if (cellMode !== false) {
-      selection.selectCell({ rowId, columnId }, intent);
+      selection.selectCell({ rowId, columnId }, intentOf2(modifiers));
     }
   }
-  return /* @__PURE__ */ jsx5(
+  function rowPointerEventOf(event) {
+    const target = bodyRowFrom(event.target);
+    const entry = target === null ? void 0 : rows[target.rowIndex];
+    if (target === null || entry === void 0 || "kind" in entry) {
+      return null;
+    }
+    return {
+      row: entry,
+      columnId: target.columnId,
+      native: {
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        button: event.button
+      }
+    };
+  }
+  function reportRowPointer(event, callback) {
+    if (callback === void 0) return;
+    const pointer = rowPointerEventOf(event);
+    if (pointer !== null) {
+      callback(pointer);
+    }
+  }
+  return /* @__PURE__ */ jsxs4(
     "tbody",
     {
       className: "grid-body",
@@ -981,12 +843,17 @@ function GridBody({
       onClick: (event) => {
         const group = groupRowFrom(event.target);
         if (group !== null) {
-          grouping.toggleExpansion(group.groupId);
+          controller.toggleGroupExpansion(group.groupId);
           return;
         }
         const found = targetOf(event.target);
-        if (found === null) return;
-        select(found.rowId, found.position.columnId, event);
+        if (found !== null) {
+          select(found.rowId, found.position.columnId, event);
+        }
+        reportRowPointer(event, onRowClick);
+      },
+      onDoubleClick: (event) => {
+        reportRowPointer(event, onRowDoubleClick);
       },
       onKeyDown: (event) => {
         const group = groupRowFrom(event.target);
@@ -997,7 +864,7 @@ function GridBody({
           }
           if (event.key === " " || event.key === "Enter") {
             event.preventDefault();
-            grouping.toggleExpansion(group.groupId);
+            controller.toggleGroupExpansion(group.groupId);
             return;
           }
           nav.onKeyDown(event);
@@ -1016,90 +883,154 @@ 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 `bodyCellFrom`/
+        // `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)) {
+            const rowProps = rowPropsOf(entry.rowId);
+            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,
+                locale,
+                cellMessages,
+                rowClassName: rowProps.className,
+                rowAttributes: rowProps.attributes
+              },
+              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,
+                locale
+              },
+              `${entry.groupId}-summary`
+            );
+          }
+          return /* @__PURE__ */ jsx6(
+            GridGroupRow_default,
             {
+              ref: virtualRange?.measureRow(entry.rowIndex),
+              columnCount: columns.length,
               groupId: entry.groupId,
               level: entry.level,
+              groupColumn: definitions.get(entry.columnId) ?? { field: 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
+              definitions,
+              locale,
+              cellMessages,
+              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() : messages.loadingMore }) }),
+          /* @__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
+  rows,
+  locale
 }) {
-  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",
         "data-gridkit-column": entry.id,
         className: "grid-footer-cell",
         style: { textAlign: specs[0]?.alignment ?? entry.alignment },
-        children: specs.map((spec) => {
-          const value = results.get(spec.id ?? spec.columnId);
-          return column.footerTemplate ? column.footerTemplate({ value, rows }) : formatAggregateValue(value);
-        }).flatMap(
+        children: specs.map(
+          (spec) => renderAggregate(
+            results.get(spec.id ?? spec.columnId),
+            spec,
+            entry.column,
+            rows,
+            locale
+          )
+        ).flatMap(
           (rendered, index) => index === 0 ? [rendered] : [", ", rendered]
         )
       },
@@ -1110,223 +1041,140 @@ function GridFooter({
 
 // src/DataGrid/components/GridPager.tsx
 import { paginationWindow } from "@gridkitjs/core";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function GridPager({ pager, config }) {
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function GridPager({ pager, config, messages }) {
   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(
-      "button",
-      {
-        type: "button",
-        className: "grid-pager-button",
-        disabled: pagination.pageIndex <= 0,
-        onClick: () => {
-          pager.previousPage();
-        },
-        children: "Previous"
-      }
-    ),
-    variant === "numbered" ? paginationWindow(currentPage, pageCount, {
-      boundaryCount: config?.boundaryCount,
-      siblingCount: config?.siblingCount
-    }).map(
-      (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx7(
-        "span",
-        {
-          className: "grid-pager-ellipsis",
-          "aria-hidden": "true",
-          children: "\u2026"
-        },
-        `ellipsis-${String(index)}`
-      ) : /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: "grid-pager-button",
-          "aria-label": `Page ${String(entry)}`,
-          "aria-current": entry === currentPage ? "page" : void 0,
-          onClick: () => {
-            pager.goToPage(entry - 1);
-          },
-          children: entry
-        },
-        entry
-      )
-    ) : /* @__PURE__ */ jsxs4("span", { className: "grid-pager-status", children: [
-      "Page ",
-      pageCount === 0 ? 0 : currentPage,
-      " of ",
-      pageCount
-    ] }),
-    /* @__PURE__ */ jsx7(
-      "button",
-      {
-        type: "button",
-        className: "grid-pager-button",
-        disabled: pagination.pageIndex >= pageCount - 1,
-        onClick: () => {
-          pager.nextPage();
-        },
-        children: "Next"
-      }
-    ),
-    sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs4("label", { className: "grid-pager-page-size", children: [
-      "Rows per page",
-      /* @__PURE__ */ jsx7(
-        "select",
-        {
-          value: pagination.pageSize,
-          onChange: (event) => {
-            pager.setPageSize(Number(event.target.value));
-          },
-          children: sizeOptions.map((size) => /* @__PURE__ */ jsx7("option", { value: size, children: size }, size))
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "gridkit-grid-pager",
+      role: "group",
+      "aria-label": messages.pagerLabel,
+      children: [
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            className: "grid-pager-button",
+            disabled: pagination.pageIndex <= 0,
+            onClick: () => {
+              pager.previousPage();
+            },
+            children: messages.previousPage
+          }
+        ),
+        variant === "numbered" ? paginationWindow(currentPage, pageCount, {
+          boundaryCount: config?.boundaryCount,
+          siblingCount: config?.siblingCount
+        }).map(
+          (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx8(
+            "span",
+            {
+              className: "grid-pager-ellipsis",
+              "aria-hidden": "true",
+              children: "\u2026"
+            },
+            `ellipsis-${String(index)}`
+          ) : /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              className: "grid-pager-button",
+              "aria-label": messages.pageButtonLabel(entry),
+              "aria-current": entry === currentPage ? "page" : void 0,
+              onClick: () => {
+                pager.goToPage(entry - 1);
+              },
+              children: entry
+            },
+            entry
+          )
+        ) : /* @__PURE__ */ jsx8("span", { className: "grid-pager-status", children: messages.pageStatus(pageCount === 0 ? 0 : currentPage, pageCount) }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            className: "grid-pager-button",
+            disabled: pagination.pageIndex >= pageCount - 1,
+            onClick: () => {
+              pager.nextPage();
+            },
+            children: messages.nextPage
+          }
+        ),
+        sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs5("label", { className: "grid-pager-page-size", children: [
+          messages.pageSizeLabel,
+          /* @__PURE__ */ jsx8(
+            "select",
+            {
+              value: pagination.pageSize,
+              onChange: (event) => {
+                pager.setPageSize(Number(event.target.value));
+              },
+              children: sizeOptions.map((size) => /* @__PURE__ */ jsx8("option", { value: size, children: size }, size))
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/DataGrid/components/GroupByBar.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { resolveKeyboardDropTarget } from "@gridkitjs/core";
-
-// src/DataGrid/groupByDropTarget.ts
 import {
-  movesGroupBy,
-  resolveDropBefore
+  resolveColumnLabel as resolveColumnLabel2,
+  resolveKeyboardDropTarget
 } from "@gridkitjs/core";
 
-// src/DataGrid/useDragReorder.ts
+// src/DataGrid/useGroupByDrag.ts
 import {
-  useRef as useRef3,
-  useState as useState2
-} from "react";
-
-// src/DataGrid/pointerGesture.ts
-function startPointerGesture(element, pointerId, handlers) {
-  element.setPointerCapture(pointerId);
-  function stop() {
-    element.removeEventListener("pointermove", move);
-    element.removeEventListener("pointerup", end);
-    element.removeEventListener("pointercancel", cancel);
-    window.removeEventListener("keydown", onKeyDown);
-    if (element.hasPointerCapture(pointerId)) {
-      element.releasePointerCapture(pointerId);
-    }
-  }
-  function move(event) {
-    handlers.onMove(event);
-  }
-  function end() {
-    stop();
-    handlers.onEnd();
-  }
-  function cancel() {
-    stop();
-    handlers.onCancel();
-  }
-  function onKeyDown(event) {
-    if (event.key === "Escape") {
-      cancel();
-    }
-  }
-  element.addEventListener("pointermove", move);
-  element.addEventListener("pointerup", end);
-  element.addEventListener("pointercancel", cancel);
-  window.addEventListener("keydown", onKeyDown);
-}
+  resolveGroupByDropTarget
+} from "@gridkitjs/dom";
 
 // src/DataGrid/useDragReorder.ts
-var DRAG_THRESHOLD = 4;
-function elementAt(x, y, selector) {
-  return document.elementFromPoint(x, y)?.closest(selector) ?? null;
-}
-function sideOf(element, x) {
-  const rect = element.getBoundingClientRect();
-  return x < rect.left + rect.width / 2 ? "before" : "after";
-}
+import {
+  useRef,
+  useState as useState3
+} from "react";
+import {
+  NO_DRAG,
+  startDragReorder
+} from "@gridkitjs/dom";
 function useDragReorder({
   resolveTarget,
   onDrop
 }) {
-  const [draggedId, setDraggedId] = useState2(null);
-  const [dropTarget, setDropTarget] = useState2(null);
-  const [ghostTransform, setGhostTransform] = useState2(null);
-  const dragged = useRef3(false);
+  const [drag, setDrag] = useState3(NO_DRAG);
+  const dragged = useRef(false);
   function justDragged() {
     const answer = dragged.current;
     dragged.current = false;
     return answer;
   }
   function startDrag(id, grabElement, event) {
-    const { pointerId, clientX: startX } = event;
-    const grabX = startX - grabElement.getBoundingClientRect().left;
-    let dragging = false;
-    let target = null;
-    function placeGhost(x, y) {
-      setGhostTransform(`translate(${String(x - grabX)}px, ${String(y)}px)`);
-    }
-    function reset() {
-      setGhostTransform(null);
-      setDraggedId(null);
-      setDropTarget(null);
-    }
-    startPointerGesture(grabElement, pointerId, {
-      onMove(moveEvent) {
-        const { clientX, clientY } = moveEvent;
-        if (!dragging) {
-          if (Math.abs(clientX - startX) < DRAG_THRESHOLD) {
-            return;
-          }
-          dragging = true;
+    startDragReorder(id, grabElement, event, {
+      resolveTarget,
+      onState(state) {
+        if (state.draggedId !== null) {
           dragged.current = true;
-          setDraggedId(id);
         }
-        placeGhost(clientX, clientY);
-        target = resolveTarget(clientX, clientY, id);
-        setDropTarget(target);
+        setDrag(state);
       },
-      onEnd() {
-        const dropped = target;
-        reset();
-        if (dragging && dropped !== null) {
-          onDrop(dropped, id);
-        }
-      },
-      // Escape and a cancelled pointer both leave the order as it was.
-      onCancel() {
-        target = null;
-        reset();
-      }
+      onDrop
     });
   }
   return {
-    draggedId,
-    dropTarget,
-    ghostTransform,
+    draggedId: drag.draggedId,
+    dropTarget: drag.dropTarget,
+    ghostTransform: drag.ghostTransform,
     startDrag,
     justDragged
   };
 }
 
-// src/DataGrid/groupByDropTarget.ts
-function resolveGroupByDropTarget(clientX, clientY, movedId, groupBy) {
-  const overBar = elementAt(clientX, clientY, "[data-gridkit-group-by-bar]");
-  if (overBar === null) {
-    return null;
-  }
-  const overChip = elementAt(clientX, clientY, "[data-gridkit-group-chip]");
-  const chipId = overChip?.getAttribute("data-gridkit-group-chip");
-  const beforeColumnId = overChip && chipId ? resolveDropBefore(
-    groupBy.map((entry) => entry.columnId),
-    chipId,
-    sideOf(overChip, clientX)
-  ) : null;
-  return movesGroupBy(groupBy, movedId, beforeColumnId) ? { kind: "group-by", beforeColumnId } : null;
-}
-
 // src/DataGrid/useGroupByDrag.ts
 function useGroupByDrag({
   groupBy,
@@ -1350,28 +1198,31 @@ 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,
+  definitions,
+  groupBy,
+  controller,
   columnName,
   headerDragEligible,
   headerDragBlocked,
-  headerDropTarget
+  headerDropTarget,
+  messages
 }) {
-  const { groupBy } = grouping;
   const groupByIds = groupBy.map((entry) => entry.columnId);
   const chipDrag = useGroupByDrag({
     groupBy,
     onDrop: (movedId, beforeColumnId) => {
-      grouping.moveGroupBy(movedId, beforeColumnId);
+      controller.moveGroupBy(movedId, beforeColumnId);
     }
   });
   const activeDropTarget = chipDrag.dropTarget ?? headerDropTarget;
   const isDragTarget = chipDrag.draggedColumnId !== null || headerDragEligible;
   const showPlaceholder = groupBy.length === 0 && columns.some((entry) => entry.groupByDraggable);
   function labelFor(columnId) {
-    return columns.find((entry) => entry.id === columnId)?.label ?? columnId;
+    const definition = definitions.get(columnId);
+    return definition === void 0 ? columnId : resolveColumnLabel2(definition);
   }
   function moveByKeyboard(columnId, direction) {
     const beforeColumnId = resolveKeyboardDropTarget(
@@ -1382,9 +1233,9 @@ function GroupByBar({
     if (beforeColumnId === void 0) {
       return;
     }
-    grouping.moveGroupBy(columnId, beforeColumnId);
+    controller.moveGroupBy(columnId, beforeColumnId);
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: classNames(
@@ -1394,14 +1245,14 @@ function GroupByBar({
       ),
       "data-gridkit-group-by-bar": "",
       role: "group",
-      "aria-label": "Grouped by",
+      "aria-label": messages.groupByBarLabel,
       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: messages.groupByBarPlaceholder }),
         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(
@@ -1412,7 +1263,11 @@ function GroupByBar({
               ),
               "data-gridkit-group-chip": entry.columnId,
               tabIndex: 0,
-              "aria-label": groupBy.length > 1 ? `${columnName(entry.columnId)}, level ${String(index + 1)} of ${String(groupBy.length)}` : columnName(entry.columnId),
+              "aria-label": messages.groupByChipLabel(
+                columnName(entry.columnId),
+                index + 1,
+                groupBy.length
+              ),
               "aria-keyshortcuts": "Control+ArrowLeft Control+ArrowRight",
               onPointerDown: (event) => {
                 chipDrag.startDrag(entry.columnId, event);
@@ -1428,18 +1283,18 @@ 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",
                     className: "group-by-chip-remove",
-                    "aria-label": `Stop grouping by ${columnName(entry.columnId)}`,
+                    "aria-label": messages.removeGroupBy(columnName(entry.columnId)),
                     onPointerDown: (event) => {
                       event.stopPropagation();
                     },
                     onClick: () => {
-                      grouping.toggleGroupBy(entry.columnId);
+                      controller.toggleGroupBy(entry.columnId);
                     },
                     children: "\xD7"
                   }
@@ -1450,7 +1305,7 @@ function GroupByBar({
           );
         }),
         chipDrag.draggedColumnId !== null && chipDrag.ghostTransform !== null && createPortal2(
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "span",
             {
               className: "group-by-chip drag-ghost",
@@ -1468,10 +1323,9 @@ function GroupByBar({
 
 // src/DataGrid/useColumnDrag.ts
 import {
-  movesColumn,
-  resolveDropBefore as resolveDropBefore2,
   resolveKeyboardDropTarget as resolveKeyboardDropTarget2
 } from "@gridkitjs/core";
+import { resolveColumnDropTarget } from "@gridkitjs/dom";
 function useColumnDrag({
   order,
   groupBy,
@@ -1479,18 +1333,11 @@ function useColumnDrag({
   onDrop
 }) {
   const drag = useDragReorder({
-    resolveTarget(clientX, clientY, movedId) {
-      const over = elementAt(clientX, clientY, "th[data-gridkit-column]");
-      const overId = over?.getAttribute("data-gridkit-column");
-      const beforeId = over && overId ? resolveDropBefore2(order, overId, sideOf(over, clientX)) : void 0;
-      if (beforeId !== void 0) {
-        return movesColumn(order, movedId, beforeId) ? { kind: "column-order", beforeId } : null;
-      }
-      const alreadyGrouped = groupBy.some(
-        (entry) => entry.columnId === movedId
-      );
-      return groupByDraggableIds.has(movedId) && !alreadyGrouped ? resolveGroupByDropTarget(clientX, clientY, movedId, groupBy) : null;
-    },
+    resolveTarget: (clientX, clientY, movedId) => resolveColumnDropTarget(clientX, clientY, movedId, {
+      order,
+      groupBy,
+      groupByDraggableIds
+    }),
     onDrop
   });
   function startDrag(entry, event) {
@@ -1515,95 +1362,64 @@ function useColumnDrag({
 
 // src/DataGrid/useColumnResize.ts
 import {
-  useState as useState3
+  useState as useState4
 } from "react";
 import {
-  applyColumnResize,
   beginColumnResize,
   clampColumnWidth,
   resolveColumnConstraints,
-  revertColumnSize,
   sizeColumnToContent
 } from "@gridkitjs/core";
-
-// src/DataGrid/measureColumnContent.ts
-function measureColumnContent(table, columnId) {
-  const cells = table.querySelectorAll(
-    `td[data-gridkit-column="${CSS.escape(columnId)}"]`
-  );
-  const range = document.createRange();
-  let widest = null;
-  for (const cell of cells) {
-    range.selectNodeContents(cell);
-    const style = getComputedStyle(cell);
-    const width = range.getBoundingClientRect().width + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
-    if (widest === null || width > widest) {
-      widest = width;
-    }
-  }
-  return widest;
-}
-
-// src/DataGrid/useColumnResize.ts
+import { measureColumnContent, startColumnResizeGesture } from "@gridkitjs/dom";
 function useColumnResize({
   tableRef,
-  sizing,
-  setSizing,
-  columnSizeDefaults,
-  onColumnResize
+  controller,
+  columnSizeDefaults
 }) {
-  const [activeColumnId, setActiveColumnId] = useState3(null);
-  function commit(base, columnId, width, phase) {
-    const next = { ...base, [columnId]: width };
-    setSizing(next);
-    onColumnResize?.({ columnId, width, sizing: next, phase });
-  }
+  const [activeColumnId, setActiveColumnId] = useState4(null);
   function startResize(entry, event) {
-    const handle = event.currentTarget;
-    const { pointerId } = event;
+    event.stopPropagation();
     const session = beginColumnResize(
       entry.column,
       entry.width,
       event.clientX,
       columnSizeDefaults
     );
-    const base = sizing;
-    let width = session.startWidth;
-    event.preventDefault();
-    event.stopPropagation();
-    setActiveColumnId(session.columnId);
-    startPointerGesture(handle, pointerId, {
-      onMove(moveEvent) {
-        width = applyColumnResize(session, moveEvent.clientX);
-        commit(base, session.columnId, width, "move");
-      },
-      onEnd() {
-        setActiveColumnId(null);
-        if (width !== session.startWidth) {
-          commit(base, session.columnId, width, "end");
+    const base = controller.getState().columnSizing;
+    const started = startColumnResizeGesture(
+      event.currentTarget,
+      event,
+      session,
+      {
+        onMove(width) {
+          controller.resizeColumn(session.columnId, width, "move");
+        },
+        onEnd(width) {
+          setActiveColumnId(null);
+          if (width !== null) {
+            controller.resizeColumn(session.columnId, width, "end");
+          }
+        },
+        /**
+         * Escape puts back only the dragged column's pre-drag width, merged
+         * into whatever the sizing state is *now* — not the `base` snapshot
+         * taken at drag-start — so a different column resized via keyboard
+         * while this drag was still open keeps its change instead of being
+         * clobbered by a stale restore.
+         */
+        onCancel() {
+          setActiveColumnId(null);
+          controller.cancelColumnResize(
+            session.columnId,
+            base,
+            session.startWidth
+          );
         }
-      },
-      /**
-       * Escape puts back only the dragged column's pre-drag width, merged
-       * into whatever the sizing state is *now* — not the `base` snapshot
-       * taken at drag-start — so a different column resized via keyboard
-       * while this drag was still open keeps its change instead of being
-       * clobbered by a stale restore.
-       */
-      onCancel() {
-        setActiveColumnId(null);
-        setSizing((current) => {
-          const next = revertColumnSize(current, base, session.columnId);
-          onColumnResize?.({
-            columnId: session.columnId,
-            width: session.startWidth,
-            sizing: next,
-            phase: "end"
-          });
-          return next;
-        });
       }
-    });
+    );
+    if (started) {
+      setActiveColumnId(session.columnId);
+    }
   }
   function sizeToContent(entry) {
     const table = tableRef.current;
@@ -1614,8 +1430,7 @@ function useColumnResize({
     if (measured === null) {
       return;
     }
-    commit(
-      sizing,
+    controller.resizeColumn(
       entry.id,
       sizeColumnToContent(
         measured,
@@ -1625,8 +1440,7 @@ function useColumnResize({
     );
   }
   function nudge(entry, delta) {
-    commit(
-      sizing,
+    controller.resizeColumn(
       entry.id,
       clampColumnWidth(
         entry.width + delta,
@@ -1638,342 +1452,285 @@ function useColumnResize({
   return { activeColumnId, startResize, sizeToContent, nudge };
 }
 
-// src/DataGrid/useColumnSort.ts
-import {
-  sortDirectionFor,
-  sortPriorityFor,
-  toggleColumnSort
-} from "@gridkitjs/core";
-function useColumnSort({
-  sort,
-  setSort,
-  onColumnSortChange
-}) {
-  function toggle(entry, event) {
-    const next = toggleColumnSort(sort, entry.id, { stack: event.shiftKey });
-    commitIfChanged(sort, next, setSort, (committed) => {
-      onColumnSortChange?.({ columnId: entry.id, sort: committed });
-    });
-  }
-  return {
-    sort,
-    directionFor: (columnId) => sortDirectionFor(sort, columnId),
-    priorityFor: (columnId) => sortPriorityFor(sort, columnId),
-    toggle
-  };
-}
-
 // src/DataGrid/useElementWidth.ts
-import { useLayoutEffect, useState as useState4 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useState as useState5 } from "react";
+import { observeElementWidth } from "@gridkitjs/dom";
 function useElementWidth(ref, enabled) {
-  const [width, setWidth] = useState4(null);
-  useLayoutEffect(() => {
+  const [width, setWidth] = useState5(null);
+  useLayoutEffect2(() => {
     const element = ref.current;
     if (element === null || !enabled) {
       return void 0;
     }
-    setWidth(element.clientWidth);
-    const observer = new ResizeObserver(() => {
-      setWidth(element.clientWidth);
-    });
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
+    return observeElementWidth(element, setWidth);
   }, [ref, enabled]);
   return width;
 }
 
-// src/DataGrid/usePagination.ts
+// src/DataGrid/useGridController.ts
+import { useState as useState6, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
-  paginateRows
+  createGridController
 } from "@gridkitjs/core";
-function usePagination({
-  pagination,
-  setPagination,
-  rows,
-  onPaginationChange
+function useGridController(options) {
+  const [controller] = useState6(
+    () => createGridController(options)
+  );
+  controller.setOptions(options);
+  const state = useSyncExternalStore2(controller.subscribe, controller.getState);
+  return { controller, state, view: controller.getView() };
+}
+
+// src/DataGrid/useInfiniteScroll.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { attachInfiniteScroll } from "@gridkitjs/dom";
+function useInfiniteScroll({
+  rootRef,
+  sentinelRef,
+  config
 }) {
-  const { pageCount, pageIndex } = paginateRows(rows, pagination);
-  function commit(next) {
-    commitIfChanged(pagination, next, setPagination, (committed) => {
-      const { pageCount: committedPageCount } = paginateRows(rows, committed);
-      onPaginationChange?.({
-        pagination: committed,
-        pageCount: committedPageCount
-      });
+  const scroll = useRef2(null);
+  useEffect2(() => {
+    const root = rootRef.current;
+    if (root === null) {
+      return void 0;
+    }
+    const attached = attachInfiniteScroll(root, {
+      sentinel: null,
+      hasMore: false
     });
-  }
-  function goToPage(nextPageIndex) {
-    const { pageIndex: clamped } = paginateRows(rows, {
-      ...pagination,
-      pageIndex: nextPageIndex
+    scroll.current = attached;
+    return () => {
+      attached.detach();
+      scroll.current = null;
+    };
+  }, [rootRef]);
+  useEffect2(() => {
+    scroll.current?.update({
+      sentinel: sentinelRef.current,
+      hasMore: config?.hasMore ?? false,
+      onLoadMore: config?.onLoadMore,
+      isLoadingMore: config?.isLoadingMore,
+      rootMargin: config?.rootMargin
     });
-    commit({ ...pagination, pageIndex: clamped });
-  }
-  return {
-    pagination,
-    pageCount,
-    currentPage: Math.min(pagination.pageIndex + 1, pageCount),
-    goToPage,
-    nextPage: () => {
-      goToPage(pageIndex + 1);
-    },
-    previousPage: () => {
-      goToPage(pageIndex - 1);
-    },
-    setPageSize: (pageSize) => {
-      const next = { pageIndex: 0, pageSize };
-      const { pageIndex: clamped } = paginateRows(rows, next);
-      commit({ ...next, pageIndex: clamped });
+  });
+}
+
+// src/DataGrid/useLiveAnnouncer.ts
+import { useCallback, useLayoutEffect as useLayoutEffect3, useRef as useRef3 } from "react";
+import { createLiveAnnouncer } from "@gridkitjs/dom";
+function useLiveAnnouncer(containerRef) {
+  const announcer = useRef3(null);
+  useLayoutEffect3(() => {
+    const container = containerRef.current;
+    if (container === null) {
+      return void 0;
     }
-  };
+    const created = createLiveAnnouncer(container);
+    announcer.current = created;
+    return () => {
+      created.destroy();
+      announcer.current = null;
+    };
+  }, [containerRef]);
+  return useCallback((text) => {
+    announcer.current?.announce(text);
+  }, []);
 }
 
-// src/DataGrid/useRowGrouping.ts
-import {
-  collapseAllGroups,
-  expandAllGroups,
-  moveGroupByBefore,
-  toggleGroupExpansion
-} from "@gridkitjs/core";
-function useRowGrouping({
-  groupBy,
-  setGroupBy,
-  expansion,
-  setExpansion,
-  onGroupByChange,
-  onGroupExpansionChange
+// src/DataGrid/useRowVirtualizer.ts
+import { useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
+import { createRowVirtualizer } from "@gridkitjs/dom";
+var EMPTY_RANGE = {
+  startIndex: 0,
+  endIndex: -1,
+  offsetBefore: 0,
+  offsetAfter: 0
+};
+function ignoreRow() {
+  return () => void 0;
+}
+function useRowVirtualizer({
+  enabled,
+  rows,
+  bodyScrollRef,
+  estimatedRowHeight,
+  overscan
 }) {
-  function commitExpansion(next, groupId) {
-    commitIfChanged(expansion, next, setExpansion, (committed) => {
-      onGroupExpansionChange?.({ groupId, expansion: committed });
-    });
-  }
-  function commitGroupBy(next, columnId) {
-    commitIfChanged(groupBy, next, setGroupBy, (committed) => {
-      onGroupByChange?.({ columnId, groupBy: committed });
+  const [virtualizer, setVirtualizer] = useState7(null);
+  const [range, setRange] = useState7(EMPTY_RANGE);
+  useLayoutEffect4(() => {
+    const element = bodyScrollRef.current;
+    if (!enabled || element === null) {
+      return void 0;
+    }
+    const created = createRowVirtualizer(element, {
+      estimatedRowHeight,
+      overscan,
+      onRange: setRange
     });
-  }
-  function toggleGroupBy(columnId) {
-    const isGrouped = groupBy.some((entry) => entry.columnId === columnId);
-    const next = isGrouped ? groupBy.filter((entry) => entry.columnId !== columnId) : [...groupBy, { columnId }];
-    commitGroupBy(next, columnId);
-  }
-  function moveGroupBy(columnId, beforeColumnId) {
-    commitGroupBy(
-      moveGroupByBefore(groupBy, columnId, beforeColumnId),
-      columnId
-    );
-  }
+    setVirtualizer(created);
+    return () => {
+      created.destroy();
+    };
+  }, [enabled, bodyScrollRef, estimatedRowHeight, overscan]);
+  useLayoutEffect4(() => {
+    virtualizer?.setRowCount(rows.length);
+    virtualizer?.resetHeights();
+  }, [virtualizer, rows]);
   return {
-    groupBy,
-    expansion,
-    isExpanded: (groupId) => !expansion.includes(groupId),
-    toggleExpansion: (groupId) => {
-      commitExpansion(toggleGroupExpansion(expansion, groupId), groupId);
-    },
-    expandAll: () => {
-      commitExpansion(expandAllGroups(expansion), null);
-    },
-    collapseAll: (rows) => {
-      commitExpansion(collapseAllGroups(rows), null);
-    },
-    toggleGroupBy,
-    moveGroupBy
+    startIndex: range.startIndex,
+    endIndex: range.endIndex,
+    offsetBefore: range.offsetBefore,
+    offsetAfter: range.offsetAfter,
+    measureRow: virtualizer?.measureRow ?? ignoreRow,
+    scrollToIndex: (index, options) => {
+      virtualizer?.scrollToIndex(index, options);
+    }
   };
 }
 
 // src/DataGrid/DataGrid.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var DEFAULT_PAGE_SIZE = 25;
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var NO_AGGREGATES = [];
-function DataGridComponent({
-  dataSource,
-  columns,
-  getRowId,
-  borders,
-  hoverable,
-  selectable,
-  defaultRowSelection,
-  defaultColumnSelection,
-  defaultCellSelection,
-  resizableColumns = false,
-  reorderableColumns = false,
-  resizeMode = "fit",
-  defaultColumnSizing,
-  defaultColumnOrder,
-  columnSizeDefaults,
-  onColumnResize,
-  onColumnOrderChange,
-  sortableColumns = false,
-  defaultColumnSort,
-  onColumnSortChange,
-  groupableColumns = false,
-  groupToggleIconColumns = true,
-  groupByDraggableColumns = false,
-  groupByBarVisibility = "auto",
-  defaultGroupBy,
-  onGroupByChange,
-  defaultGroupExpansion,
-  onGroupExpansionChange,
-  defaultFilter,
-  paginated = false,
-  defaultPagination,
-  pager,
-  onPaginationChange,
-  aggregates,
-  groupAggregateDisplay = "inline",
-  label,
-  labelledBy,
-  ref,
-  ...callbacks
-}) {
+function paginationReader(controller) {
+  let last;
+  return () => {
+    const { pageIndex } = controller.getView();
+    const { pageSize } = controller.getState().pagination;
+    if (last?.pageIndex !== pageIndex || last.pageSize !== pageSize) {
+      last = { pageIndex, pageSize };
+    }
+    return last;
+  };
+}
+function selectedRowsReader(controller) {
+  let last;
+  return () => {
+    const { rows } = controller.getView();
+    const selection = controller.getState().rowSelection;
+    if (last?.rows !== rows || last.selection !== selection) {
+      const rowsById = new Map(rows.map((entry) => [entry.rowId, entry]));
+      last = { rows, selection, selected: resolveRows(rowsById, selection) };
+    }
+    return last.selected;
+  };
+}
+function DataGrid(props) {
+  const {
+    borders,
+    hoverable,
+    selectable,
+    resizeMode = "fit",
+    columnSizeDefaults,
+    onColumnResize,
+    sortableColumns = false,
+    onColumnSortChange,
+    groupableColumns = false,
+    groupToggleIconColumns = true,
+    groupByBarVisibility = "auto",
+    onGroupByChange,
+    onGroupExpansionChange,
+    paginated = false,
+    pager,
+    onPaginationChange,
+    onCellSelectionChange,
+    infiniteScroll,
+    aggregates = NO_AGGREGATES,
+    groupAggregateDisplay = "inline",
+    height,
+    virtualized = false,
+    overscan = 4,
+    estimatedRowHeight = 40,
+    label,
+    labelledBy,
+    locale,
+    getRowProps,
+    onRowClick,
+    onRowDoubleClick,
+    messages: messageOverrides,
+    ref
+  } = props;
   const hoverRows = hoverable?.rows ?? true;
   const hoverColumns = hoverable?.columns ?? true;
   const hoverCells = hoverable?.cells ?? true;
   const viewportRef = useRef4(null);
-  const tableRef = useRef4(null);
+  const headerTableRef = useRef4(null);
+  const bodyTableRef = useRef4(null);
+  const bodyScrollRef = useRef4(null);
+  const sentinelRef = useRef4(null);
   const viewportWidth = useElementWidth(viewportRef, resizeMode === "fit");
   const subscribersRef = useRef4(/* @__PURE__ */ new Set());
-  const [sizing, setSizing] = useState5(
-    defaultColumnSizing ?? {}
-  );
-  const [order, setOrder] = useState5(
-    defaultColumnOrder ?? []
-  );
-  const [sort, setSort] = useState5(defaultColumnSort ?? []);
-  const [groupBy, setGroupBy] = useState5(defaultGroupBy ?? []);
-  const [expansion, setExpansion] = useState5(
-    defaultGroupExpansion ?? []
-  );
-  const [filter] = useState5(defaultFilter ?? []);
-  const [pagination, setPagination] = useState5(
-    defaultPagination ?? { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }
-  );
-  const [announcement, setAnnouncement] = useState5("");
-  const [rowSelection, setRowSelection] = useState5(
-    defaultRowSelection ?? []
-  );
-  const [columnSelection, setColumnSelection] = useState5(
-    defaultColumnSelection ?? []
-  );
-  const [cellSelection, setCellSelection] = useState5(
-    defaultCellSelection ?? null
-  );
-  const rows = useMemo4(
-    () => dataSource?.map((row, rowIndex) => ({
-      rowId: resolveRowId(row, rowIndex, getRowId),
-      row,
-      rowIndex,
-      datasetIndex: rowIndex
-    })) ?? [],
-    [dataSource, getRowId]
-  );
-  const definedColumns = useMemo4(() => {
-    if (columns && columns.length !== 0) return columns;
-    if (dataSource && dataSource.length > 0)
-      return defineColumnsFromRows(dataSource);
-    return [];
-  }, [columns, dataSource]);
-  const orderedColumns = useMemo4(
-    () => applyColumnOrder(definedColumns, order),
-    [definedColumns, order]
+  const announce = useLiveAnnouncer(viewportRef);
+  const messages = useMemo3(
+    () => resolveMessages(messageOverrides),
+    [messageOverrides]
   );
-  const resolved = useMemo4(() => {
-    const widths = resolveColumnWidths(orderedColumns, sizing, {
-      sizes: columnSizeDefaults,
-      resizable: resizableColumns,
-      reorderable: reorderableColumns,
-      groupByDraggable: groupByDraggableColumns
-    });
-    return resizeMode === "fit" && viewportWidth !== null ? fitColumnsToWidth(widths, viewportWidth, columnSizeDefaults) : widths;
-  }, [
-    orderedColumns,
-    sizing,
-    resizeMode,
+  const { controller, state, view } = useGridController({
+    ...props,
     viewportWidth,
-    columnSizeDefaults,
-    resizableColumns,
-    reorderableColumns,
-    groupByDraggableColumns
-  ]);
-  const shownRows = useMemo4(
-    () => resolveShownRows(rows, filter, sort, resolved),
-    [rows, filter, sort, resolved]
-  );
-  const displayRows = useMemo4(
-    () => groupRows(shownRows, groupBy, expansion, resolved),
-    [shownRows, groupBy, expansion, resolved]
-  );
-  const activeAggregates = aggregates ?? NO_AGGREGATES;
-  const aggregatedRows = useMemo4(
-    () => withGroupAggregates(
-      displayRows,
-      shownRows,
-      groupBy,
-      activeAggregates,
-      resolved,
-      groupAggregateDisplay
-    ),
-    [
-      displayRows,
-      shownRows,
-      groupBy,
-      activeAggregates,
-      resolved,
-      groupAggregateDisplay
-    ]
-  );
-  const grandTotal = useMemo4(
-    () => computeAggregates(
-      shownRows.map((entry) => entry.row),
-      activeAggregates,
-      resolved
-    ),
-    [shownRows, activeAggregates, resolved]
-  );
-  const paginatedRows = useMemo4(
-    () => paginated ? paginateRows2(aggregatedRows, pagination) : { rows: aggregatedRows, pageCount: 1, pageIndex: 0 },
-    [paginated, aggregatedRows, pagination]
-  );
-  const paginationSnapshot = useMemo4(
-    () => ({
-      pageIndex: paginatedRows.pageIndex,
-      pageSize: pagination.pageSize
-    }),
-    [paginatedRows.pageIndex, pagination.pageSize]
-  );
-  const displayDataRows = useMemo4(
-    () => groupBy.length === 0 && !paginated ? shownRows : paginatedRows.rows.filter(
-      (entry) => !("kind" in entry)
-    ),
-    [paginatedRows, groupBy.length, paginated, shownRows]
-  );
-  function columnName(columnId) {
-    const entry = resolved.find((candidate) => candidate.id === columnId);
-    if (entry === void 0) {
-      return columnId;
+    onColumnResize: handleColumnResize,
+    onColumnSortChange: handleColumnSortChange,
+    onGroupByChange: handleGroupByChange,
+    onGroupExpansionChange: handleGroupExpansionChange,
+    onPaginationChange: handlePaginationChange,
+    onCellSelectionChange: handleCellSelectionChange,
+    onSelectionDiff: handleSelectionDiff
+  });
+  const [readPagination] = useState8(() => paginationReader(controller));
+  const [readSelectedRows] = useState8(() => selectedRowsReader(controller));
+  const virtualizer = useRowVirtualizer({
+    enabled: virtualized,
+    rows: view.pageRows,
+    bodyScrollRef,
+    estimatedRowHeight,
+    overscan
+  });
+  useEffect3(() => {
+    if (virtualized && height === void 0) {
+      console.error(
+        "DataGrid: `virtualized` has no effect without `height` \u2014 a body with no bounded height has no viewport to window rows against."
+      );
     }
-    return typeof entry.label === "string" ? entry.label : entry.column.field;
-  }
-  function announce(message) {
-    setAnnouncement(message);
+  }, [virtualized, height]);
+  const hasInfiniteScroll = infiniteScroll !== void 0;
+  useEffect3(() => {
+    if (paginated && hasInfiniteScroll) {
+      console.error(
+        "DataGrid: `paginated` and `infiniteScroll` are mutually exclusive \u2014 only `paginated` takes effect while both are set."
+      );
+    }
+  }, [paginated, hasInfiniteScroll]);
+  useInfiniteScroll({
+    rootRef: bodyScrollRef,
+    sentinelRef,
+    config: infiniteScroll
+  });
+  function columnName(columnId) {
+    const entry = view.dataColumns.find(
+      (candidate) => candidate.id === columnId
+    );
+    return entry === void 0 ? columnId : resolveColumnHeaderText(entry.column);
   }
   function handleColumnResize(event) {
     onColumnResize?.(event);
     if (event.phase === "end") {
       announce(
-        `${columnName(event.columnId)}, ${String(Math.round(event.width))} pixels wide`
+        messages.columnResized(
+          columnName(event.columnId),
+          Math.round(event.width)
+        )
       );
     }
   }
   const resize = useColumnResize({
-    tableRef,
-    sizing,
-    setSizing,
-    columnSizeDefaults,
-    onColumnResize: handleColumnResize
+    // `@gridkitjs/dom`'s `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,
+    controller,
+    columnSizeDefaults
   });
   function handleGroupByChange(event) {
     onGroupByChange?.(event);
@@ -1981,209 +1738,230 @@ function DataGridComponent({
       (candidate) => candidate.columnId === event.columnId
     );
     if (entry === void 0) {
-      announce(`${columnName(event.columnId)}, grouping removed`);
+      announce(messages.groupingRemoved(columnName(event.columnId)));
       return;
     }
     announce(
-      event.groupBy.length > 1 ? `Grouped by ${columnName(event.columnId)}, level ${String(event.groupBy.indexOf(entry) + 1)} of ${String(event.groupBy.length)}` : `Grouped by ${columnName(event.columnId)}`
+      messages.groupedBy(
+        columnName(event.columnId),
+        event.groupBy.indexOf(entry) + 1,
+        event.groupBy.length
+      )
     );
   }
   function handleGroupExpansionChange(event) {
     onGroupExpansionChange?.(event);
     if (event.groupId === null) {
       announce(
-        event.expansion.length === 0 ? "All groups expanded" : "All groups collapsed"
+        event.expansion.length === 0 ? messages.allGroupsExpanded : messages.allGroupsCollapsed
       );
       return;
     }
     announce(
-      event.expansion.includes(event.groupId) ? "Group collapsed" : "Group expanded"
+      event.expansion.includes(event.groupId) ? messages.groupCollapsed : messages.groupExpanded
     );
   }
-  const grouping = useRowGrouping({
-    groupBy,
-    setGroupBy,
-    expansion,
-    setExpansion,
-    onGroupByChange: handleGroupByChange,
-    onGroupExpansionChange: handleGroupExpansionChange
-  });
+  function handleColumnSortChange(event) {
+    onColumnSortChange?.(event);
+    const entry = event.sort.find(
+      (candidate) => candidate.columnId === event.columnId
+    );
+    if (entry === void 0) {
+      announce(messages.sortCleared(columnName(event.columnId)));
+      return;
+    }
+    announce(
+      messages.columnSorted(
+        columnName(event.columnId),
+        entry.direction,
+        event.sort.indexOf(entry) + 1,
+        event.sort.length
+      )
+    );
+  }
+  function handlePaginationChange(event) {
+    onPaginationChange?.(event);
+    announce(
+      messages.pageStatus(event.pagination.pageIndex + 1, event.pageCount)
+    );
+  }
+  function handleSelectionDiff(event) {
+    if (event.added.length + event.removed.length > 1) {
+      announce(messages.selectedCount(event.selection.length, event.target));
+    }
+  }
+  function handleCellSelectionChange(event) {
+    onCellSelectionChange?.(event);
+    if (event.selected !== null) {
+      announce(
+        messages.cellSelected(
+          columnName(event.selected.columnId),
+          event.selected.rowIndex + 1
+        )
+      );
+    }
+  }
   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
-    // (`paginatedRows`, not `displayRows`): arrow keys operate on what's
+    // (`view.pageRows`, not `view.displayRows`): arrow keys operate on what's
     // actually in the DOM, which is the current page — a different "page"
     // concept than `useGridNavigation`'s own Page Up/Down viewport scrolling.
-    rowCount: paginatedRows.rows.length,
-    columnCount: resolved.length,
+    rowCount: view.pageRows.length,
+    columnCount: view.columns.length,
     // A group's own summary row (`groupAggregateDisplay: "row"`) occupies a
     // real slot in `rowCount` above — its DOM position has to line up with
     // everything else — but is presentational, never a tab stop: arrow-key
     // vertical movement steps over it rather than landing there.
     isSkippableRow: (rowIndex) => {
-      const entry = paginatedRows.rows[rowIndex];
+      const entry = view.pageRows[rowIndex];
       return entry !== void 0 && "kind" in entry && entry.kind === "group-summary";
     }
   });
-  const displayedIds = useMemo4(
-    () => orderedColumns.map((column) => column.id ?? column.field),
-    [orderedColumns]
+  const orderedIds = useMemo3(
+    () => view.dataColumns.map((entry) => entry.id),
+    [view.dataColumns]
+  );
+  const displayedIds = useMemo3(
+    () => view.columns.map((entry) => entry.id),
+    [view.columns]
   );
-  const groupByDraggableIds = useMemo4(
+  const definitions = useMemo3(
+    () => new Map(view.dataColumns.map((entry) => [entry.id, entry.column])),
+    [view.dataColumns]
+  );
+  const groupByDraggableIds = useMemo3(
     () => new Set(
-      resolved.filter((entry) => entry.groupByDraggable).map((entry) => entry.id)
+      view.columns.filter((entry) => entry.groupByDraggable).map((entry) => entry.id)
     ),
-    [resolved]
+    [view.columns]
   );
   function handleDrop(target, movedId) {
     if (target.kind === "group-by") {
-      grouping.moveGroupBy(movedId, target.beforeColumnId);
+      controller.moveGroupBy(movedId, target.beforeColumnId);
       return;
     }
-    const next = moveColumnBefore(displayedIds, movedId, target.beforeId);
-    if (next === displayedIds) {
+    const next = moveColumnBefore(orderedIds, movedId, target.beforeId);
+    if (next === orderedIds) {
       return;
     }
-    const position = next.indexOf(movedId);
-    setOrder(next);
-    onColumnOrderChange?.({ columnId: movedId, order: next });
+    controller.moveColumn(movedId, target.beforeId);
+    const shown = next.filter((id) => displayedIds.includes(id));
+    const position = shown.indexOf(movedId);
     announce(
-      `${columnName(movedId)}, column ${String(position + 1)} of ${String(next.length)}`
+      messages.columnMoved(columnName(movedId), position + 1, shown.length)
     );
     nav.focusCell(HEADER_ROW, position);
   }
   const drag = useColumnDrag({
     order: displayedIds,
-    groupBy,
+    groupBy: state.groupBy,
     groupByDraggableIds,
     onDrop: handleDrop
   });
-  const draggedColumnAlreadyGrouped = drag.draggedColumnId !== null && groupBy.some((entry) => entry.columnId === drag.draggedColumnId);
+  const draggedColumnAlreadyGrouped = drag.draggedColumnId !== null && state.groupBy.some((entry) => entry.columnId === drag.draggedColumnId);
   const dragEligibleForGroupBy = drag.draggedColumnId !== null && groupByDraggableIds.has(drag.draggedColumnId) && !draggedColumnAlreadyGrouped;
-  const showGroupByBar = groupByBarVisibility === "always" || groupByBarVisibility === "auto" && (groupBy.length > 0 || dragEligibleForGroupBy);
+  const showGroupByBar = groupByBarVisibility === "always" || groupByBarVisibility === "auto" && (state.groupBy.length > 0 || dragEligibleForGroupBy);
   const headerGroupByDropTarget = drag.dropTarget?.kind === "group-by" ? drag.dropTarget : null;
-  function handleColumnSortChange(event) {
-    onColumnSortChange?.(event);
-    const entry = event.sort.find(
-      (candidate) => candidate.columnId === event.columnId
-    );
-    if (entry === void 0) {
-      announce(`${columnName(event.columnId)}, sort cleared`);
-      return;
-    }
-    const direction = entry.direction === "asc" ? "ascending" : "descending";
-    announce(
-      event.sort.length > 1 ? `${columnName(event.columnId)} sorted ${direction}, key ${String(event.sort.indexOf(entry) + 1)} of ${String(event.sort.length)}` : `${columnName(event.columnId)} sorted ${direction}`
-    );
-  }
-  const columnSort = useColumnSort({
-    sort,
-    setSort,
-    onColumnSortChange: handleColumnSortChange
-  });
-  function handlePaginationChange(event) {
-    onPaginationChange?.(event);
-    announce(
-      `Page ${String(event.pagination.pageIndex + 1)} of ${String(event.pageCount)}`
-    );
-  }
-  const paginationApi = usePagination({
-    pagination,
-    setPagination,
-    rows: displayRows,
-    onPaginationChange: handlePaginationChange
-  });
-  const [previous, setPrevious] = useState5({ filter, sort, groupBy });
-  if (previous.filter !== filter || previous.sort !== sort || previous.groupBy !== groupBy) {
-    setPrevious({ filter, sort, groupBy });
-    if (pagination.pageIndex !== 0) {
-      setPagination({ ...pagination, pageIndex: 0 });
-    }
-  }
-  const selection = useGridSelection({
-    rows: displayDataRows,
-    columns: resolved,
-    selectable,
-    rowSelection,
-    setRowSelection,
-    columnSelection,
-    setColumnSelection,
-    cellSelection,
-    setCellSelection,
-    callbacks,
-    announce,
-    columnName
-  });
+  const pagerContext = {
+    pagination: state.pagination,
+    currentPage: Math.min(state.pagination.pageIndex + 1, view.pageCount),
+    pageCount: view.pageCount,
+    pageSizeOptions: pager?.sizeOptions,
+    goToPage: controller.goToPage,
+    nextPage: controller.nextPage,
+    previousPage: controller.previousPage,
+    setPageSize: controller.setPageSize
+  };
+  const selection = useGridSelection({ controller, state, selectable });
   const multiselectable = selection.rowMode === "multiple" || selection.columnMode === "multiple";
-  useEffect2(() => {
+  useEffect3(() => {
     for (const listener of subscribersRef.current) {
       listener();
     }
-  }, [
-    shownRows,
-    aggregatedRows,
-    resolved,
-    sizing,
-    order,
-    sort,
-    groupBy,
-    expansion,
-    paginationSnapshot,
-    paginatedRows.pageCount,
-    grandTotal,
-    rowSelection,
-    columnSelection,
-    cellSelection,
-    nav.focus
-  ]);
+  }, [view, state, nav.focus]);
   useImperativeHandle(ref, () => ({
     get element() {
       return viewportRef.current;
     },
     get table() {
-      return tableRef.current;
+      return bodyTableRef.current;
     },
-    getRows: () => shownRows,
-    // `aggregatedRows`, not the plain `displayRows` it's derived from: the
-    // same array shape and content, except every group header's own
-    // `aggregates` field is populated — the whole reason `getDisplayRows()`
-    // is where a consumer reads a specific group's computed results from.
-    getDisplayRows: () => aggregatedRows,
-    getColumns: () => resolved,
-    getColumnSizing: () => sizing,
-    getColumnOrder: () => order,
-    getColumnSort: () => sort,
-    getGroupBy: () => groupBy,
-    getGroupExpansion: () => expansion,
-    getPagination: () => paginationSnapshot,
-    getPageCount: () => paginatedRows.pageCount,
-    getAggregates: () => grandTotal,
-    getRowSelection: () => rowSelection,
-    getColumnSelection: () => columnSelection,
-    getCellSelection: () => cellSelection,
+    getRows: () => controller.getView().rows,
+    // Every group header's own `aggregates` field is populated here — the
+    // whole reason `getDisplayRows()` is where a consumer reads a specific
+    // group's computed results from.
+    getDisplayRows: () => controller.getView().displayRows,
+    getPageRows: () => controller.getView().pageRows,
+    getColumns: () => controller.getView().columns,
+    getDataColumns: () => controller.getView().dataColumns,
+    getColumnSizing: () => controller.getState().columnSizing,
+    getColumnOrder: () => controller.getState().columnOrder,
+    getColumnVisibility: () => controller.getState().columnVisibility,
+    getColumnSort: () => controller.getState().columnSort,
+    getFilter: () => controller.getState().filter,
+    getGroupBy: () => controller.getState().groupBy,
+    getGroupExpansion: () => controller.getState().groupExpansion,
+    getPagination: readPagination,
+    getPageCount: () => controller.getView().pageCount,
+    getAggregates: () => controller.getView().grandTotal,
+    getRowSelection: () => controller.getState().rowSelection,
+    getSelectedRows: readSelectedRows,
+    getColumnSelection: () => controller.getState().columnSelection,
+    getCellSelection: () => controller.getState().cellSelection,
     getFocusedCell: () => nav.focus,
+    getState: controller.getState,
+    restoreState: controller.restoreState,
     focusCell: nav.focusCell,
-    clearSelection: selection.clear,
-    selectAllRows: selection.selectAllRows,
-    expandAllGroups: grouping.expandAll,
-    collapseAllGroups: () => {
-      grouping.collapseAll(displayRows);
+    clearSelection: controller.clearSelection,
+    selectAllRows: controller.selectAllRows,
+    selectRows: controller.selectRows,
+    expandAllGroups: controller.expandAllGroups,
+    collapseAllGroups: controller.collapseAllGroups,
+    goToPage: controller.goToPage,
+    nextPage: controller.nextPage,
+    previousPage: controller.previousPage,
+    setPageSize: controller.setPageSize,
+    showColumns: controller.showColumns,
+    hideColumns: controller.hideColumns,
+    setFilter: controller.setFilter,
+    setColumnSort: controller.setColumnSort,
+    setGroupBy: controller.setGroupBy,
+    setGroupExpansion: controller.setGroupExpansion,
+    setPagination: controller.setPagination,
+    setColumnSizing: controller.setColumnSizing,
+    setColumnOrder: controller.setColumnOrder,
+    setColumnVisibility: controller.setColumnVisibility,
+    setRowSelection: controller.setRowSelection,
+    setColumnSelection: controller.setColumnSelection,
+    setCellSelection: controller.setCellSelection,
+    autoFitColumn: (columnId) => {
+      const entry = controller.getView().columns.find((candidate) => candidate.id === columnId);
+      if (entry !== void 0) {
+        resize.sizeToContent(entry);
+      }
     },
-    goToPage: paginationApi.goToPage,
-    nextPage: paginationApi.nextPage,
-    previousPage: paginationApi.previousPage,
-    setPageSize: paginationApi.setPageSize,
     scrollToRow: (rowId, options) => {
-      const index = paginatedRows.rows.findIndex(
+      const index = controller.getView().pageRows.findIndex(
         (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,25 +1974,41 @@ 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,
-        grouping,
+        columns: view.columns,
+        definitions,
+        groupBy: state.groupBy,
+        controller,
         columnName,
         headerDragEligible: dragEligibleForGroupBy,
         headerDragBlocked: draggedColumnAlreadyGrouped,
-        headerDropTarget: headerGroupByDropTarget
+        headerDropTarget: headerGroupByDropTarget,
+        messages
       }
     ),
-    /* @__PURE__ */ jsxs6(
-      "table",
+    /* @__PURE__ */ jsxs7(
+      "div",
       {
-        ref: tableRef,
-        role: groupBy.length > 0 ? "treegrid" : "grid",
-        "aria-rowcount": aggregatedRows.length + 1,
-        "aria-colcount": resolved.length,
+        className: "gridkit-data-grid-tables",
+        role: state.groupBy.length > 0 ? "treegrid" : "grid",
+        "aria-rowcount": view.displayRows.length + 1,
+        "aria-colcount": view.columns.length,
         ...ariaAttr(multiselectable, "aria-multiselectable", true),
         ...ariaAttr(labelledBy !== void 0, "aria-labelledby", labelledBy),
         ...ariaAttr(
@@ -2235,83 +2029,117 @@ 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(view.columns) },
+              className: classNames(gridTableClassName, "gridkit-data-grid-header"),
+              children: [
+                /* @__PURE__ */ jsx10(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx10(
+                  GridHeader,
+                  {
+                    columns: view.columns,
+                    resize,
+                    drag,
+                    controller,
+                    columnSort: state.columnSort,
+                    sortableColumns,
+                    groupBy: state.groupBy,
+                    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(view.columns) },
+                  className: gridTableClassName,
+                  children: [
+                    /* @__PURE__ */ jsx10(GridColgroup, { columns: view.columns }),
+                    /* @__PURE__ */ jsx10(
+                      GridBody,
+                      {
+                        columns: view.columns,
+                        definitions,
+                        rows: view.pageRows,
+                        activeColumnId: resize.activeColumnId,
+                        nav,
+                        selection,
+                        controller,
+                        aggregates,
+                        groupAggregateDisplay,
+                        virtualRange: virtualized ? virtualizer : null,
+                        infiniteScroll,
+                        sentinelRef,
+                        locale,
+                        getRowProps,
+                        onRowClick,
+                        onRowDoubleClick,
+                        messages
+                      }
+                    )
+                  ]
+                }
+              )
             }
           ),
-          activeAggregates.length > 0 && /* @__PURE__ */ jsx9(
-            GridFooter,
+          aggregates.length > 0 && /* @__PURE__ */ jsxs7(
+            "table",
             {
-              columns: resolved,
-              aggregates: activeAggregates,
-              results: grandTotal,
-              rows: shownRows.map((entry) => entry.row)
+              style: { width: totalColumnWidth(view.columns) },
+              className: classNames(
+                gridTableClassName,
+                "gridkit-data-grid-footer"
+              ),
+              children: [
+                /* @__PURE__ */ jsx10(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx10(
+                  GridFooter,
+                  {
+                    columns: view.columns,
+                    aggregates,
+                    results: view.grandTotal,
+                    rows: view.rows.map((entry) => entry.row),
+                    locale
+                  }
+                )
+              ]
             }
           )
         ]
       }
     ),
-    paginated && (pager?.template ? pager.template({
-      pagination: paginationApi.pagination,
-      currentPage: paginationApi.currentPage,
-      pageCount: paginationApi.pageCount,
-      pageSizeOptions: pager.sizeOptions,
-      goToPage: paginationApi.goToPage,
-      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 })
+    paginated && (pager?.template ? pager.template(pagerContext) : /* @__PURE__ */ jsx10(GridPager, { pager: pagerContext, config: pager, messages }))
   ] });
 }
 
+// src/index.ts
+import { serializeGridState } from "@gridkitjs/core";
+
 // src/DataGrid/hooks/usePaginationState.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 
 // src/DataGrid/hooks/useGridSnapshot.ts
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useGridSnapshot(gridRef, getSnapshot, fallback) {
-  const subscribe = useCallback(
+  const subscribe = useCallback2(
     (listener) => {
       const api = gridRef.current;
       if (api === null) {
@@ -2322,7 +2150,7 @@ function useGridSnapshot(gridRef, getSnapshot, fallback) {
     },
     [gridRef]
   );
-  return useSyncExternalStore(subscribe, () => {
+  return useSyncExternalStore3(subscribe, () => {
     const api = gridRef.current;
     return api === null ? fallback : getSnapshot(api);
   });
@@ -2333,12 +2161,12 @@ var FALLBACK_PAGINATION = { pageIndex: 0, pageSize: 0 };
 function usePaginationState(gridRef) {
   const pagination = useGridSnapshot(
     gridRef,
-    useCallback2((api) => api.getPagination(), []),
+    useCallback3((api) => api.getPagination(), []),
     FALLBACK_PAGINATION
   );
   const pageCount = useGridSnapshot(
     gridRef,
-    useCallback2((api) => api.getPageCount(), []),
+    useCallback3((api) => api.getPageCount(), []),
     0
   );
   return {
@@ -2360,18 +2188,18 @@ function usePaginationState(gridRef) {
 }
 
 // src/DataGrid/hooks/useGroupByState.ts
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4 } from "react";
 var FALLBACK_GROUP_BY = [];
 var FALLBACK_EXPANSION = [];
 function useGroupByState(gridRef) {
   const groupBy = useGridSnapshot(
     gridRef,
-    useCallback3((api) => api.getGroupBy(), []),
+    useCallback4((api) => api.getGroupBy(), []),
     FALLBACK_GROUP_BY
   );
   const groupExpansion = useGridSnapshot(
     gridRef,
-    useCallback3((api) => api.getGroupExpansion(), []),
+    useCallback4((api) => api.getGroupExpansion(), []),
     FALLBACK_EXPANSION
   );
   return {
@@ -2387,34 +2215,34 @@ function useGroupByState(gridRef) {
 }
 
 // src/DataGrid/hooks/useColumnSortState.ts
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 var FALLBACK_SORT = [];
 function useColumnSortState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback4((api) => api.getColumnSort(), []),
+    useCallback5((api) => api.getColumnSort(), []),
     FALLBACK_SORT
   );
 }
 
 // src/DataGrid/hooks/useSelectionState.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 var FALLBACK_SELECTION = [];
 var FALLBACK_CELL_SELECTION = null;
 function useSelectionState(gridRef) {
   const rowSelection = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getRowSelection(), []),
+    useCallback6((api) => api.getRowSelection(), []),
     FALLBACK_SELECTION
   );
   const columnSelection = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getColumnSelection(), []),
+    useCallback6((api) => api.getColumnSelection(), []),
     FALLBACK_SELECTION
   );
   const cellSelection = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getCellSelection(), []),
+    useCallback6((api) => api.getCellSelection(), []),
     FALLBACK_CELL_SELECTION
   );
   return {
@@ -2431,43 +2259,74 @@ function useSelectionState(gridRef) {
 }
 
 // src/DataGrid/hooks/useAggregateState.ts
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 var FALLBACK_AGGREGATES = /* @__PURE__ */ new Map();
 function useAggregateState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback6((api) => api.getAggregates(), []),
+    useCallback7((api) => api.getAggregates(), []),
     FALLBACK_AGGREGATES
   );
 }
 
 // src/DataGrid/hooks/useColumnSizingState.ts
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback8 } from "react";
 var FALLBACK_SIZING = {};
 function useColumnSizingState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback7((api) => api.getColumnSizing(), []),
+    useCallback8((api) => api.getColumnSizing(), []),
     FALLBACK_SIZING
   );
 }
 
 // src/DataGrid/hooks/useColumnOrderState.ts
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 var FALLBACK_ORDER = [];
 function useColumnOrderState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback8((api) => api.getColumnOrder(), []),
+    useCallback9((api) => api.getColumnOrder(), []),
     FALLBACK_ORDER
   );
 }
+
+// src/DataGrid/hooks/useColumnVisibilityState.ts
+import { useCallback as useCallback10 } from "react";
+var FALLBACK_VISIBILITY = {};
+function useColumnVisibilityState(gridRef) {
+  return useGridSnapshot(
+    gridRef,
+    useCallback10((api) => api.getColumnVisibility(), []),
+    FALLBACK_VISIBILITY
+  );
+}
+
+// src/DataGrid/hooks/useFilterState.ts
+import { useCallback as useCallback11, useState as useState9 } from "react";
+function useFilterState(gridRef) {
+  const [fallback] = useState9(() => []);
+  const filter = useGridSnapshot(
+    gridRef,
+    useCallback11((api) => api.getFilter(), []),
+    fallback
+  );
+  return {
+    filter,
+    setFilter: (next) => {
+      gridRef.current?.setFilter(next);
+    }
+  };
+}
 export {
-  DataGridComponent,
+  DataGrid,
+  serializeGridState,
   useAggregateState,
   useColumnOrderState,
   useColumnSizingState,
   useColumnSortState,
+  useColumnVisibilityState,
+  useFilterState,
   useGroupByState,
   usePaginationState,
   useSelectionState