@kinetixui/ui 0.20.1 → 0.21.0

package/dist/index.d.ts

@@ -1645,8 +1645,9 @@ interface DataGridProps<TData> {
     /**
      * Opt in to range selection: drag, or Shift+arrows / Shift+click, to extend a rectangle from the
      * anchor cell; Ctrl/Cmd+click or Ctrl+Space starts an additional, separate range; Ctrl/Cmd+A selects
-     * everything; Ctrl/Cmd+C copies the ranges as tab-separated text (each column's `value()`; empty where
-     * a column has none; ranges separated by a blank line); Esc clears. Sets aria-multiselectable.
+     * everything; Ctrl/Cmd+click (or Ctrl+Space) on a column header selects the whole column and Shift+click extends it
+     * (a plain header click still sorts); Shift+Space on a cell selects its whole row; Ctrl/Cmd+C copies the ranges as tab-separated text (each column's `value()`; empty where
+     * a column has none; ranges separated by a blank line); Esc clears; dragging past the grid's edge scrolls it. Sets aria-multiselectable.
      */
     selectable?: boolean;
     /** fires when the selected range changes; `null` when it is cleared */

package/dist/index.js

@@ -5150,13 +5150,43 @@ function DataGrid({
   const [sel, setSel] = React83.useState(null);
   const [extra, setExtra] = React83.useState([]);
   const dragRef = React83.useRef(null);
+  const pointerRef = React83.useRef(null);
+  const frameRef = React83.useRef(0);
+  const autoScrollStepRef = React83.useRef(() => false);
+  const dragEndedRef = React83.useRef(() => {
+  });
   React83.useEffect(() => {
+    const tick = () => {
+      frameRef.current = 0;
+      if (dragRef.current && autoScrollStepRef.current()) frameRef.current = requestAnimationFrame(tick);
+    };
+    const move = (e) => {
+      if (!dragRef.current) return;
+      if (e.buttons !== 1) {
+        dragRef.current = null;
+        dragEndedRef.current();
+        return;
+      }
+      pointerRef.current = { x: e.clientX, y: e.clientY };
+      if (!frameRef.current) frameRef.current = requestAnimationFrame(tick);
+    };
     const end = () => {
+      const wasDragging = dragRef.current !== null;
       dragRef.current = null;
+      pointerRef.current = null;
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+      frameRef.current = 0;
+      if (wasDragging) dragEndedRef.current();
     };
+    window.addEventListener("mousemove", move);
     window.addEventListener("mouseup", end);
-    return () => window.removeEventListener("mouseup", end);
+    return () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", end);
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+    };
   }, []);
+  const lastAutoCellRef = React83.useRef(null);
   const clearSel = () => {
     setSel(null);
     setExtra([]);
@@ -5185,6 +5215,7 @@ function DataGrid({
   const hasSelection = rects.length > 0;
   const cellCount = rects.reduce((n, r) => n + (r.r1 - r.r0 + 1) * (r.c1 - r.c0 + 1), 0);
   const isSelectedCell = (row, colIdx) => rects.some((r) => row >= r.r0 && row <= r.r1 && colIdx >= r.c0 && colIdx <= r.c1);
+  const isColumnSelected = (colIdx) => rowCount > 0 && rects.some((r) => r.r0 === 0 && r.r1 === rowCount - 1 && colIdx >= r.c0 && colIdx <= r.c1);
   React83.useEffect(() => {
     setSel(null);
     setExtra([]);
@@ -5210,6 +5241,23 @@ function DataGrid({
     if (previous) setExtra((x) => [...x, previous]);
     setSel({ anchor: { row, columnId }, end: { row, columnId } });
   }
+  function selectColumn(columnId, mode) {
+    if (rowCount === 0) return;
+    const last = rowCount - 1;
+    if (mode === "extend") {
+      const from = sel?.anchor.columnId ?? columnId;
+      setSel({ anchor: { row: 0, columnId: from }, end: { row: last, columnId } });
+      return;
+    }
+    if (mode === "add" && sel) setExtra((x) => [...x, sel]);
+    else if (mode === "replace") setExtra([]);
+    setSel({ anchor: { row: 0, columnId }, end: { row: last, columnId } });
+  }
+  function selectRow(row) {
+    if (colIds.length === 0) return;
+    setExtra([]);
+    setSel({ anchor: { row, columnId: colIds[0] }, end: { row, columnId: colIds[colIds.length - 1] } });
+  }
   function selectAll() {
     if (rowCount === 0 || colIds.length === 0) return;
     setExtra([]);
@@ -5258,6 +5306,56 @@ function DataGrid({
     pendingFocusRef.current = { row: r, columnId };
     setActive({ row: r, columnId });
   }
+  const AUTOSCROLL_EDGE = 12;
+  const AUTOSCROLL_MAX = 40;
+  autoScrollStepRef.current = () => {
+    const el = containerRef.current;
+    const p = pointerRef.current;
+    const start = dragRef.current;
+    if (!el || !p || !start || rowCount === 0 || el.clientHeight === 0) return false;
+    const rect = el.getBoundingClientRect();
+    const rtl = getComputedStyle(el).direction === "rtl";
+    const widthOf = (c) => widths[c.id] ?? c.width ?? DEFAULT_WIDTH;
+    const leftPinnedWidth = renderedColumns.filter((c) => c.pinned === "left").reduce((n, c) => n + widthOf(c), 0);
+    const rightPinnedWidth = renderedColumns.filter((c) => c.pinned === "right").reduce((n, c) => n + widthOf(c), 0);
+    const top = rect.top + HEADER_HEIGHT;
+    const bottom = rect.top + el.clientHeight;
+    const left = rect.left + leftPinnedWidth;
+    const right = rect.left + el.clientWidth - rightPinnedWidth;
+    const push = (over) => Math.min(AUTOSCROLL_MAX, 2 + Math.abs(over) / 2) * Math.sign(over);
+    const dy = p.y < top + AUTOSCROLL_EDGE ? push(p.y - (top + AUTOSCROLL_EDGE)) : p.y > bottom - AUTOSCROLL_EDGE ? push(p.y - (bottom - AUTOSCROLL_EDGE)) : 0;
+    const dx = rtl ? 0 : p.x < left + AUTOSCROLL_EDGE ? push(p.x - (left + AUTOSCROLL_EDGE)) : p.x > right - AUTOSCROLL_EDGE ? push(p.x - (right - AUTOSCROLL_EDGE)) : 0;
+    if (dx === 0 && dy === 0) return false;
+    el.scrollTop += dy;
+    el.scrollLeft += dx;
+    const cy = Math.max(top + 1, Math.min(p.y, bottom - 1));
+    const row = Math.max(0, Math.min(rowCount - 1, Math.floor((cy - top + el.scrollTop) / rowHeight)));
+    let columnId;
+    if (!rtl) {
+      const cx = Math.max(left + 1, Math.min(p.x, right - 1)) - rect.left + el.scrollLeft;
+      let acc = 0;
+      for (const c of renderedColumns) {
+        acc += widthOf(c);
+        if (cx < acc) {
+          columnId = c.id;
+          break;
+        }
+      }
+      columnId ??= renderedColumns[renderedColumns.length - 1]?.id;
+    }
+    setSel((prev) => {
+      const col = columnId ?? prev?.end.columnId ?? start.columnId;
+      if (prev && prev.end.row === row && prev.end.columnId === col) return prev;
+      return { anchor: start, end: { row, columnId: col } };
+    });
+    lastAutoCellRef.current = { row, columnId: columnId ?? lastAutoCellRef.current?.columnId ?? start.columnId };
+    return true;
+  };
+  dragEndedRef.current = () => {
+    const cell = lastAutoCellRef.current;
+    lastAutoCellRef.current = null;
+    if (cell) moveTo(cell.row, cell.columnId);
+  };
   React83.useEffect(() => {
     const p = pendingFocusRef.current;
     if (!p) return;
@@ -5304,6 +5402,14 @@ function DataGrid({
       return;
     }
     const mod = e.ctrlKey || e.metaKey;
+    if (selectable && row < 0 && mod && e.key === " ") {
+      e.preventDefault();
+      return selectColumn(column.id, "add");
+    }
+    if (selectable && row >= 0 && e.shiftKey && !mod && e.key === " ") {
+      e.preventDefault();
+      return selectRow(row);
+    }
     if (selectable && row >= 0) {
       if (mod && e.key.toLowerCase() === "a") {
         e.preventDefault();
@@ -5388,6 +5494,7 @@ function DataGrid({
                 "data-header": column.id,
                 "aria-colindex": colIdx + 1,
                 "aria-keyshortcuts": `Shift+ArrowLeft Shift+ArrowRight${column.pinned ? "" : " Alt+ArrowLeft Alt+ArrowRight"}`,
+                "aria-selected": selectable ? isColumnSelected(colIdx) : void 0,
                 ...column.sortable ? { "aria-sort": isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" } : {},
                 draggable: !column.pinned,
                 onDragStart: () => {
@@ -5408,14 +5515,19 @@ function DataGrid({
                     return next;
                   });
                 },
-                onClick: () => column.sortable && toggleSort(column.id),
+                onClick: (e) => {
+                  if (selectable && (e.ctrlKey || e.metaKey)) return selectColumn(column.id, "add");
+                  if (selectable && e.shiftKey) return selectColumn(column.id, "extend");
+                  if (column.sortable) toggleSort(column.id);
+                },
                 tabIndex: tabStop.row === -1 && tabStop.columnId === column.id ? 0 : -1,
                 onFocus: () => setActive({ row: -1, columnId: column.id }),
                 onKeyDown: (e) => onNavKeyDown(e, -1, column),
                 className: cn(
                   "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                   column.sortable && "cursor-pointer hover:text-foreground",
-                  column.pinned && "bg-background"
+                  column.pinned && "bg-background",
+                  selectable && isColumnSelected(colIdx) && "bg-accent text-accent-foreground"
                 ),
                 style: { width, ...pinnedStyle },
                 children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -44,7 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
-    "@kinetixui/tokens": "0.20.1",
+    "@kinetixui/tokens": "0.21.0",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",

package/src/components/data-grid.tsx

@@ -50,8 +50,9 @@ export interface DataGridProps<TData> {
   /**
    * Opt in to range selection: drag, or Shift+arrows / Shift+click, to extend a rectangle from the
    * anchor cell; Ctrl/Cmd+click or Ctrl+Space starts an additional, separate range; Ctrl/Cmd+A selects
-   * everything; Ctrl/Cmd+C copies the ranges as tab-separated text (each column's `value()`; empty where
-   * a column has none; ranges separated by a blank line); Esc clears. Sets aria-multiselectable.
+   * everything; Ctrl/Cmd+click (or Ctrl+Space) on a column header selects the whole column and Shift+click extends it
+   * (a plain header click still sorts); Shift+Space on a cell selects its whole row; Ctrl/Cmd+C copies the ranges as tab-separated text (each column's `value()`; empty where
+   * a column has none; ranges separated by a blank line); Esc clears; dragging past the grid's edge scrolls it. Sets aria-multiselectable.
    */
   selectable?: boolean;
   /** fires when the selected range changes; `null` when it is cleared */
@@ -235,13 +236,45 @@ function DataGrid<TData>({
   /** ranges committed before the current one (Ctrl/Cmd+click, Ctrl+Space) */
   const [extra, setExtra] = React.useState<Sel[]>([]);
   const dragRef = React.useRef<Anchor | null>(null);
+  // Auto-scroll while drag-selecting: the pointer position is tracked on the window (it leaves the
+  // grid, so cell mouseenter events stop), and a frame loop scrolls the grid and extends the range
+  // to the cell under the pointer while the pointer is at or past an edge.
+  const pointerRef = React.useRef<{ x: number; y: number } | null>(null);
+  const frameRef = React.useRef(0);
+  const autoScrollStepRef = React.useRef<() => boolean>(() => false);
+  const dragEndedRef = React.useRef<() => void>(() => {});
   React.useEffect(() => {
+    const tick = () => {
+      frameRef.current = 0;
+      if (dragRef.current && autoScrollStepRef.current()) frameRef.current = requestAnimationFrame(tick);
+    };
+    const move = (e: MouseEvent) => {
+      if (!dragRef.current) return;
+      if (e.buttons !== 1) {
+        dragRef.current = null; // the button was released outside the window
+        dragEndedRef.current();
+        return;
+      }
+      pointerRef.current = { x: e.clientX, y: e.clientY };
+      if (!frameRef.current) frameRef.current = requestAnimationFrame(tick);
+    };
     const end = () => {
+      const wasDragging = dragRef.current !== null;
       dragRef.current = null;
+      pointerRef.current = null;
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+      frameRef.current = 0;
+      if (wasDragging) dragEndedRef.current();
     };
+    window.addEventListener("mousemove", move);
     window.addEventListener("mouseup", end);
-    return () => window.removeEventListener("mouseup", end);
+    return () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", end);
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+    };
   }, []);
+  const lastAutoCellRef = React.useRef<Pos | null>(null);
   const clearSel = () => {
     setSel(null);
     setExtra([]);
@@ -275,6 +308,9 @@ function DataGrid<TData>({
   const cellCount = rects.reduce((n, r) => n + (r.r1 - r.r0 + 1) * (r.c1 - r.c0 + 1), 0);
   const isSelectedCell = (row: number, colIdx: number) => rects.some((r) => row >= r.r0 && row <= r.r1 && colIdx >= r.c0 && colIdx <= r.c1);
 
+  /** a column header reads as selected when a range covers every row of that column */
+  const isColumnSelected = (colIdx: number) => rowCount > 0 && rects.some((r) => r.r0 === 0 && r.r1 === rowCount - 1 && colIdx >= r.c0 && colIdx <= r.c1);
+
   // Selection refers to displayed rows, so a re-sort or a different row count invalidates it.
   React.useEffect(() => {
     setSel(null);
@@ -307,6 +343,27 @@ function DataGrid<TData>({
     setSel({ anchor: { row, columnId }, end: { row, columnId } });
   }
 
+  /** Select a whole column (Ctrl/Cmd+click, Ctrl+Space on its header), keeping other ranges; or, with `extend`, span from the anchor column. */
+  function selectColumn(columnId: string, mode: "replace" | "add" | "extend") {
+    if (rowCount === 0) return;
+    const last = rowCount - 1;
+    if (mode === "extend") {
+      const from = sel?.anchor.columnId ?? columnId;
+      setSel({ anchor: { row: 0, columnId: from }, end: { row: last, columnId } });
+      return;
+    }
+    if (mode === "add" && sel) setExtra((x) => [...x, sel]);
+    else if (mode === "replace") setExtra([]);
+    setSel({ anchor: { row: 0, columnId }, end: { row: last, columnId } });
+  }
+
+  /** Select a whole row (Shift+Space on one of its cells). */
+  function selectRow(row: number) {
+    if (colIds.length === 0) return;
+    setExtra([]);
+    setSel({ anchor: { row, columnId: colIds[0]! }, end: { row, columnId: colIds[colIds.length - 1]! } });
+  }
+
   function selectAll() {
     if (rowCount === 0 || colIds.length === 0) return;
     setExtra([]);
@@ -364,6 +421,63 @@ function DataGrid<TData>({
     setActive({ row: r, columnId });
   }
 
+  const AUTOSCROLL_EDGE = 12; // px inside the edge where scrolling starts
+  const AUTOSCROLL_MAX = 40; // px per frame
+  /** One frame of drag auto-scroll: scroll toward the pointer and extend the range to the cell it points at. */
+  autoScrollStepRef.current = () => {
+    const el = containerRef.current;
+    const p = pointerRef.current;
+    const start = dragRef.current;
+    if (!el || !p || !start || rowCount === 0 || el.clientHeight === 0) return false; // no layout (hidden grid): nothing to scroll
+    const rect = el.getBoundingClientRect();
+    const rtl = getComputedStyle(el).direction === "rtl";
+    const widthOf = (c: DataGridColumn<TData>) => widths[c.id] ?? c.width ?? DEFAULT_WIDTH;
+    const leftPinnedWidth = renderedColumns.filter((c) => c.pinned === "left").reduce((n, c) => n + widthOf(c), 0);
+    const rightPinnedWidth = renderedColumns.filter((c) => c.pinned === "right").reduce((n, c) => n + widthOf(c), 0);
+    // the area the range can grow into: under the sticky header, between the pinned columns
+    const top = rect.top + HEADER_HEIGHT;
+    const bottom = rect.top + el.clientHeight;
+    const left = rect.left + leftPinnedWidth;
+    const right = rect.left + el.clientWidth - rightPinnedWidth;
+    const push = (over: number) => Math.min(AUTOSCROLL_MAX, 2 + Math.abs(over) / 2) * Math.sign(over);
+    const dy = p.y < top + AUTOSCROLL_EDGE ? push(p.y - (top + AUTOSCROLL_EDGE)) : p.y > bottom - AUTOSCROLL_EDGE ? push(p.y - (bottom - AUTOSCROLL_EDGE)) : 0;
+    const dx = rtl ? 0 : p.x < left + AUTOSCROLL_EDGE ? push(p.x - (left + AUTOSCROLL_EDGE)) : p.x > right - AUTOSCROLL_EDGE ? push(p.x - (right - AUTOSCROLL_EDGE)) : 0;
+    if (dx === 0 && dy === 0) return false;
+    el.scrollTop += dy;
+    el.scrollLeft += dx;
+
+    // the cell under the pointer, clamped into the growable area — from geometry, not the DOM, since the
+    // virtualized row under the pointer may not have rendered yet
+    const cy = Math.max(top + 1, Math.min(p.y, bottom - 1));
+    const row = Math.max(0, Math.min(rowCount - 1, Math.floor((cy - top + el.scrollTop) / rowHeight)));
+    let columnId: string | undefined;
+    if (!rtl) {
+      const cx = Math.max(left + 1, Math.min(p.x, right - 1)) - rect.left + el.scrollLeft;
+      let acc = 0;
+      for (const c of renderedColumns) {
+        acc += widthOf(c);
+        if (cx < acc) {
+          columnId = c.id;
+          break;
+        }
+      }
+      columnId ??= renderedColumns[renderedColumns.length - 1]?.id;
+    }
+    setSel((prev) => {
+      const col = columnId ?? prev?.end.columnId ?? start.columnId;
+      if (prev && prev.end.row === row && prev.end.columnId === col) return prev;
+      return { anchor: start, end: { row, columnId: col } };
+    });
+    lastAutoCellRef.current = { row, columnId: columnId ?? lastAutoCellRef.current?.columnId ?? start.columnId };
+    return true;
+  };
+  // After an auto-scrolled drag, the last cell reached becomes the active one so Shift+arrows continue from it.
+  dragEndedRef.current = () => {
+    const cell = lastAutoCellRef.current;
+    lastAutoCellRef.current = null;
+    if (cell) moveTo(cell.row, cell.columnId);
+  };
+
   // Runs after every render until the pending target exists in the DOM (it may need a scroll first).
   React.useEffect(() => {
     const p = pendingFocusRef.current;
@@ -417,6 +531,15 @@ function DataGrid<TData>({
     }
 
     const mod = e.ctrlKey || e.metaKey;
+    if (selectable && row < 0 && mod && e.key === " ") {
+      // header: select this column, keeping what is selected (the keyboard twin of Ctrl/Cmd+click)
+      e.preventDefault();
+      return selectColumn(column.id, "add");
+    }
+    if (selectable && row >= 0 && e.shiftKey && !mod && e.key === " ") {
+      e.preventDefault();
+      return selectRow(row);
+    }
     if (selectable && row >= 0) {
       if (mod && e.key.toLowerCase() === "a") {
         e.preventDefault();
@@ -509,6 +632,7 @@ function DataGrid<TData>({
                 data-header={column.id}
                 aria-colindex={colIdx + 1}
                 aria-keyshortcuts={`Shift+ArrowLeft Shift+ArrowRight${column.pinned ? "" : " Alt+ArrowLeft Alt+ArrowRight"}`}
+                aria-selected={selectable ? isColumnSelected(colIdx) : undefined}
                 {...(column.sortable
                   ? { "aria-sort": isSorted ? (sort!.direction === "asc" ? "ascending" : "descending") : "none" }
                   : {})}
@@ -531,7 +655,12 @@ function DataGrid<TData>({
                     return next;
                   });
                 }}
-                onClick={() => column.sortable && toggleSort(column.id)}
+                onClick={(e) => {
+                  // with selection on, Ctrl/Cmd+click and Shift+click select the column instead of sorting
+                  if (selectable && (e.ctrlKey || e.metaKey)) return selectColumn(column.id, "add");
+                  if (selectable && e.shiftKey) return selectColumn(column.id, "extend");
+                  if (column.sortable) toggleSort(column.id);
+                }}
                 // roving tabindex: the grid is one tab stop; arrows move between cells (see onNavKeyDown)
                 tabIndex={tabStop.row === -1 && tabStop.columnId === column.id ? 0 : -1}
                 onFocus={() => setActive({ row: -1, columnId: column.id })}
@@ -540,6 +669,7 @@ function DataGrid<TData>({
                   "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                   column.sortable && "cursor-pointer hover:text-foreground",
                   column.pinned && "bg-background",
+                  selectable && isColumnSelected(colIdx) && "bg-accent text-accent-foreground",
                 )}
                 style={{ width, ...pinnedStyle }}
               >

package/src/components-keyboard.test.tsx

@@ -708,6 +708,84 @@ describe("DataGrid", () => {
       expect(selectedCells()).toHaveLength(6);
     });
 
+    describe("whole columns and rows", () => {
+      it("Ctrl+click on a header selects that whole column; a plain click still sorts", async () => {
+        const user = userEvent.setup();
+        const onSelectionChange = vi.fn();
+        setup({ selectable: true, onSelectionChange });
+        await user.keyboard("{Control>}");
+        await user.click(header("Name"));
+        await user.keyboard("{/Control}");
+        expect(selectedCells()).toHaveLength(3);
+        expect(header("Name")).toHaveAttribute("aria-selected", "true");
+        expect(header("ID")).toHaveAttribute("aria-selected", "false");
+        expect(header("Name")).toHaveAttribute("aria-sort", "none"); // selecting did not sort
+        expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, 2], columns: ["name"], ranges: [{ rows: [0, 2], columns: ["name"] }] });
+
+        await user.click(header("Name")); // plain click: sort
+        expect(header("Name")).toHaveAttribute("aria-sort", "ascending");
+      });
+
+      it("Ctrl+click on a second header keeps the first column; Shift+click extends across columns", async () => {
+        const user = userEvent.setup();
+        const onSelectionChange = vi.fn();
+        setup({ selectable: true, onSelectionChange });
+        await user.keyboard("{Control>}");
+        await user.click(header("Name"));
+        await user.click(header("ID"));
+        await user.keyboard("{/Control}");
+        expect(onSelectionChange).toHaveBeenLastCalledWith({
+          rows: [0, 2],
+          columns: ["id"],
+          ranges: [
+            { rows: [0, 2], columns: ["name"] },
+            { rows: [0, 2], columns: ["id"] },
+          ],
+        });
+
+        await user.click(cell(0, 0)); // clears
+        await user.keyboard("{Control>}");
+        await user.click(header("Name"));
+        await user.keyboard("{/Control}{Shift>}");
+        await user.click(header("ID"));
+        await user.keyboard("{/Shift}");
+        expect(selectedCells()).toHaveLength(6);
+        expect(header("Name")).toHaveAttribute("aria-selected", "true");
+        expect(header("ID")).toHaveAttribute("aria-selected", "true");
+      });
+
+      it("Ctrl+Space on a focused header selects its column", async () => {
+        const user = userEvent.setup();
+        setup({ selectable: true });
+        await user.tab();
+        expect(header("Name")).toHaveFocus();
+        await user.keyboard("{Control>} {/Control}");
+        expect(selectedCells()).toHaveLength(3);
+        expect(header("Name")).toHaveAttribute("aria-selected", "true");
+        expect(screen.getByRole("status")).toHaveTextContent("3 cells selected");
+      });
+
+      it("Shift+Space on a cell selects its whole row", async () => {
+        const user = userEvent.setup();
+        const onSelectionChange = vi.fn();
+        setup({ selectable: true, onSelectionChange });
+        await user.tab();
+        await user.keyboard("{ArrowDown}{ArrowDown}"); // row 1
+        await user.keyboard("{Shift>} {/Shift}");
+        expect(selectedCells()).toHaveLength(2);
+        expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [1, 1], columns: ["name", "id"], ranges: [{ rows: [1, 1], columns: ["name", "id"] }] });
+      });
+
+      it("headers are not selectable without `selectable`: Ctrl+click just sorts nothing, no aria-selected", async () => {
+        const user = userEvent.setup();
+        setup();
+        await user.keyboard("{Control>}");
+        await user.click(header("Name"));
+        await user.keyboard("{/Control}");
+        expect(header("Name")).not.toHaveAttribute("aria-selected");
+      });
+    });
+
     it("a plain click clears the selection", async () => {
       const user = userEvent.setup();
       setup({ selectable: true });