@gridkitjs/react 0.9.0 → 0.10.0

package/dist/index.js

@@ -1,24 +1,19 @@
+"use client";
+
 // src/DataGrid/DataGrid.tsx
 import {
-  useEffect as useEffect4,
+  useEffect as useEffect3,
   useImperativeHandle,
-  useMemo as useMemo4,
-  useRef as useRef6,
-  useState as useState6
+  useMemo as useMemo3,
+  useRef as useRef4,
+  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
@@ -29,7 +24,13 @@ function GridColgroup({ columns }) {
 
 // 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) {
@@ -44,27 +45,19 @@ 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(headerTable, bodyTable, focus) {
-  const row = focus.rowIndex === HEADER_ROW ? headerTable?.tHead?.rows[0] ?? null : bodyTable?.tBodies[0]?.rows[focus.rowIndex] ?? null;
-  if (row === null) {
-    return null;
-  }
-  const columnIndex = Math.min(focus.columnIndex, row.cells.length - 1);
-  return row.cells[columnIndex] ?? null;
-}
 function useGridNavigation({
   headerTableRef,
   bodyTableRef,
@@ -73,120 +66,46 @@ function useGridNavigation({
   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;
-    }
-    const cell = cellAt(headerTableRef.current, bodyTableRef.current, {
-      rowIndex: focus.rowIndex,
-      columnIndex: focus.columnIndex
-    });
-    if (cell !== null) {
-      pending.current = false;
-      cell.focus();
-      return;
-    }
-    if (virtualRange != null && focus.rowIndex !== HEADER_ROW && (focus.rowIndex < virtualRange.startIndex || focus.rowIndex > virtualRange.endIndex)) {
-      virtualRange.scrollToIndex(focus.rowIndex);
-      return;
-    }
-    pending.current = false;
-  }, [
-    headerTableRef,
-    bodyTableRef,
-    focus.rowIndex,
-    focus.columnIndex,
-    virtualRange
-  ]);
-  function pageSize() {
-    const table = bodyTableRef.current;
-    const firstRow = table?.tBodies[0]?.rows[0];
-    const viewport = table?.parentElement;
-    if (firstRow === void 0 || viewport === null || viewport === void 0 || firstRow.offsetHeight === 0) {
-      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,
@@ -194,186 +113,32 @@ 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
   };
 }
 
@@ -414,9 +179,10 @@ function GridHeader({
   columns,
   resize,
   drag,
-  sort,
+  controller,
+  columnSort,
   sortableColumns,
-  grouping,
+  groupBy,
   groupableColumns,
   groupToggleIconColumns,
   nav,
@@ -433,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({
@@ -491,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") {
@@ -559,7 +327,7 @@ function GridHeader({
                 },
                 onClick: (event) => {
                   event.stopPropagation();
-                  grouping.toggleGroupBy(entry.id);
+                  controller.toggleGroupBy(entry.id);
                 },
                 children: /* @__PURE__ */ jsx2(GroupIcon, {})
               }
@@ -584,7 +352,9 @@ function GridHeader({
                   event.stopPropagation();
                 },
                 onClick: (event) => {
-                  sort.toggle(entry, { shiftKey: event.shiftKey });
+                  controller.toggleColumnSort(entry.id, {
+                    stack: event.shiftKey
+                  });
                 },
                 children: [
                   sortDirection === null ? /* @__PURE__ */ jsx2(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx2(ChevronUpIcon, {}),
@@ -636,65 +406,82 @@ 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 jsx3, 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);
-  }
+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,
@@ -705,10 +492,11 @@ function GridGroupRowComponent({
   focused,
   aggregates,
   results,
-  columns,
+  definitions,
+  locale,
+  cellMessages,
   ref
 }) {
-  const byId = new Map(columns.map((entry) => [entry.id, entry]));
   return /* @__PURE__ */ jsx3(
     "tr",
     {
@@ -750,9 +538,10 @@ 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: [
                   "(",
@@ -762,12 +551,15 @@ function GridGroupRowComponent({
                 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,
                     ": ",
@@ -798,6 +590,7 @@ function GridGroupSummaryRowComponent({
   results,
   aggregates,
   columns,
+  locale,
   ref
 }) {
   return /* @__PURE__ */ jsx4(
@@ -816,7 +609,6 @@ function GridGroupSummaryRowComponent({
         const specs = aggregates.filter(
           (candidate) => candidate.columnId === entry.id
         );
-        const { column } = entry;
         return /* @__PURE__ */ jsxs3(
           "td",
           {
@@ -833,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]
               )
             ]
@@ -853,7 +650,10 @@ 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 jsx5 } from "react/jsx-runtime";
 function GridRowComponent({
@@ -869,17 +669,27 @@ function GridRowComponent({
   focusedColumnIndex,
   rowsSelectable,
   cellsSelectable,
+  locale,
+  cellMessages,
+  rowClassName,
+  rowAttributes,
   ref
 }) {
   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;
@@ -907,7 +717,7 @@ function GridRowComponent({
               datasetIndex,
               rowId,
               selected
-            }) : value
+            }) : formatCellValue2(value, column, locale, row, cellMessages)
           },
           id
         );
@@ -920,39 +730,6 @@ var GridRow_default = GridRow;
 
 // src/DataGrid/components/GridBody.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function rowIndexOf(row) {
-  const attribute = row.getAttribute("data-gridkit-row-index");
-  return attribute === null ? null : Number(attribute);
-}
-function cellFrom(target) {
-  if (!(target instanceof Element)) {
-    return null;
-  }
-  const cell = target.closest("td[data-gridkit-column]");
-  const row = cell?.parentElement;
-  const columnId = cell?.getAttribute("data-gridkit-column");
-  const rowIndex = row === null || row === void 0 ? null : rowIndexOf(row);
-  if (!(cell instanceof HTMLTableCellElement) || !(row instanceof HTMLTableRowElement) || columnId === null || columnId === void 0 || rowIndex === null) {
-    return null;
-  }
-  return {
-    rowIndex,
-    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");
-  const rowIndex = row === null ? null : rowIndexOf(row);
-  if (!(row instanceof HTMLTableRowElement) || groupId === null || groupId === void 0 || rowIndex === null) {
-    return null;
-  }
-  return { rowIndex, groupId };
-}
 function groupAriaMeta(rows) {
   const totals = /* @__PURE__ */ new Map();
   for (const entry of rows) {
@@ -976,22 +753,40 @@ function groupAriaMeta(rows) {
 }
 function GridBody({
   columns,
+  definitions,
   rows,
   activeColumnId,
   nav,
   selection,
-  grouping,
+  controller,
   aggregates,
   groupAggregateDisplay,
   virtualRange,
   infiniteScroll,
-  sentinelRef
+  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;
@@ -999,12 +794,36 @@ 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));
+    }
+  }
+  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(
@@ -1024,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);
@@ -1040,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);
@@ -1061,7 +885,7 @@ function GridBody({
       },
       children: [
         virtualRange !== null && virtualRange.offsetBefore > 0 && // `aria-hidden` and carrying neither `data-gridkit-column` nor
-        // `data-gridkit-group`/`data-gridkit-row-index`, so `cellFrom`/
+        // `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
@@ -1078,6 +902,7 @@ function GridBody({
         ) }),
         visibleRows.map((entry) => {
           if (!("kind" in entry)) {
+            const rowProps = rowPropsOf(entry.rowId);
             return /* @__PURE__ */ jsx6(
               GridRow_default,
               {
@@ -1093,7 +918,11 @@ function GridBody({
                 selectedColumnId: selectedCell?.rowId === entry.rowId ? selectedCell.columnId : null,
                 focusedColumnIndex: nav.focus.rowIndex === entry.rowIndex ? nav.focus.columnIndex : null,
                 rowsSelectable: rowMode !== false,
-                cellsSelectable: cellMode !== false
+                cellsSelectable: cellMode !== false,
+                locale,
+                cellMessages,
+                rowClassName: rowProps.className,
+                rowAttributes: rowProps.attributes
               },
               entry.rowId
             );
@@ -1109,7 +938,8 @@ function GridBody({
                 datasetIndex: entry.datasetIndex,
                 results: entry.aggregates,
                 aggregates,
-                columns
+                columns,
+                locale
               },
               `${entry.groupId}-summary`
             );
@@ -1121,7 +951,7 @@ function GridBody({
               columnCount: columns.length,
               groupId: entry.groupId,
               level: entry.level,
-              columnLabel: columns.find((column) => column.id === entry.columnId)?.label ?? entry.columnId,
+              groupColumn: definitions.get(entry.columnId) ?? { field: entry.columnId },
               value: entry.value,
               expanded: entry.expanded,
               count: entry.count,
@@ -1131,7 +961,9 @@ function GridBody({
               setsize: ariaMeta.get(entry.groupId)?.setsize ?? 1,
               aggregates: groupAggregateDisplay === "inline" ? aggregates : [],
               results: entry.aggregates,
-              columns,
+              definitions,
+              locale,
+              cellMessages,
               focused: nav.focus.rowIndex === entry.rowIndex
             },
             entry.groupId
@@ -1148,7 +980,7 @@ function GridBody({
           }
         ) }),
         infiniteScroll?.hasMore && /* @__PURE__ */ jsxs4(Fragment, { children: [
-          infiniteScroll.isLoadingMore === true && /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", className: "grid-loading-row", children: /* @__PURE__ */ jsx6("td", { colSpan: columns.length, className: "grid-loading-cell", children: infiniteScroll.loadingTemplate ? infiniteScroll.loadingTemplate() : "Loading more\u2026" }) }),
+          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",
             {
@@ -1176,13 +1008,13 @@ function GridFooter({
   columns,
   aggregates,
   results,
-  rows
+  rows,
+  locale
 }) {
   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__ */ jsx7(
       "td",
       {
@@ -1190,10 +1022,15 @@ function GridFooter({
         "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]
         )
       },
@@ -1205,222 +1042,139 @@ function GridFooter({
 // src/DataGrid/components/GridPager.tsx
 import { paginationWindow } from "@gridkitjs/core";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function GridPager({ pager, config }) {
+function GridPager({ pager, config, messages }) {
   const { pagination, pageCount, currentPage } = pager;
   const variant = config?.variant ?? "compact";
   const sizeOptions = config?.sizeOptions;
-  return /* @__PURE__ */ jsxs5("div", { className: "gridkit-grid-pager", role: "group", "aria-label": "Pagination", children: [
-    /* @__PURE__ */ jsx8(
-      "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__ */ 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": `Page ${String(entry)}`,
-          "aria-current": entry === currentPage ? "page" : void 0,
-          onClick: () => {
-            pager.goToPage(entry - 1);
-          },
-          children: entry
-        },
-        entry
-      )
-    ) : /* @__PURE__ */ jsxs5("span", { className: "grid-pager-status", children: [
-      "Page ",
-      pageCount === 0 ? 0 : currentPage,
-      " of ",
-      pageCount
-    ] }),
-    /* @__PURE__ */ jsx8(
-      "button",
-      {
-        type: "button",
-        className: "grid-pager-button",
-        disabled: pagination.pageIndex >= pageCount - 1,
-        onClick: () => {
-          pager.nextPage();
-        },
-        children: "Next"
-      }
-    ),
-    sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs5("label", { className: "grid-pager-page-size", children: [
-      "Rows per page",
-      /* @__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))
-        }
-      )
-    ] })
-  ] });
+  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);
-      },
-      onEnd() {
-        const dropped = target;
-        reset();
-        if (dragging && dropped !== null) {
-          onDrop(dropped, id);
         }
+        setDrag(state);
       },
-      // 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,
@@ -1447,25 +1201,28 @@ function useGroupByDrag({
 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(
@@ -1476,7 +1233,7 @@ function GroupByBar({
     if (beforeColumnId === void 0) {
       return;
     }
-    grouping.moveGroupBy(columnId, beforeColumnId);
+    controller.moveGroupBy(columnId, beforeColumnId);
   }
   return /* @__PURE__ */ jsxs6(
     "div",
@@ -1488,9 +1245,9 @@ function GroupByBar({
       ),
       "data-gridkit-group-by-bar": "",
       role: "group",
-      "aria-label": "Grouped by",
+      "aria-label": messages.groupByBarLabel,
       children: [
-        showPlaceholder && /* @__PURE__ */ jsx9("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;
@@ -1506,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);
@@ -1528,12 +1289,12 @@ function GroupByBar({
                   {
                     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"
                   }
@@ -1562,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,
@@ -1573,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) {
@@ -1609,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;
@@ -1708,8 +1430,7 @@ function useColumnResize({
     if (measured === null) {
       return;
     }
-    commit(
-      sizing,
+    controller.resizeColumn(
       entry.id,
       sizeColumnToContent(
         measured,
@@ -1719,8 +1440,7 @@ function useColumnResize({
     );
   }
   function nudge(entry, delta) {
-    commit(
-      sizing,
+    controller.resizeColumn(
       entry.id,
       clampColumnWidth(
         entry.width + delta,
@@ -1732,235 +1452,104 @@ 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/useGridController.ts
+import { useState as useState6, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  createGridController
+} from "@gridkitjs/core";
+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 { useCallback, useEffect as useEffect2, useRef as useRef4 } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { attachInfiniteScroll } from "@gridkitjs/dom";
 function useInfiniteScroll({
   rootRef,
   sentinelRef,
   config
 }) {
-  const hasMore = config?.hasMore ?? false;
-  const isLoadingMore = config?.isLoadingMore ?? false;
-  const rootMargin = config?.rootMargin ?? "200px";
-  const latestRef = useRef4({
-    hasMore,
-    isLoadingMore,
-    onLoadMore: config?.onLoadMore
-  });
-  useEffect2(() => {
-    latestRef.current = {
-      hasMore,
-      isLoadingMore,
-      onLoadMore: config?.onLoadMore
-    };
-  });
-  const firedRef = useRef4(false);
-  const intersectingRef = useRef4(false);
-  const maybeLoadMore = useCallback(() => {
-    const current = latestRef.current;
-    if (!intersectingRef.current || !current.hasMore || current.isLoadingMore || firedRef.current) {
-      return;
-    }
-    firedRef.current = true;
-    current.onLoadMore?.();
-  }, []);
-  const wasLoadingRef = useRef4(isLoadingMore);
-  useEffect2(() => {
-    if (wasLoadingRef.current && !isLoadingMore) {
-      firedRef.current = false;
-      maybeLoadMore();
-    }
-    wasLoadingRef.current = isLoadingMore;
-  }, [isLoadingMore, maybeLoadMore]);
+  const scroll = useRef2(null);
   useEffect2(() => {
-    if (!hasMore) {
-      return void 0;
-    }
     const root = rootRef.current;
-    const sentinel = sentinelRef.current;
-    if (root === null || sentinel === null) {
+    if (root === null) {
       return void 0;
     }
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[entries.length - 1];
-        if (entry === void 0) {
-          return;
-        }
-        intersectingRef.current = entry.isIntersecting;
-        maybeLoadMore();
-      },
-      { root, rootMargin }
-    );
-    observer.observe(sentinel);
+    const attached = attachInfiniteScroll(root, {
+      sentinel: null,
+      hasMore: false
+    });
+    scroll.current = attached;
     return () => {
-      observer.disconnect();
-      intersectingRef.current = false;
+      attached.detach();
+      scroll.current = null;
     };
-  }, [hasMore, rootMargin, rootRef, sentinelRef, maybeLoadMore]);
-}
-
-// src/DataGrid/usePagination.ts
-import {
-  paginateRows
-} from "@gridkitjs/core";
-function usePagination({
-  pagination,
-  setPagination,
-  rows,
-  onPaginationChange
-}) {
-  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
-      });
-    });
-  }
-  function goToPage(nextPageIndex) {
-    const { pageIndex: clamped } = paginateRows(rows, {
-      ...pagination,
-      pageIndex: nextPageIndex
+  }, [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/useRowGrouping.ts
-import {
-  collapseAllGroups,
-  expandAllGroups,
-  moveGroupByBefore,
-  toggleGroupExpansion
-} from "@gridkitjs/core";
-function useRowGrouping({
-  groupBy,
-  setGroupBy,
-  expansion,
-  setExpansion,
-  onGroupByChange,
-  onGroupExpansionChange
-}) {
-  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 });
-    });
-  }
-  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
-    );
-  }
-  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
-  };
+// 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/useRowVirtualizer.ts
-import {
-  useCallback as useCallback2,
-  useEffect as useEffect3,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef5,
-  useState as useState5
-} from "react";
-import { visibleRange } from "@gridkitjs/core";
+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,
@@ -1968,339 +1557,147 @@ function useRowVirtualizer({
   estimatedRowHeight,
   overscan
 }) {
-  const rowCount = rows.length;
-  const heightsRef = useRef5([]);
-  const scrollTopRef = useRef5(0);
-  const viewportHeightRef = useRef5(0);
-  const elementsRef = useRef5(/* @__PURE__ */ new Map());
-  const indexByElementRef = useRef5(/* @__PURE__ */ new Map());
-  const refCallbacksRef = useRef5(
-    /* @__PURE__ */ new Map()
-  );
-  const observerRef = useRef5(null);
-  const pendingScrollRef = useRef5(void 0);
-  const [range, setRange] = useState5(EMPTY_RANGE);
-  const recompute = useCallback2(() => {
-    setRange(
-      enabled ? visibleRange(
-        heightsRef.current,
-        estimatedRowHeight,
-        scrollTopRef.current,
-        viewportHeightRef.current,
-        overscan
-      ) : rowCount === 0 ? EMPTY_RANGE : {
-        startIndex: 0,
-        endIndex: rowCount - 1,
-        offsetBefore: 0,
-        offsetAfter: 0
-      }
-    );
-  }, [enabled, rowCount, estimatedRowHeight, overscan]);
-  useLayoutEffect2(() => {
-    heightsRef.current = new Array(rowCount).fill(
-      void 0
-    );
-    recompute();
-  }, [rows, rowCount, recompute]);
-  useLayoutEffect2(() => {
-    if (!enabled) {
-      return void 0;
-    }
+  const [virtualizer, setVirtualizer] = useState7(null);
+  const [range, setRange] = useState7(EMPTY_RANGE);
+  useLayoutEffect4(() => {
     const element = bodyScrollRef.current;
-    if (element === null) {
+    if (!enabled || element === null) {
       return void 0;
     }
-    scrollTopRef.current = element.scrollTop;
-    viewportHeightRef.current = element.clientHeight;
-    recompute();
-    const handleScroll = () => {
-      scrollTopRef.current = element.scrollTop;
-      recompute();
-    };
-    element.addEventListener("scroll", handleScroll, { passive: true });
-    const resizeObserver = new ResizeObserver(() => {
-      viewportHeightRef.current = element.clientHeight;
-      recompute();
+    const created = createRowVirtualizer(element, {
+      estimatedRowHeight,
+      overscan,
+      onRange: setRange
     });
-    resizeObserver.observe(element);
+    setVirtualizer(created);
     return () => {
-      element.removeEventListener("scroll", handleScroll);
-      resizeObserver.disconnect();
+      created.destroy();
     };
-  }, [enabled, bodyScrollRef, recompute]);
-  useEffect3(() => {
-    if (!enabled) {
-      return void 0;
-    }
-    const observer = new ResizeObserver((entries) => {
-      let changed = false;
-      for (const entry of entries) {
-        const index = indexByElementRef.current.get(entry.target);
-        if (index === void 0) continue;
-        const height = entry.target.getBoundingClientRect().height;
-        if (heightsRef.current[index] !== height) {
-          heightsRef.current[index] = height;
-          changed = true;
-        }
-      }
-      if (changed) {
-        recompute();
-      }
-    });
-    observerRef.current = observer;
-    for (const element of elementsRef.current.values()) {
-      observer.observe(element);
-    }
-    return () => {
-      observer.disconnect();
-      observerRef.current = null;
-    };
-  }, [enabled, recompute]);
-  function measureRow(index) {
-    let callback = refCallbacksRef.current.get(index);
-    if (callback === void 0) {
-      callback = (element) => {
-        const observer = observerRef.current;
-        const previous = elementsRef.current.get(index);
-        if (previous !== void 0) {
-          observer?.unobserve(previous);
-          indexByElementRef.current.delete(previous);
-          elementsRef.current.delete(index);
-        }
-        if (element === null) {
-          return;
-        }
-        elementsRef.current.set(index, element);
-        indexByElementRef.current.set(element, index);
-        observer?.observe(element);
-      };
-      refCallbacksRef.current.set(index, callback);
-    }
-    return callback;
-  }
-  useEffect3(() => {
-    const pending = pendingScrollRef.current;
-    if (pending === void 0) {
-      return;
-    }
-    const element = elementsRef.current.get(pending.index);
-    if (element === void 0) {
-      return;
-    }
-    element.scrollIntoView(pending.options);
-    pendingScrollRef.current = void 0;
-  }, [range]);
-  function estimateOffsetBefore(index) {
-    let total = 0;
-    for (let current = 0; current < index; current++) {
-      total += heightsRef.current[current] ?? estimatedRowHeight;
-    }
-    return total;
-  }
-  function scrollToIndex(index, options) {
-    const element = bodyScrollRef.current;
-    if (element === null || rowCount === 0) {
-      return;
-    }
-    const clamped = Math.max(0, Math.min(index, rowCount - 1));
-    const mounted = elementsRef.current.get(clamped);
-    if (mounted !== void 0) {
-      mounted.scrollIntoView(options);
-      return;
-    }
-    pendingScrollRef.current = { index: clamped, options };
-    element.scrollTop = estimateOffsetBefore(clamped);
-  }
+  }, [enabled, bodyScrollRef, estimatedRowHeight, overscan]);
+  useLayoutEffect4(() => {
+    virtualizer?.setRowCount(rows.length);
+    virtualizer?.resetHeights();
+  }, [virtualizer, rows]);
   return {
     startIndex: range.startIndex,
     endIndex: range.endIndex,
     offsetBefore: range.offsetBefore,
     offsetAfter: range.offsetAfter,
-    measureRow,
-    scrollToIndex
+    measureRow: virtualizer?.measureRow ?? ignoreRow,
+    scrollToIndex: (index, options) => {
+      virtualizer?.scrollToIndex(index, options);
+    }
   };
 }
 
 // src/DataGrid/DataGrid.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var DEFAULT_PAGE_SIZE = 25;
 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,
-  infiniteScroll,
-  aggregates,
-  groupAggregateDisplay = "inline",
-  height,
-  virtualized = false,
-  overscan = 4,
-  estimatedRowHeight = 40,
-  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 = useRef6(null);
-  const headerTableRef = useRef6(null);
-  const bodyTableRef = useRef6(null);
-  const bodyScrollRef = useRef6(null);
-  const sentinelRef = useRef6(null);
+  const viewportRef = 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 = useRef6(/* @__PURE__ */ new Set());
-  const [sizing, setSizing] = useState6(
-    defaultColumnSizing ?? {}
-  );
-  const [order, setOrder] = useState6(
-    defaultColumnOrder ?? []
-  );
-  const [sort, setSort] = useState6(defaultColumnSort ?? []);
-  const [groupBy, setGroupBy] = useState6(defaultGroupBy ?? []);
-  const [expansion, setExpansion] = useState6(
-    defaultGroupExpansion ?? []
-  );
-  const [filter] = useState6(defaultFilter ?? []);
-  const [pagination, setPagination] = useState6(
-    defaultPagination ?? { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }
-  );
-  const [announcement, setAnnouncement] = useState6("");
-  const [rowSelection, setRowSelection] = useState6(
-    defaultRowSelection ?? []
-  );
-  const [columnSelection, setColumnSelection] = useState6(
-    defaultColumnSelection ?? []
-  );
-  const [cellSelection, setCellSelection] = useState6(
-    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 subscribersRef = useRef4(/* @__PURE__ */ new Set());
+  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]
-  );
+    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: paginatedRows.rows,
+    rows: view.pageRows,
     bodyScrollRef,
     estimatedRowHeight,
     overscan
   });
-  useEffect4(() => {
+  useEffect3(() => {
     if (virtualized && height === void 0) {
       console.error(
-        "DataGridComponent: `virtualized` has no effect without `height` \u2014 a body with no bounded height has no viewport to window rows against."
+        "DataGrid: `virtualized` has no effect without `height` \u2014 a body with no bounded height has no viewport to window rows against."
       );
     }
   }, [virtualized, height]);
   const hasInfiniteScroll = infiniteScroll !== void 0;
-  useEffect4(() => {
+  useEffect3(() => {
     if (paginated && hasInfiniteScroll) {
       console.error(
-        "DataGridComponent: `paginated` and `infiniteScroll` are mutually exclusive \u2014 only `paginated` takes effect while both are set."
+        "DataGrid: `paginated` and `infiniteScroll` are mutually exclusive \u2014 only `paginated` takes effect while both are set."
       );
     }
   }, [paginated, hasInfiniteScroll]);
@@ -2309,46 +1706,31 @@ function DataGridComponent({
     sentinelRef,
     config: infiniteScroll
   });
-  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;
-    }
-    return typeof entry.label === "string" ? entry.label : entry.column.field;
-  }
-  function announce(message) {
-    setAnnouncement(message);
+    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({
-    // `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.
+    // `@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,
-    sizing,
-    setSizing,
-    columnSizeDefaults,
-    onColumnResize: handleColumnResize
+    controller,
+    columnSizeDefaults
   });
   function handleGroupByChange(event) {
     onGroupByChange?.(event);
@@ -2356,33 +1738,69 @@ 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({
     headerTableRef,
     bodyTableRef,
@@ -2392,131 +1810,82 @@ function DataGridComponent({
     // 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 definitions = useMemo3(
+    () => new Map(view.dataColumns.map((entry) => [entry.id, entry.column])),
+    [view.dataColumns]
   );
-  const groupByDraggableIds = useMemo4(
+  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] = useState6({ 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";
-  useEffect4(() => {
+  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;
@@ -2524,38 +1893,62 @@ function DataGridComponent({
     get table() {
       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;
@@ -2598,21 +1991,24 @@ function DataGridComponent({
     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__ */ jsxs7(
       "div",
       {
         className: "gridkit-data-grid-tables",
-        role: groupBy.length > 0 ? "treegrid" : "grid",
-        "aria-rowcount": aggregatedRows.length + 1,
-        "aria-colcount": resolved.length,
+        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(
@@ -2638,19 +2034,20 @@ function DataGridComponent({
             "table",
             {
               ref: headerTableRef,
-              style: { width: totalColumnWidth(resolved) },
+              style: { width: totalColumnWidth(view.columns) },
               className: classNames(gridTableClassName, "gridkit-data-grid-header"),
               children: [
-                /* @__PURE__ */ jsx10(GridColgroup, { columns: resolved }),
+                /* @__PURE__ */ jsx10(GridColgroup, { columns: view.columns }),
                 /* @__PURE__ */ jsx10(
                   GridHeader,
                   {
-                    columns: resolved,
+                    columns: view.columns,
                     resize,
                     drag,
-                    sort: columnSort,
+                    controller,
+                    columnSort: state.columnSort,
                     sortableColumns,
-                    grouping,
+                    groupBy: state.groupBy,
                     groupableColumns,
                     groupToggleIconColumns,
                     nav,
@@ -2672,24 +2069,30 @@ function DataGridComponent({
                 "table",
                 {
                   ref: bodyTableRef,
-                  style: { width: totalColumnWidth(resolved) },
+                  style: { width: totalColumnWidth(view.columns) },
                   className: gridTableClassName,
                   children: [
-                    /* @__PURE__ */ jsx10(GridColgroup, { columns: resolved }),
+                    /* @__PURE__ */ jsx10(GridColgroup, { columns: view.columns }),
                     /* @__PURE__ */ jsx10(
                       GridBody,
                       {
-                        columns: resolved,
-                        rows: paginatedRows.rows,
+                        columns: view.columns,
+                        definitions,
+                        rows: view.pageRows,
                         activeColumnId: resize.activeColumnId,
                         nav,
                         selection,
-                        grouping,
-                        aggregates: activeAggregates,
+                        controller,
+                        aggregates,
                         groupAggregateDisplay,
                         virtualRange: virtualized ? virtualizer : null,
                         infiniteScroll,
-                        sentinelRef
+                        sentinelRef,
+                        locale,
+                        getRowProps,
+                        onRowClick,
+                        onRowDoubleClick,
+                        messages
                       }
                     )
                   ]
@@ -2697,23 +2100,24 @@ function DataGridComponent({
               )
             }
           ),
-          activeAggregates.length > 0 && /* @__PURE__ */ jsxs7(
+          aggregates.length > 0 && /* @__PURE__ */ jsxs7(
             "table",
             {
-              style: { width: totalColumnWidth(resolved) },
+              style: { width: totalColumnWidth(view.columns) },
               className: classNames(
                 gridTableClassName,
                 "gridkit-data-grid-footer"
               ),
               children: [
-                /* @__PURE__ */ jsx10(GridColgroup, { columns: resolved }),
+                /* @__PURE__ */ jsx10(GridColgroup, { columns: view.columns }),
                 /* @__PURE__ */ jsx10(
                   GridFooter,
                   {
-                    columns: resolved,
-                    aggregates: activeAggregates,
-                    results: grandTotal,
-                    rows: shownRows.map((entry) => entry.row)
+                    columns: view.columns,
+                    aggregates,
+                    results: view.grandTotal,
+                    rows: view.rows.map((entry) => entry.row),
+                    locale
                   }
                 )
               ]
@@ -2722,27 +2126,20 @@ function DataGridComponent({
         ]
       }
     ),
-    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__ */ jsx10(GridPager, { pager: paginationApi, config: pager })),
-    /* @__PURE__ */ jsx10("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 useCallback4 } from "react";
+import { useCallback as useCallback3 } from "react";
 
 // src/DataGrid/hooks/useGridSnapshot.ts
-import { useCallback as useCallback3, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useGridSnapshot(gridRef, getSnapshot, fallback) {
-  const subscribe = useCallback3(
+  const subscribe = useCallback2(
     (listener) => {
       const api = gridRef.current;
       if (api === null) {
@@ -2753,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);
   });
@@ -2764,12 +2161,12 @@ var FALLBACK_PAGINATION = { pageIndex: 0, pageSize: 0 };
 function usePaginationState(gridRef) {
   const pagination = useGridSnapshot(
     gridRef,
-    useCallback4((api) => api.getPagination(), []),
+    useCallback3((api) => api.getPagination(), []),
     FALLBACK_PAGINATION
   );
   const pageCount = useGridSnapshot(
     gridRef,
-    useCallback4((api) => api.getPageCount(), []),
+    useCallback3((api) => api.getPageCount(), []),
     0
   );
   return {
@@ -2791,18 +2188,18 @@ function usePaginationState(gridRef) {
 }
 
 // src/DataGrid/hooks/useGroupByState.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback4 } from "react";
 var FALLBACK_GROUP_BY = [];
 var FALLBACK_EXPANSION = [];
 function useGroupByState(gridRef) {
   const groupBy = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getGroupBy(), []),
+    useCallback4((api) => api.getGroupBy(), []),
     FALLBACK_GROUP_BY
   );
   const groupExpansion = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getGroupExpansion(), []),
+    useCallback4((api) => api.getGroupExpansion(), []),
     FALLBACK_EXPANSION
   );
   return {
@@ -2818,34 +2215,34 @@ function useGroupByState(gridRef) {
 }
 
 // src/DataGrid/hooks/useColumnSortState.ts
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback5 } from "react";
 var FALLBACK_SORT = [];
 function useColumnSortState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback6((api) => api.getColumnSort(), []),
+    useCallback5((api) => api.getColumnSort(), []),
     FALLBACK_SORT
   );
 }
 
 // src/DataGrid/hooks/useSelectionState.ts
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback6 } from "react";
 var FALLBACK_SELECTION = [];
 var FALLBACK_CELL_SELECTION = null;
 function useSelectionState(gridRef) {
   const rowSelection = useGridSnapshot(
     gridRef,
-    useCallback7((api) => api.getRowSelection(), []),
+    useCallback6((api) => api.getRowSelection(), []),
     FALLBACK_SELECTION
   );
   const columnSelection = useGridSnapshot(
     gridRef,
-    useCallback7((api) => api.getColumnSelection(), []),
+    useCallback6((api) => api.getColumnSelection(), []),
     FALLBACK_SELECTION
   );
   const cellSelection = useGridSnapshot(
     gridRef,
-    useCallback7((api) => api.getCellSelection(), []),
+    useCallback6((api) => api.getCellSelection(), []),
     FALLBACK_CELL_SELECTION
   );
   return {
@@ -2862,43 +2259,74 @@ function useSelectionState(gridRef) {
 }
 
 // src/DataGrid/hooks/useAggregateState.ts
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback7 } from "react";
 var FALLBACK_AGGREGATES = /* @__PURE__ */ new Map();
 function useAggregateState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback8((api) => api.getAggregates(), []),
+    useCallback7((api) => api.getAggregates(), []),
     FALLBACK_AGGREGATES
   );
 }
 
 // src/DataGrid/hooks/useColumnSizingState.ts
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback8 } from "react";
 var FALLBACK_SIZING = {};
 function useColumnSizingState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback9((api) => api.getColumnSizing(), []),
+    useCallback8((api) => api.getColumnSizing(), []),
     FALLBACK_SIZING
   );
 }
 
 // src/DataGrid/hooks/useColumnOrderState.ts
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback9 } from "react";
 var FALLBACK_ORDER = [];
 function useColumnOrderState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback10((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