@gridkitjs/react 0.3.1 → 0.5.0

package/dist/index.js

@@ -1,38 +1,487 @@
 // src/DataGrid/DataGrid.tsx
-import { useMemo, useRef, useState as useState4 } from "react";
+import { useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
 import {
   applyColumnOrder,
   defineColumnsFromRows,
   fitColumnsToWidth,
   moveColumnBefore,
   resolveColumnWidths,
+  resolveRowId,
+  resolveShownRows,
   totalColumnWidth
 } from "@gridkitjs/core";
 
 // src/DataGrid/components/GridHeader.tsx
 import { createPortal } from "react-dom";
 import { KEYBOARD_STEP } from "@gridkitjs/core";
+
+// src/DataGrid/useGridNavigation.ts
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+var HEADER_ROW = -1;
+var FALLBACK_PAGE = 10;
+function clampFocus(focus, rowCount, columnCount) {
+  return {
+    rowIndex: Math.min(Math.max(focus.rowIndex, HEADER_ROW), rowCount - 1),
+    columnIndex: Math.min(
+      Math.max(focus.columnIndex, 0),
+      Math.max(columnCount - 1, 0)
+    )
+  };
+}
+function cellAt(table, focus) {
+  const row = focus.rowIndex === HEADER_ROW ? table.tHead?.rows[0] ?? null : table.tBodies[0]?.rows[focus.rowIndex] ?? null;
+  return row?.cells[focus.columnIndex] ?? null;
+}
+function useGridNavigation({
+  tableRef,
+  rowCount,
+  columnCount
+}) {
+  const [stored, setStored] = useState({
+    rowIndex: HEADER_ROW,
+    columnIndex: 0
+  });
+  const focus = clampFocus(stored, rowCount, columnCount);
+  const pending = useRef(false);
+  useEffect(() => {
+    if (!pending.current) {
+      return;
+    }
+    pending.current = false;
+    const table = tableRef.current;
+    if (table === null) {
+      return;
+    }
+    cellAt(table, { rowIndex: focus.rowIndex, columnIndex: focus.columnIndex })?.focus();
+  }, [tableRef, focus.rowIndex, focus.columnIndex]);
+  function pageSize() {
+    const table = tableRef.current;
+    const firstRow = table?.tBodies[0]?.rows[0];
+    const viewport = table?.parentElement;
+    if (firstRow === void 0 || viewport === null || viewport === void 0 || firstRow.offsetHeight === 0) {
+      return FALLBACK_PAGE;
+    }
+    return Math.max(
+      1,
+      Math.floor(viewport.clientHeight / firstRow.offsetHeight)
+    );
+  }
+  function focusCell(rowIndex, columnIndex) {
+    const next = clampFocus({ rowIndex, columnIndex }, rowCount, columnCount);
+    if (next.rowIndex === focus.rowIndex && next.columnIndex === focus.columnIndex) {
+      return;
+    }
+    pending.current = true;
+    setStored(next);
+  }
+  function tabIndexFor(rowIndex, columnIndex) {
+    return rowIndex === focus.rowIndex && columnIndex === focus.columnIndex ? 0 : -1;
+  }
+  function onKeyDown(event) {
+    if (event.altKey) {
+      return;
+    }
+    const { rowIndex, columnIndex } = focus;
+    let next;
+    switch (event.key) {
+      case "ArrowLeft":
+        if (event.ctrlKey) return;
+        next = { rowIndex, columnIndex: columnIndex - 1 };
+        break;
+      case "ArrowRight":
+        if (event.ctrlKey) return;
+        next = { rowIndex, columnIndex: columnIndex + 1 };
+        break;
+      case "ArrowUp":
+        next = { rowIndex: rowIndex - 1, columnIndex };
+        break;
+      case "ArrowDown":
+        next = { rowIndex: rowIndex + 1, columnIndex };
+        break;
+      // Ctrl takes Home and End to the grid's ends rather than the row's, which
+      // is the one place Ctrl is navigation rather than reorder.
+      case "Home":
+        next = event.ctrlKey ? { rowIndex: HEADER_ROW, columnIndex: 0 } : { rowIndex, columnIndex: 0 };
+        break;
+      case "End":
+        next = event.ctrlKey ? { rowIndex: rowCount - 1, columnIndex: columnCount - 1 } : { rowIndex, columnIndex: columnCount - 1 };
+        break;
+      case "PageUp":
+        next = { rowIndex: rowIndex - pageSize(), columnIndex };
+        break;
+      case "PageDown":
+        next = { rowIndex: rowIndex + pageSize(), columnIndex };
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    focusCell(next.rowIndex, next.columnIndex);
+  }
+  return { focus, tabIndexFor, focusCell, onKeyDown };
+}
+
+// src/DataGrid/useGridSelection.ts
+import { useMemo, useRef as useRef2 } from "react";
+import {
+  accessDotted,
+  clearSelection,
+  diffSelection,
+  selectAll,
+  selectCell,
+  selectOnly,
+  selectRange,
+  toggleCellSelection,
+  toggleSelection
+} from "@gridkitjs/core";
+function intentOf(event) {
+  if (event.shiftKey) {
+    return "range";
+  }
+  return event.ctrlKey || event.metaKey ? "toggle" : "replace";
+}
+function applyIntent(selection, orderedIds, anchorId, id, intent, mode) {
+  switch (intent) {
+    case "toggle":
+      return toggleSelection(selection, id, mode);
+    // A range with no anchor yet spans from the id to itself, which is the
+    // plain click a first Shift-click may as well be.
+    case "range":
+      return selectRange(selection, orderedIds, anchorId ?? id, id, mode);
+    default:
+      return selectOnly(selection, id, mode);
+  }
+}
+function countMessage(count, noun) {
+  if (count === 0) {
+    return `No ${noun}s selected`;
+  }
+  return count === 1 ? `1 ${noun} selected` : `${String(count)} ${noun}s selected`;
+}
+function useGridSelection({
+  rows,
+  columns,
+  selectable,
+  rowSelection,
+  setRowSelection,
+  columnSelection,
+  setColumnSelection,
+  cellSelection,
+  setCellSelection,
+  callbacks,
+  announce
+}) {
+  const rowMode = selectable?.rows ?? false;
+  const columnMode = selectable?.columns ?? false;
+  const cellMode = selectable?.cells ?? false;
+  const rowsById = useMemo(
+    () => new Map(rows.map((entry) => [entry.rowId, entry])),
+    [rows]
+  );
+  const rowIds = useMemo(() => rows.map((entry) => entry.rowId), [rows]);
+  const columnIds = useMemo(() => columns.map((entry) => entry.id), [columns]);
+  const selectedRowIds = useMemo(() => new Set(rowSelection), [rowSelection]);
+  const selectedColumnIds = useMemo(
+    () => new Set(columnSelection),
+    [columnSelection]
+  );
+  const rowAnchor = useRef2(null);
+  const columnAnchor = useRef2(null);
+  function resolveRows(ids) {
+    return ids.map((id) => rowsById.get(id)).filter((row) => row !== void 0);
+  }
+  function resolveColumns(ids) {
+    return ids.map((id) => {
+      const columnIndex = columns.findIndex((entry) => entry.id === id);
+      const column = columns[columnIndex];
+      return column === void 0 ? void 0 : { columnId: id, column, columnIndex };
+    }).filter((column) => column !== void 0);
+  }
+  function resolveCell(ref) {
+    if (ref === null) {
+      return null;
+    }
+    const entry = rowsById.get(ref.rowId);
+    const columnIndex = columns.findIndex(
+      (candidate) => candidate.id === ref.columnId
+    );
+    const column = columns[columnIndex];
+    if (entry === void 0 || column === void 0) {
+      return null;
+    }
+    return {
+      rowId: ref.rowId,
+      columnId: ref.columnId,
+      row: entry.row,
+      column,
+      rowIndex: entry.rowIndex,
+      columnIndex,
+      value: accessDotted(entry.row, column.column.field)
+    };
+  }
+  function announceCount(changed, total, noun) {
+    if (changed > 1) {
+      announce(countMessage(total, noun));
+    }
+  }
+  function commitRows(next) {
+    if (next === rowSelection) {
+      return;
+    }
+    setRowSelection(next);
+    const { added, removed } = diffSelection(rowSelection, next);
+    const addedRows = resolveRows(added);
+    const removedRows = resolveRows(removed);
+    for (const row of addedRows) {
+      callbacks.onRowSelect?.({ row, selection: next });
+    }
+    if (addedRows.length > 0) {
+      callbacks.onRowsSelect?.({ rows: addedRows, selection: next });
+    }
+    for (const row of removedRows) {
+      callbacks.onRowDeselect?.({ row, selection: next });
+    }
+    if (removedRows.length > 0) {
+      callbacks.onRowsDeselect?.({ rows: removedRows, selection: next });
+    }
+    callbacks.onRowSelectionChange?.({
+      added: addedRows,
+      removed: removedRows,
+      selected: resolveRows(next),
+      selection: next
+    });
+    announceCount(added.length + removed.length, next.length, "row");
+  }
+  function commitColumns(next) {
+    if (next === columnSelection) {
+      return;
+    }
+    setColumnSelection(next);
+    const { added, removed } = diffSelection(columnSelection, next);
+    const addedColumns = resolveColumns(added);
+    const removedColumns = resolveColumns(removed);
+    for (const column of addedColumns) {
+      callbacks.onColumnSelect?.({ column, selection: next });
+    }
+    if (addedColumns.length > 0) {
+      callbacks.onColumnsSelect?.({ columns: addedColumns, selection: next });
+    }
+    for (const column of removedColumns) {
+      callbacks.onColumnDeselect?.({ column, selection: next });
+    }
+    if (removedColumns.length > 0) {
+      callbacks.onColumnsDeselect?.({
+        columns: removedColumns,
+        selection: next
+      });
+    }
+    callbacks.onColumnSelectionChange?.({
+      added: addedColumns,
+      removed: removedColumns,
+      selected: resolveColumns(next),
+      selection: next
+    });
+    announceCount(added.length + removed.length, next.length, "column");
+  }
+  function commitCell(next) {
+    if (next === cellSelection) {
+      return;
+    }
+    setCellSelection(next);
+    const selected = resolveCell(next);
+    const deselected = resolveCell(cellSelection);
+    if (deselected !== null) {
+      callbacks.onCellDeselect?.({ cell: deselected, selection: next });
+    }
+    if (selected !== null) {
+      callbacks.onCellSelect?.({ cell: selected, selection: next });
+    }
+    callbacks.onCellSelectionChange?.({
+      selected,
+      deselected,
+      selection: next
+    });
+  }
+  function selectRow(rowId, intent) {
+    const next = applyIntent(
+      rowSelection,
+      rowIds,
+      rowAnchor.current,
+      rowId,
+      intent,
+      rowMode
+    );
+    if (intent !== "range") {
+      rowAnchor.current = rowId;
+    }
+    commitRows(next);
+  }
+  function selectColumn(columnId, intent) {
+    const next = applyIntent(
+      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);
+  }
+  return {
+    rowMode,
+    columnMode,
+    cellMode,
+    selectedRowIds,
+    selectedColumnIds,
+    selectedCell: cellSelection,
+    selectRow,
+    selectColumn,
+    selectCell: selectCellAt,
+    selectAllRows,
+    clear
+  };
+}
+
+// src/DataGrid/components/GridHeader.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+function ChevronsUpDownIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
+        /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+      ]
+    }
+  );
+}
+function ChevronUpIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+    }
+  );
+}
 function GridHeader({
   columns,
   resize,
-  drag
+  drag,
+  sort,
+  sortableColumns,
+  nav,
+  selection
 }) {
   const { beforeId } = drag.dropTarget ?? {};
   const draggedEntry = columns.find((entry) => entry.id === drag.draggedColumnId) ?? null;
   return /* @__PURE__ */ jsxs("thead", { children: [
-    /* @__PURE__ */ jsx("tr", { className: "grid-header", children: columns.map((entry, index) => {
+    /* @__PURE__ */ jsx("tr", { className: "grid-header", role: "row", "aria-rowindex": 1, children: columns.map((entry, index) => {
       const { column } = entry;
       const resizing = resize.activeColumnId === entry.id;
       const dragging = drag.draggedColumnId === entry.id;
       const dropBefore = beforeId !== void 0 && beforeId === entry.id;
       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 shortcuts = [
+        entry.reorderable ? "Control+ArrowLeft Control+ArrowRight" : "",
+        entry.resizable ? "Alt+ArrowLeft Alt+ArrowRight" : "",
+        sortable ? "Alt+ArrowUp" : ""
+      ].filter(Boolean).join(" ");
       return /* @__PURE__ */ jsxs(
         "th",
         {
+          scope: "col",
           "data-gridkit-column": entry.id,
+          "aria-colindex": index + 1,
+          tabIndex: nav.tabIndexFor(HEADER_ROW, index),
+          ...selection.columnMode !== false && {
+            "aria-selected": selected
+          },
+          onFocus: () => {
+            nav.focusCell(HEADER_ROW, index);
+          },
+          onClick: (event) => {
+            if (drag.justDragged()) {
+              return;
+            }
+            if (event.target instanceof Element && (event.target.closest(".header-resize-handle") !== null || event.target.closest(".header-sort-toggle") !== null)) {
+              return;
+            }
+            selection.selectColumn(entry.id, intentOf(event));
+          },
+          onKeyDown: (event) => {
+            const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+            const direction = event.key === "ArrowLeft" ? -1 : 1;
+            if (horizontal && event.ctrlKey && entry.reorderable) {
+              event.preventDefault();
+              drag.moveByKeyboard(entry, direction);
+              return;
+            }
+            if (horizontal && event.altKey && entry.resizable) {
+              event.preventDefault();
+              resize.nudge(entry, direction * KEYBOARD_STEP);
+              return;
+            }
+            if (event.key === "ArrowUp" && event.altKey && sortable) {
+              event.preventDefault();
+              sort.toggle(entry, { shiftKey: event.shiftKey });
+              return;
+            }
+            if (event.key === " " || event.key === "Enter") {
+              event.preventDefault();
+              selection.selectColumn(
+                entry.id,
+                intentOf({
+                  ctrlKey: event.key === " " || event.ctrlKey,
+                  metaKey: event.metaKey,
+                  shiftKey: event.shiftKey
+                })
+              );
+              return;
+            }
+            nav.onKeyDown(event);
+          },
           className: [
             "header-cell",
+            entry.reorderable ? "is-reorderable" : "",
+            selected ? "is-selected" : "",
             resizing ? "is-resizing" : "",
             dragging ? "is-dragging" : "",
             dropBefore ? "is-drop-before" : "",
@@ -40,46 +489,61 @@ function GridHeader({
             column.wrap?.header ? "is-wrapped" : "",
             column.headerClassName ?? ""
           ].filter(Boolean).join(" "),
+          ...shortcuts !== "" && { "aria-keyshortcuts": shortcuts },
+          ...sortable && sortDirection !== null && {
+            "aria-sort": sortDirection === "asc" ? "ascending" : "descending"
+          },
           ...entry.reorderable && {
-            tabIndex: 0,
             onPointerDown: (event) => {
               drag.startDrag(entry, event);
-            },
-            onKeyDown: (event) => {
-              if (!event.ctrlKey) return;
-              if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
-                return;
-              event.preventDefault();
-              drag.moveByKeyboard(
-                entry,
-                event.key === "ArrowLeft" ? -1 : 1
-              );
             }
           },
           children: [
             entry.label,
-            entry.resizable && /* @__PURE__ */ jsx(
+            sortable && /*
+             * A pointer affordance only, and hidden from assistive
+             * technology like the resize handle: the keyboard equivalent
+             * lives on the header itself, under Alt+ArrowUp (plain) /
+             * Alt+Shift+ArrowUp (stacking).
+             */
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: [
+                  "header-sort-toggle",
+                  sortDirection !== null ? `is-sorted-${sortDirection}` : ""
+                ].filter(Boolean).join(" "),
+                "aria-hidden": "true",
+                tabIndex: -1,
+                onPointerDown: (event) => {
+                  event.stopPropagation();
+                },
+                onClick: (event) => {
+                  sort.toggle(entry, { shiftKey: event.shiftKey });
+                },
+                children: [
+                  sortDirection === null ? /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx(ChevronUpIcon, {}),
+                  sortPriority !== null && sortPriority > 1 && /* @__PURE__ */ jsx("span", { className: "header-sort-priority", children: sortPriority })
+                ]
+              }
+            ),
+            entry.resizable && /*
+             * A pointer affordance only, and hidden from assistive
+             * technology accordingly: a focusable handle per column would
+             * put N tab stops inside a widget that is meant to have one.
+             * The keyboard resizes from the header itself, under Alt.
+             */
+            /* @__PURE__ */ jsx(
               "span",
               {
                 className: "header-resize-handle",
-                role: "separator",
-                "aria-orientation": "vertical",
-                "aria-label": `Resize ${column.field}`,
-                tabIndex: 0,
+                "aria-hidden": "true",
+                tabIndex: -1,
                 onPointerDown: (event) => {
                   resize.startResize(entry, event);
                 },
                 onDoubleClick: () => {
                   resize.sizeToContent(entry);
-                },
-                onKeyDown: (event) => {
-                  if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
-                    return;
-                  event.preventDefault();
-                  resize.nudge(
-                    entry,
-                    event.key === "ArrowLeft" ? -KEYBOARD_STEP : KEYBOARD_STEP
-                  );
                 }
               }
             )
@@ -106,37 +570,154 @@ function GridHeader({
   ] });
 }
 
-// src/DataGrid/components/GridBody.tsx
-import { accessDotted } from "@gridkitjs/core";
-import "react";
+// src/DataGrid/components/GridRow.tsx
+import { accessDotted as accessDotted2 } from "@gridkitjs/core";
+import { memo } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
+function GridRowComponent({
+  columns,
+  rowId,
+  row,
+  rowIndex,
+  activeColumnId,
+  selectedColumnIds,
+  selected,
+  selectedColumnId,
+  focusedColumnIndex,
+  rowsSelectable,
+  cellsSelectable
+}) {
+  return /* @__PURE__ */ jsx2(
+    "tr",
+    {
+      role: "row",
+      "aria-rowindex": rowIndex + 2,
+      ...rowsSelectable && { "aria-selected": selected },
+      className: ["grid-row", selected ? "is-selected" : ""].filter(Boolean).join(" "),
+      children: columns.map(({ id, column, alignment }, columnIndex) => {
+        const value = accessDotted2(row, column.field);
+        const cellSelected = id === selectedColumnId;
+        return /* @__PURE__ */ jsx2(
+          "td",
+          {
+            role: "gridcell",
+            "data-gridkit-column": id,
+            "aria-colindex": columnIndex + 1,
+            tabIndex: columnIndex === focusedColumnIndex ? 0 : -1,
+            ...cellsSelectable && { "aria-selected": cellSelected },
+            className: [
+              "grid-cell",
+              id === activeColumnId ? "is-resizing" : "",
+              cellSelected || selectedColumnIds.has(id) ? "is-selected" : "",
+              column.wrap?.cells ? "is-wrapped" : "",
+              column.cellClassName ?? ""
+            ].filter(Boolean).join(" "),
+            style: { textAlign: alignment },
+            children: column.cellTemplate ? column.cellTemplate({ value, row, rowIndex, rowId, selected }) : value
+          },
+          id
+        );
+      })
+    }
+  );
+}
+var GridRow = memo(GridRowComponent);
+var GridRow_default = GridRow;
+
+// src/DataGrid/components/GridBody.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function cellFrom(target) {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  const cell = target.closest("td[data-gridkit-column]");
+  const row = cell?.parentElement;
+  const columnId = cell?.getAttribute("data-gridkit-column");
+  if (!(cell instanceof HTMLTableCellElement) || !(row instanceof HTMLTableRowElement) || columnId === null || columnId === void 0) {
+    return null;
+  }
+  return {
+    rowIndex: row.sectionRowIndex,
+    columnIndex: cell.cellIndex,
+    columnId
+  };
+}
 function GridBody({
   columns,
-  dataSource,
-  activeColumnId
+  rows,
+  activeColumnId,
+  nav,
+  selection
 }) {
-  return /* @__PURE__ */ jsx2("tbody", { className: "grid-body", children: dataSource?.map((row, index) => /* @__PURE__ */ jsx2("tr", { className: "grid-row", children: columns.map(({ id, column, alignment }) => {
-    const value = accessDotted(row, column.field);
-    return /* @__PURE__ */ jsx2(
-      "td",
-      {
-        "data-gridkit-column": id,
-        className: [
-          "grid-cell",
-          id === activeColumnId ? "is-resizing" : "",
-          column.wrap?.cells ? "is-wrapped" : "",
-          column.cellClassName ?? ""
-        ].filter(Boolean).join(" "),
-        style: { textAlign: alignment },
-        children: column.cellTemplate ? column.cellTemplate({ value, row, rowIndex: index }) : value
+  const { selectedCell, rowMode, cellMode } = selection;
+  function targetOf(target) {
+    const position = cellFrom(target);
+    const entry = position === null ? void 0 : rows[position.rowIndex];
+    return position === null || entry === void 0 ? null : { position, rowId: entry.rowId };
+  }
+  function select(rowId, columnId, modifiers) {
+    const intent = intentOf(modifiers);
+    if (rowMode !== false) {
+      selection.selectRow(rowId, intent);
+    }
+    if (cellMode !== false) {
+      selection.selectCell({ rowId, columnId }, intent);
+    }
+  }
+  return /* @__PURE__ */ jsx3(
+    "tbody",
+    {
+      className: "grid-body",
+      onFocus: (event) => {
+        const found = targetOf(event.target);
+        if (found === null) return;
+        nav.focusCell(found.position.rowIndex, found.position.columnIndex);
       },
-      id
-    );
-  }) }, index)) });
+      onClick: (event) => {
+        const found = targetOf(event.target);
+        if (found === null) return;
+        select(found.rowId, found.position.columnId, event);
+      },
+      onKeyDown: (event) => {
+        if (event.key === " " || event.key === "Enter") {
+          const found = targetOf(event.target);
+          if (found === null) return;
+          event.preventDefault();
+          select(found.rowId, found.position.columnId, {
+            ctrlKey: event.key === " " || event.ctrlKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey
+          });
+          return;
+        }
+        nav.onKeyDown(event);
+      },
+      children: rows.map(({ rowId, row, rowIndex }) => /* @__PURE__ */ jsx3(
+        GridRow_default,
+        {
+          columns,
+          rowId,
+          row,
+          rowIndex,
+          activeColumnId,
+          selectedColumnIds: selection.selectedColumnIds,
+          selected: selection.selectedRowIds.has(rowId),
+          selectedColumnId: selectedCell?.rowId === rowId ? selectedCell.columnId : null,
+          focusedColumnIndex: nav.focus.rowIndex === rowIndex ? nav.focus.columnIndex : null,
+          rowsSelectable: rowMode !== false,
+          cellsSelectable: cellMode !== false
+        },
+        rowId
+      ))
+    }
+  );
 }
 
 // src/DataGrid/useColumnDrag.ts
-import { useState } from "react";
+import {
+  useRef as useRef3,
+  useState as useState2
+} from "react";
 import {
   movesColumn,
   resolveDropBefore
@@ -154,9 +735,15 @@ function useColumnDrag({
   order,
   onDrop
 }) {
-  const [draggedColumnId, setDraggedColumnId] = useState(null);
-  const [dropTarget, setDropTarget] = useState(null);
-  const [ghostTransform, setGhostTransform] = useState(null);
+  const [draggedColumnId, setDraggedColumnId] = useState2(null);
+  const [dropTarget, setDropTarget] = useState2(null);
+  const [ghostTransform, setGhostTransform] = useState2(null);
+  const dragged = useRef3(false);
+  function justDragged() {
+    const answer = dragged.current;
+    dragged.current = false;
+    return answer;
+  }
   function startDrag(entry, event) {
     const header = event.currentTarget;
     const { pointerId, clientX: startX } = event;
@@ -174,6 +761,7 @@ function useColumnDrag({
           return;
         }
         dragging = true;
+        dragged.current = true;
         setDraggedColumnId(entry.id);
       }
       placeGhost(clientX, clientY);
@@ -235,13 +823,14 @@ function useColumnDrag({
     dropTarget,
     ghostTransform,
     startDrag,
-    moveByKeyboard
+    moveByKeyboard,
+    justDragged
   };
 }
 
 // src/DataGrid/useColumnResize.ts
 import {
-  useState as useState2
+  useState as useState3
 } from "react";
 import {
   applyColumnResize,
@@ -254,7 +843,7 @@ import {
 // src/DataGrid/measureColumnContent.ts
 function measureColumnContent(table, columnId) {
   const cells = table.querySelectorAll(
-    `[data-gridkit-column="${CSS.escape(columnId)}"]`
+    `td[data-gridkit-column="${CSS.escape(columnId)}"]`
   );
   const range = document.createRange();
   let widest = null;
@@ -277,7 +866,7 @@ function useColumnResize({
   columnSizeDefaults,
   onColumnResize
 }) {
-  const [activeColumnId, setActiveColumnId] = useState2(null);
+  const [activeColumnId, setActiveColumnId] = useState3(null);
   function commit(base, columnId, width, phase) {
     const next = { ...base, [columnId]: width };
     setSizing(next);
@@ -314,16 +903,28 @@ function useColumnResize({
     }
     function end() {
       stop();
-      commit(base, session.columnId, width, "end");
+      if (width !== session.startWidth) {
+        commit(base, session.columnId, width, "end");
+      }
     }
     function cancel() {
       stop();
-      setSizing(base);
-      onColumnResize?.({
-        columnId: session.columnId,
-        width: session.startWidth,
-        sizing: base,
-        phase: "end"
+      setSizing((current) => {
+        const next = Object.fromEntries(
+          Object.entries(current).filter(
+            ([columnId]) => columnId !== session.columnId
+          )
+        );
+        if (session.columnId in base) {
+          next[session.columnId] = base[session.columnId];
+        }
+        onColumnResize?.({
+          columnId: session.columnId,
+          width: session.startWidth,
+          sizing: next,
+          phase: "end"
+        });
+        return next;
       });
     }
     function onKeyDown(keyEvent) {
@@ -369,10 +970,37 @@ 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 });
+    if (next === sort) {
+      return;
+    }
+    setSort(next);
+    onColumnSortChange?.({ columnId: entry.id, sort: next });
+  }
+  return {
+    sort,
+    directionFor: (columnId) => sortDirectionFor(sort, columnId),
+    priorityFor: (columnId) => sortPriorityFor(sort, columnId),
+    toggle
+  };
+}
+
 // src/DataGrid/useElementWidth.ts
-import { useLayoutEffect, useState as useState3 } from "react";
+import { useLayoutEffect, useState as useState4 } from "react";
 function useElementWidth(ref, enabled) {
-  const [width, setWidth] = useState3(null);
+  const [width, setWidth] = useState4(null);
   useLayoutEffect(() => {
     const element = ref.current;
     if (element === null || !enabled) {
@@ -391,12 +1019,17 @@ function useElementWidth(ref, enabled) {
 }
 
 // src/DataGrid/DataGrid.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function DataGridComponent({
   dataSource,
   columns,
+  getRowId,
   borders,
   hoverable,
+  selectable,
+  defaultRowSelection,
+  defaultColumnSelection,
+  defaultCellSelection,
   resizableColumns = false,
   reorderableColumns = false,
   resizeMode = "fit",
@@ -404,31 +1037,58 @@ function DataGridComponent({
   defaultColumnOrder,
   columnSizeDefaults,
   onColumnResize,
-  onColumnOrderChange
+  onColumnOrderChange,
+  sortableColumns = false,
+  defaultColumnSort,
+  onColumnSortChange,
+  defaultFilter,
+  label,
+  labelledBy,
+  ...callbacks
 }) {
   const hoverRows = hoverable?.rows ?? true;
   const hoverColumns = hoverable?.columns ?? true;
   const hoverCells = hoverable?.cells ?? true;
-  const viewportRef = useRef(null);
-  const tableRef = useRef(null);
+  const viewportRef = useRef4(null);
+  const tableRef = useRef4(null);
   const viewportWidth = useElementWidth(viewportRef, resizeMode === "fit");
-  const [sizing, setSizing] = useState4(
+  const [sizing, setSizing] = useState5(
     defaultColumnSizing ?? {}
   );
-  const [order, setOrder] = useState4(
+  const [order, setOrder] = useState5(
     defaultColumnOrder ?? []
   );
-  const definedColumns = useMemo(() => {
+  const [sort, setSort] = useState5(defaultColumnSort ?? []);
+  const [filter] = useState5(defaultFilter ?? []);
+  const [announcement, setAnnouncement] = useState5("");
+  const [rowSelection, setRowSelection] = useState5(
+    defaultRowSelection ?? []
+  );
+  const [columnSelection, setColumnSelection] = useState5(
+    defaultColumnSelection ?? []
+  );
+  const [cellSelection, setCellSelection] = useState5(
+    defaultCellSelection ?? null
+  );
+  const rows = useMemo2(
+    () => dataSource?.map((row, rowIndex) => ({
+      rowId: resolveRowId(row, rowIndex, getRowId),
+      row,
+      rowIndex
+    })) ?? [],
+    [dataSource, getRowId]
+  );
+  const definedColumns = useMemo2(() => {
     if (columns && columns.length !== 0) return columns;
     if (dataSource && dataSource.length > 0)
       return defineColumnsFromRows(dataSource);
     return [];
   }, [columns, dataSource]);
-  const orderedColumns = useMemo(
+  const orderedColumns = useMemo2(
     () => applyColumnOrder(definedColumns, order),
     [definedColumns, order]
   );
-  const resolved = useMemo(() => {
+  const resolved = useMemo2(() => {
     const widths = resolveColumnWidths(orderedColumns, sizing, {
       sizes: columnSizeDefaults,
       resizable: resizableColumns,
@@ -444,14 +1104,41 @@ function DataGridComponent({
     resizableColumns,
     reorderableColumns
   ]);
+  const shownRows = useMemo2(
+    () => resolveShownRows(rows, filter, sort, resolved),
+    [rows, filter, sort, resolved]
+  );
+  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);
+  }
+  function handleColumnResize(event) {
+    onColumnResize?.(event);
+    if (event.phase === "end") {
+      announce(
+        `${columnName(event.columnId)}, ${String(Math.round(event.width))} pixels wide`
+      );
+    }
+  }
   const resize = useColumnResize({
     tableRef,
     sizing,
     setSizing,
     columnSizeDefaults,
-    onColumnResize
+    onColumnResize: handleColumnResize
+  });
+  const nav = useGridNavigation({
+    tableRef,
+    rowCount: shownRows.length,
+    columnCount: resolved.length
   });
-  const displayedIds = useMemo(
+  const displayedIds = useMemo2(
     () => orderedColumns.map((column) => column.id ?? column.field),
     [orderedColumns]
   );
@@ -460,36 +1147,115 @@ function DataGridComponent({
     if (next === displayedIds) {
       return;
     }
+    const position = next.indexOf(movedId);
     setOrder(next);
     onColumnOrderChange?.({ columnId: movedId, order: next });
+    announce(
+      `${columnName(movedId)}, column ${String(position + 1)} of ${String(next.length)}`
+    );
+    nav.focusCell(HEADER_ROW, position);
   }
   const drag = useColumnDrag({ order: displayedIds, onDrop: handleDrop });
-  return /* @__PURE__ */ jsx3("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: /* @__PURE__ */ jsxs2(
-    "table",
-    {
-      ref: tableRef,
-      style: { width: totalColumnWidth(resolved) },
-      className: [
-        "gridkit-data-grid",
-        borders ? `borders-${borders}` : "",
-        hoverRows ? "" : "no-hover-rows",
-        hoverColumns ? "" : "no-hover-columns",
-        hoverCells ? "" : "no-hover-cells"
-      ].filter(Boolean).join(" "),
-      children: [
-        /* @__PURE__ */ jsx3("colgroup", { children: resolved.map((entry) => /* @__PURE__ */ jsx3("col", { style: { width: entry.width } }, entry.id)) }),
-        /* @__PURE__ */ jsx3(GridHeader, { columns: resolved, resize, drag }),
-        /* @__PURE__ */ jsx3(
-          GridBody,
-          {
-            columns: resolved,
-            dataSource,
-            activeColumnId: resize.activeColumnId
-          }
-        )
-      ]
+  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
+  });
+  const selection = useGridSelection({
+    rows: shownRows,
+    columns: resolved,
+    selectable,
+    rowSelection,
+    setRowSelection,
+    columnSelection,
+    setColumnSelection,
+    cellSelection,
+    setCellSelection,
+    callbacks,
+    announce
+  });
+  const multiselectable = selection.rowMode === "multiple" || selection.columnMode === "multiple";
+  return /* @__PURE__ */ jsxs2("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
+    /* @__PURE__ */ jsxs2(
+      "table",
+      {
+        ref: tableRef,
+        role: "grid",
+        "aria-rowcount": shownRows.length + 1,
+        "aria-colcount": resolved.length,
+        ...multiselectable && { "aria-multiselectable": true },
+        ...labelledBy !== void 0 && { "aria-labelledby": labelledBy },
+        ...labelledBy === void 0 && label !== void 0 && { "aria-label": label },
+        onKeyDown: (event) => {
+          if (event.key === "Escape") {
+            if (drag.draggedColumnId !== null || resize.activeColumnId !== null)
+              return;
+            selection.clear();
+            return;
+          }
+          if ((event.ctrlKey || event.metaKey) && (event.key === "a" || event.key === "A")) {
+            if (selection.rowMode !== "multiple") return;
+            event.preventDefault();
+            selection.selectAllRows();
+          }
+        },
+        style: { width: totalColumnWidth(resolved) },
+        className: [
+          "gridkit-data-grid",
+          borders ? `borders-${borders}` : "",
+          // Hover is on by default and selection off, so one set of classes
+          // turns styling off and the other turns it on. The polarity differs
+          // because the defaults do.
+          hoverRows ? "" : "no-hover-rows",
+          hoverColumns ? "" : "no-hover-columns",
+          hoverCells ? "" : "no-hover-cells",
+          selection.rowMode === false ? "" : "selectable-rows",
+          selection.columnMode === false ? "" : "selectable-columns",
+          selection.cellMode === false ? "" : "selectable-cells"
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx4("colgroup", { children: resolved.map((entry) => /* @__PURE__ */ jsx4("col", { style: { width: entry.width } }, entry.id)) }),
+          /* @__PURE__ */ jsx4(
+            GridHeader,
+            {
+              columns: resolved,
+              resize,
+              drag,
+              sort: columnSort,
+              sortableColumns,
+              nav,
+              selection
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            GridBody,
+            {
+              columns: resolved,
+              rows: shownRows,
+              activeColumnId: resize.activeColumnId,
+              nav,
+              selection
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4("div", { className: "gridkit-sr-only", role: "status", "aria-live": "polite", children: announcement })
+  ] });
 }
 export {
   DataGridComponent