@kinetixui/ui 0.18.0 → 0.19.0

package/dist/index.d.ts

@@ -1621,6 +1621,13 @@ interface DataGridColumn<TData> {
     editable?: boolean;
     onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
 }
+/** A rectangular range of cells, in display order (after sorting and column reordering). */
+interface DataGridSelection {
+    /** first and last selected row index, inclusive, into the *displayed* (sorted) rows */
+    rows: [number, number];
+    /** ids of the selected columns, in display order */
+    columns: string[];
+}
 interface DataGridProps<TData> {
     columns: DataGridColumn<TData>[];
     data: TData[];
@@ -1630,6 +1637,14 @@ interface DataGridProps<TData> {
     overscan?: number;
     getRowId?: (row: TData, index: number) => React$1.Key;
     className?: string;
+    /**
+     * Opt in to range selection: Shift+arrows / Shift+click extend a rectangle from the anchor cell,
+     * Ctrl/Cmd+A selects everything, Ctrl/Cmd+C copies the range as tab-separated text (each
+     * column's `value()`; empty where a column has none), Esc clears. Sets aria-multiselectable.
+     */
+    selectable?: boolean;
+    /** fires when the selected range changes; `null` when it is cleared */
+    onSelectionChange?: (selection: DataGridSelection | null) => void;
 }
 /**
  * DataGrid — the "product on its own" the `COMPONENT-ADDITIONS.md` Tier 3
@@ -1647,7 +1662,7 @@ interface DataGridProps<TData> {
  * flexibility, at the cost of the native table-navigation semantics
  * `DataTable` still gets for free.
  */
-declare function DataGrid<TData>({ columns, data, height, rowHeight, overscan, getRowId, className, }: DataGridProps<TData>): React$1.JSX.Element;
+declare function DataGrid<TData>({ columns, data, height, rowHeight, overscan, getRowId, className, selectable, onSelectionChange, }: DataGridProps<TData>): React$1.JSX.Element;
 
 interface JsonViewerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
     data: unknown;

package/dist/index.js

@@ -5029,7 +5029,9 @@ function DataGrid({
   rowHeight = DEFAULT_ROW_HEIGHT,
   overscan = 6,
   getRowId,
-  className
+  className,
+  selectable = false,
+  onSelectionChange
 }) {
   const columnById = React83.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
   const [order, setOrder] = React83.useState(() => columns.map((c) => c.id));
@@ -5145,12 +5147,57 @@ function DataGrid({
   const [active, setActive] = React83.useState({ row: -1, columnId: columns[0]?.id ?? "" });
   const pendingFocusRef = React83.useRef(null);
   const [announcement, setAnnouncement] = React83.useState("");
+  const [sel, setSel] = React83.useState(null);
+  const onSelectionChangeRef = React83.useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const lastEmittedRef = React83.useRef("null");
   const rowCount = sortedData.length;
   const colIds = renderedColumns.map((c) => c.id);
   const activeCol = colIds.includes(active.columnId) ? active.columnId : colIds[0] ?? "";
   const activeRow = Math.min(active.row, rowCount - 1);
   const activeRendered = activeRow < 0 || activeRow >= startIndex && activeRow < endIndex;
   const tabStop = { row: activeRendered ? activeRow : -1, columnId: activeCol };
+  const colKey = colIds.join("|");
+  const range = React83.useMemo(() => {
+    if (!selectable || !sel) return null;
+    const a = colIds.indexOf(sel.anchor.columnId);
+    const b = colIds.indexOf(sel.end.columnId);
+    if (a < 0 || b < 0) return null;
+    return { r0: Math.min(sel.anchor.row, sel.end.row), r1: Math.max(sel.anchor.row, sel.end.row), c0: Math.min(a, b), c1: Math.max(a, b) };
+  }, [selectable, sel, colKey]);
+  React83.useEffect(() => setSel(null), [sort, rowCount]);
+  React83.useEffect(() => {
+    if (!selectable) return;
+    const value = range ? { rows: [range.r0, range.r1], columns: colIds.slice(range.c0, range.c1 + 1) } : null;
+    const key = JSON.stringify(value);
+    if (key === lastEmittedRef.current) return;
+    lastEmittedRef.current = key;
+    onSelectionChangeRef.current?.(value);
+    setAnnouncement(value ? `${(range.r1 - range.r0 + 1) * (range.c1 - range.c0 + 1)} cells selected` : "Selection cleared");
+  }, [selectable, range]);
+  function extendSelection(fromRow, fromCol, toRow, toCol) {
+    const anchor = sel?.anchor ?? { row: fromRow, columnId: fromCol };
+    const end = { row: Math.max(0, Math.min(toRow, rowCount - 1)), columnId: toCol };
+    setSel({ anchor, end });
+    moveTo(end.row, end.columnId);
+  }
+  function selectAll() {
+    if (rowCount === 0 || colIds.length === 0) return;
+    setSel({ anchor: { row: 0, columnId: colIds[0] }, end: { row: rowCount - 1, columnId: colIds[colIds.length - 1] } });
+  }
+  function copySelection() {
+    if (!range) return;
+    const ids = colIds.slice(range.c0, range.c1 + 1);
+    const text = sortedData.slice(range.r0, range.r1 + 1).map((r) => ids.map((id) => {
+      const c = columnById.get(id);
+      return c?.value ? String(c.value(r)) : "";
+    }).join("	")).join("\n");
+    try {
+      void navigator.clipboard?.writeText(text);
+      setAnnouncement(`Copied ${(range.r1 - range.r0 + 1) * ids.length} cells`);
+    } catch {
+    }
+  }
   const pageRows = Math.max(1, Math.floor((viewportHeight - HEADER_HEIGHT) / rowHeight) - 1);
   const labelOf = (c) => typeof c.header === "string" ? c.header : c.id;
   function ensureRowVisible(row) {
@@ -5224,9 +5271,28 @@ function DataGrid({
       else resizeColumn(column, horizontal * 10);
       return;
     }
+    const mod = e.ctrlKey || e.metaKey;
+    if (selectable && row >= 0) {
+      if (mod && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        return selectAll();
+      }
+      if (mod && e.key.toLowerCase() === "c" && range) {
+        e.preventDefault();
+        return copySelection();
+      }
+      if (e.key === "Escape" && sel) {
+        e.preventDefault();
+        return setSel(null);
+      }
+    }
+    const extend = selectable && e.shiftKey && row >= 0;
     const go = (r, i) => {
       e.preventDefault();
-      moveTo(r, colIds[Math.max(0, Math.min(i, colIds.length - 1))]);
+      const target = colIds[Math.max(0, Math.min(i, colIds.length - 1))];
+      if (extend) return extendSelection(row, column.id, r, target);
+      if (sel) setSel(null);
+      moveTo(r, target);
     };
     switch (e.key) {
       case "ArrowRight":
@@ -5270,6 +5336,7 @@ function DataGrid({
         role: "grid",
         "aria-rowcount": rowCount + 1,
         "aria-colcount": colIds.length,
+        "aria-multiselectable": selectable || void 0,
         className: cn("relative overflow-auto rounded-md border font-sans text-sm", className),
         style: { height },
         onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
@@ -5346,19 +5413,29 @@ function DataGrid({
                   const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
                   const pinnedStyle = column.pinned === "left" ? { position: "sticky", left: leftOffsets[column.id], zIndex: 1 } : column.pinned === "right" ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 } : {};
                   const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
+                  const selected = selectable && !!range && rowIndex >= range.r0 && rowIndex <= range.r1 && colIdx >= range.c0 && colIdx <= range.c1;
                   return /* @__PURE__ */ jsx89(
                     "div",
                     {
                       role: "gridcell",
                       "aria-colindex": colIdx + 1,
+                      "aria-selected": selectable ? selected : void 0,
                       "data-cell": `${rowIndex}:${column.id}`,
+                      onMouseDown: (e) => {
+                        if (!selectable || e.button !== 0) return;
+                        if (e.shiftKey) {
+                          e.preventDefault();
+                          extendSelection(activeRow >= 0 ? activeRow : rowIndex, activeCol, rowIndex, column.id);
+                        } else if (sel) setSel(null);
+                      },
                       onDoubleClick: () => column.editable && setEditing({ rowIndex, columnId: column.id }),
                       tabIndex: tabStop.row === rowIndex && tabStop.columnId === column.id ? 0 : -1,
                       onFocus: () => setActive({ row: rowIndex, columnId: column.id }),
                       onKeyDown: (e) => onNavKeyDown(e, rowIndex, column),
                       className: cn(
                         "flex shrink-0 items-center px-2 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-                        column.pinned && "bg-background"
+                        column.pinned && "bg-background",
+                        selected && "bg-accent"
                       ),
                       style: { width, ...pinnedStyle },
                       children: isEditing ? /* @__PURE__ */ jsx89(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.18.0",
+  "version": "0.19.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.18.0",
+    "@kinetixui/tokens": "0.19.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

@@ -24,6 +24,14 @@ export interface DataGridColumn<TData> {
   onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
 }
 
+/** A rectangular range of cells, in display order (after sorting and column reordering). */
+export interface DataGridSelection {
+  /** first and last selected row index, inclusive, into the *displayed* (sorted) rows */
+  rows: [number, number];
+  /** ids of the selected columns, in display order */
+  columns: string[];
+}
+
 export interface DataGridProps<TData> {
   columns: DataGridColumn<TData>[];
   data: TData[];
@@ -33,6 +41,14 @@ export interface DataGridProps<TData> {
   overscan?: number;
   getRowId?: (row: TData, index: number) => React.Key;
   className?: string;
+  /**
+   * Opt in to range selection: Shift+arrows / Shift+click extend a rectangle from the anchor cell,
+   * Ctrl/Cmd+A selects everything, Ctrl/Cmd+C copies the range as tab-separated text (each
+   * column's `value()`; empty where a column has none), Esc clears. Sets aria-multiselectable.
+   */
+  selectable?: boolean;
+  /** fires when the selected range changes; `null` when it is cleared */
+  onSelectionChange?: (selection: DataGridSelection | null) => void;
 }
 
 type SortState = { columnId: string; direction: "asc" | "desc" } | null;
@@ -61,6 +77,8 @@ function DataGrid<TData>({
   overscan = 6,
   getRowId,
   className,
+  selectable = false,
+  onSelectionChange,
 }: DataGridProps<TData>) {
   const columnById = React.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
   const [order, setOrder] = React.useState(() => columns.map((c) => c.id));
@@ -203,6 +221,13 @@ function DataGrid<TData>({
   const pendingFocusRef = React.useRef<Pos | null>(null);
   const [announcement, setAnnouncement] = React.useState("");
 
+  // ── range selection (opt-in) ──────────────────────────────────────────────────────────────
+  type Anchor = { row: number; columnId: string };
+  const [sel, setSel] = React.useState<{ anchor: Anchor; end: Anchor } | null>(null);
+  const onSelectionChangeRef = React.useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const lastEmittedRef = React.useRef("null");
+
   const rowCount = sortedData.length;
   const colIds = renderedColumns.map((c) => c.id);
   const activeCol = colIds.includes(active.columnId) ? active.columnId : (colIds[0] ?? "");
@@ -211,6 +236,57 @@ function DataGrid<TData>({
   // the grid stays reachable by Tab
   const activeRendered = activeRow < 0 || (activeRow >= startIndex && activeRow < endIndex);
   const tabStop: Pos = { row: activeRendered ? activeRow : -1, columnId: activeCol };
+  const colKey = colIds.join("|");
+  const range = React.useMemo(() => {
+    if (!selectable || !sel) return null;
+    const a = colIds.indexOf(sel.anchor.columnId);
+    const b = colIds.indexOf(sel.end.columnId);
+    if (a < 0 || b < 0) return null;
+    return { r0: Math.min(sel.anchor.row, sel.end.row), r1: Math.max(sel.anchor.row, sel.end.row), c0: Math.min(a, b), c1: Math.max(a, b) };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectable, sel, colKey]);
+
+  // Selection refers to displayed rows, so a re-sort or a different row count invalidates it.
+  React.useEffect(() => setSel(null), [sort, rowCount]);
+
+  React.useEffect(() => {
+    if (!selectable) return;
+    const value = range ? { rows: [range.r0, range.r1] as [number, number], columns: colIds.slice(range.c0, range.c1 + 1) } : null;
+    const key = JSON.stringify(value);
+    if (key === lastEmittedRef.current) return;
+    lastEmittedRef.current = key;
+    onSelectionChangeRef.current?.(value);
+    setAnnouncement(value ? `${(range!.r1 - range!.r0 + 1) * (range!.c1 - range!.c0 + 1)} cells selected` : "Selection cleared");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectable, range]);
+
+  function extendSelection(fromRow: number, fromCol: string, toRow: number, toCol: string) {
+    const anchor = sel?.anchor ?? { row: fromRow, columnId: fromCol };
+    const end = { row: Math.max(0, Math.min(toRow, rowCount - 1)), columnId: toCol };
+    setSel({ anchor, end });
+    moveTo(end.row, end.columnId);
+  }
+
+  function selectAll() {
+    if (rowCount === 0 || colIds.length === 0) return;
+    setSel({ anchor: { row: 0, columnId: colIds[0]! }, end: { row: rowCount - 1, columnId: colIds[colIds.length - 1]! } });
+  }
+
+  function copySelection() {
+    if (!range) return;
+    const ids = colIds.slice(range.c0, range.c1 + 1);
+    const text = sortedData
+      .slice(range.r0, range.r1 + 1)
+      .map((r) => ids.map((id) => { const c = columnById.get(id); return c?.value ? String(c.value(r)) : ""; }).join("\t"))
+      .join("\n");
+    try {
+      void navigator.clipboard?.writeText(text);
+      setAnnouncement(`Copied ${(range.r1 - range.r0 + 1) * ids.length} cells`);
+    } catch {
+      /* clipboard unavailable (insecure context / permission) — nothing to announce */
+    }
+  }
+
   const pageRows = Math.max(1, Math.floor((viewportHeight - HEADER_HEIGHT) / rowHeight) - 1);
   const labelOf = (c: DataGridColumn<TData>) => (typeof c.header === "string" ? c.header : c.id);
 
@@ -295,9 +371,28 @@ function DataGrid<TData>({
       return;
     }
 
+    const mod = e.ctrlKey || e.metaKey;
+    if (selectable && row >= 0) {
+      if (mod && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        return selectAll();
+      }
+      if (mod && e.key.toLowerCase() === "c" && range) {
+        e.preventDefault();
+        return copySelection();
+      }
+      if (e.key === "Escape" && sel) {
+        e.preventDefault();
+        return setSel(null);
+      }
+    }
+    const extend = selectable && e.shiftKey && row >= 0;
     const go = (r: number, i: number) => {
       e.preventDefault();
-      moveTo(r, colIds[Math.max(0, Math.min(i, colIds.length - 1))]!);
+      const target = colIds[Math.max(0, Math.min(i, colIds.length - 1))]!;
+      if (extend) return extendSelection(row, column.id, r, target);
+      if (sel) setSel(null); // a plain move collapses the range
+      moveTo(r, target);
     };
     switch (e.key) {
       case "ArrowRight":
@@ -341,6 +436,7 @@ function DataGrid<TData>({
       role="grid"
       aria-rowcount={rowCount + 1}
       aria-colcount={colIds.length}
+      aria-multiselectable={selectable || undefined}
       className={cn("relative overflow-auto rounded-md border font-sans text-sm", className)}
       style={{ height }}
       onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
@@ -434,12 +530,23 @@ function DataGrid<TData>({
                         ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 }
                         : {};
                   const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
+                  const selected = selectable && !!range && rowIndex >= range.r0 && rowIndex <= range.r1 && colIdx >= range.c0 && colIdx <= range.c1;
                   return (
                     <div
                       key={column.id}
                       role="gridcell"
                       aria-colindex={colIdx + 1}
+                      aria-selected={selectable ? selected : undefined}
                       data-cell={`${rowIndex}:${column.id}`}
+                      onMouseDown={(e) => {
+                        if (!selectable || e.button !== 0) return;
+                        if (e.shiftKey) {
+                          // extend from the previously active cell (focus has not moved yet on mousedown) — even when it has
+                          // since scrolled out of the rendered window
+                          e.preventDefault();
+                          extendSelection(activeRow >= 0 ? activeRow : rowIndex, activeCol, rowIndex, column.id);
+                        } else if (sel) setSel(null);
+                      }}
                       onDoubleClick={() => column.editable && setEditing({ rowIndex, columnId: column.id })}
                       // roving tabindex; Enter or F2 edits an editable cell (the spreadsheet convention)
                       tabIndex={tabStop.row === rowIndex && tabStop.columnId === column.id ? 0 : -1}
@@ -448,6 +555,7 @@ function DataGrid<TData>({
                       className={cn(
                         "flex shrink-0 items-center px-2 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                         column.pinned && "bg-background",
+                        selected && "bg-accent",
                       )}
                       style={{ width, ...pinnedStyle }}
                     >

package/src/components-keyboard.test.tsx

@@ -6,7 +6,7 @@ import { Checkbox } from "./components/checkbox";
 import { ColorPicker } from "./components/color-picker";
 import { FileUpload } from "./components/file-upload";
 import { List, ListItem } from "./components/list";
-import { DataGrid, type DataGridColumn } from "./components/data-grid";
+import { DataGrid, type DataGridColumn, type DataGridSelection } from "./components/data-grid";
 import { KinetixDirectionProvider } from "./components/direction-provider";
 import {
   Dialog,
@@ -434,13 +434,30 @@ describe("DataGrid", () => {
     { id: 2, name: "Abe" },
     { id: 3, name: "Bea" },
   ];
-  function setup(opts: { onCellEdit?: ReturnType<typeof vi.fn>; data?: Row[]; wrapper?: (n: React.ReactNode) => React.ReactNode } = {}) {
+  function setup(
+    opts: {
+      onCellEdit?: ReturnType<typeof vi.fn>;
+      data?: Row[];
+      wrapper?: (n: React.ReactNode) => React.ReactNode;
+      selectable?: boolean;
+      onSelectionChange?: (s: DataGridSelection | null) => void;
+    } = {},
+  ) {
     const onCellEdit = opts.onCellEdit ?? vi.fn();
     const columns: DataGridColumn<Row>[] = [
       { id: "name", header: "Name", cell: (r) => r.name, value: (r) => r.name, sortable: true, editable: true, onCellEdit },
       { id: "id", header: "ID", cell: (r) => r.id, value: (r) => r.id, minWidth: 60, width: 100 },
     ];
-    const grid = <DataGrid columns={columns} data={opts.data ?? rows} height={200} getRowId={(r) => r.id} />;
+    const grid = (
+      <DataGrid
+        columns={columns}
+        data={opts.data ?? rows}
+        height={200}
+        getRowId={(r) => r.id}
+        selectable={opts.selectable}
+        onSelectionChange={opts.onSelectionChange}
+      />
+    );
     render(
       <>
         {opts.wrapper ? opts.wrapper(grid) : grid}
@@ -612,6 +629,140 @@ describe("DataGrid", () => {
     expect(header("Name")).toHaveFocus();
   });
 
+  describe("range selection (opt-in)", () => {
+    const selectedCells = () => screen.getAllByRole("gridcell").filter((c) => c.getAttribute("aria-selected") === "true");
+
+    it("is off by default: no aria-multiselectable, no aria-selected, Shift+Arrow just moves", async () => {
+      const user = userEvent.setup();
+      setup();
+      expect(screen.getByRole("grid")).not.toHaveAttribute("aria-multiselectable");
+      expect(cell(0, 0)).not.toHaveAttribute("aria-selected");
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(cell(1, 0)).toHaveFocus();
+      expect(cell(0, 0)).not.toHaveAttribute("aria-selected");
+    });
+
+    it("declares the grid multi-selectable and marks every cell selected=false until something is selected", async () => {
+      setup({ selectable: true });
+      expect(screen.getByRole("grid")).toHaveAttribute("aria-multiselectable", "true");
+      expect(cell(0, 0)).toHaveAttribute("aria-selected", "false");
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("Shift+Arrow extends a rectangle from the anchor and reports it", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // Name, row 0 (anchor)
+      await user.keyboard("{Shift>}{ArrowDown}{ArrowRight}{/Shift}");
+
+      expect(selectedCells()).toHaveLength(4); // rows 0-1 x Name, ID
+      expect(cell(1, 1)).toHaveFocus();
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, 1], columns: ["name", "id"] });
+      expect(screen.getByRole("status")).toHaveTextContent("4 cells selected");
+    });
+
+    it("shrinks when Shift moves back toward the anchor", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{ArrowDown}{/Shift}");
+      expect(selectedCells()).toHaveLength(3);
+      await user.keyboard("{Shift>}{ArrowUp}{/Shift}");
+      expect(selectedCells()).toHaveLength(2);
+    });
+
+    it("a plain arrow key collapses the selection", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(selectedCells().length).toBeGreaterThan(0);
+      await user.keyboard("{ArrowDown}");
+      expect(selectedCells()).toHaveLength(0);
+      expect(onSelectionChange).toHaveBeenLastCalledWith(null);
+    });
+
+    it("Ctrl+A selects every cell; Escape clears it", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}");
+      await user.keyboard("{Control>}a{/Control}");
+      expect(selectedCells()).toHaveLength(6); // 3 rows x 2 columns
+      await user.keyboard("{Escape}");
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("Shift+click extends from the previously active cell", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // active: row 0, Name
+      await user.keyboard("{Shift>}");
+      await user.click(cell(2, 1));
+      await user.keyboard("{/Shift}");
+      expect(selectedCells()).toHaveLength(6);
+    });
+
+    it("a plain click clears the selection", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(selectedCells().length).toBeGreaterThan(0);
+      await user.click(cell(2, 0));
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("Ctrl+C copies the range as tab-separated values", async () => {
+      const user = userEvent.setup();
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{ArrowRight}{/Shift}");
+      await user.keyboard("{Control>}c{/Control}");
+      expect(writeText).toHaveBeenCalledWith("Cara\t1\nAbe\t2");
+      expect(screen.getByRole("status")).toHaveTextContent("Copied 4 cells");
+    });
+
+    it("Shift+click extends from the anchor even after it has scrolled out of the rendered window", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      const many = Array.from({ length: 300 }, (_, i) => ({ id: i + 1, name: `Person ${i + 1}` }));
+      setup({ selectable: true, data: many, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // active + anchor: row 0
+      const grid = screen.getByRole("grid");
+      grid.scrollTop = 4000;
+      grid.dispatchEvent(new Event("scroll"));
+      await waitFor(() => expect(screen.queryByText("Person 1")).not.toBeInTheDocument());
+
+      const target = screen.getAllByRole("gridcell").find((c) => c.getAttribute("data-cell")?.endsWith(":name"))!;
+      const targetRow = Number(target.getAttribute("data-cell")!.split(":")[0]);
+      expect(targetRow).toBeGreaterThan(50);
+
+      await user.keyboard("{Shift>}");
+      await user.click(target);
+      await user.keyboard("{/Shift}");
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, targetRow], columns: ["name"] });
+    });
+
+    it("re-sorting clears the selection (it refers to displayed rows)", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(selectedCells().length).toBeGreaterThan(0);
+      await user.keyboard("{ArrowUp}{ArrowUp}{Enter}"); // Name header, sort
+      expect(selectedCells()).toHaveLength(0);
+    });
+  });
+
   describe("with many rows (virtualized)", () => {
     const many: Row[] = Array.from({ length: 200 }, (_, i) => ({ id: i + 1, name: `Person ${i + 1}` }));
 

package/src/stories/DataGrid.stories.tsx

@@ -19,6 +19,7 @@ const Demo = () => {
     return (
       <DataGrid
         className="w-full"
+        selectable
         height={280}
         data={data}
         getRowId={(row) => row.id}
@@ -45,7 +46,7 @@ const meta = {
   title: "Data Display/DataGrid",
   parameters: {
     layout: "padded",
-    docs: { source: { code: "<DataGrid\\n  height={280}\\n  data={data}\\n  getRowId={(row) => row.id}\\n  columns={[\\n    { id: \"id\", header: \"ID\", cell: (row) => row.id, value: (row) => row.id, sortable: true, pinned: \"left\" },\\n    { id: \"name\", header: \"Name\", cell: (row) => row.name, value: (row) => row.name, editable: true, onCellEdit: updateName },\\n    { id: \"qty\", header: \"Qty\", cell: (row) => row.qty, value: (row) => row.qty, sortable: true },\\n  ]}\\n/>", language: "tsx" } },
+    docs: { source: { code: "<DataGrid\\n  selectable\\n  height={280}\\n  data={data}\\n  getRowId={(row) => row.id}\\n  columns={[\\n    { id: \"id\", header: \"ID\", cell: (row) => row.id, value: (row) => row.id, sortable: true, pinned: \"left\" },\\n    { id: \"name\", header: \"Name\", cell: (row) => row.name, value: (row) => row.name, editable: true, onCellEdit: updateName },\\n    { id: \"qty\", header: \"Qty\", cell: (row) => row.qty, value: (row) => row.qty, sortable: true },\\n  ]}\\n/>", language: "tsx" } },
   },
 } satisfies Meta;