fix(data-grid): exclude select column from cmd+a selection

src/hooks/test/use-data-grid.test.tsx

@@ -1,7 +1,8 @@
 import type { ColumnDef } from "@tanstack/react-table";
 import type * as React from "react";
 
-import { act, renderHook } from "@testing-library/react";
+import { act, render, renderHook } from "@testing-library/react";
+import { useEffect } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import type { DataGridFeatures } from "@/lib/data-grid-features";
@@ -56,6 +57,13 @@ const testColumns: ColumnDef<DataGridFeatures, TestData>[] = [
   },
 ];
 
+const columnsWithSelect: ColumnDef<DataGridFeatures, TestData>[] = [
+  { id: "select" },
+  { id: "name", accessorKey: "name" },
+  { id: "trick", accessorKey: "trick" },
+  { id: "actions" },
+];
+
 function createWrapper() {
   return function Wrapper({ children }: { children: React.ReactNode }) {
     return <>{children}</>;
@@ -1520,6 +1528,84 @@ describe("useDataGrid", () => {
       );
     });
 
+    it("should select data cells with Cmd+A and skip the select column", () => {
+      const gridRef: {
+        current?: ReturnType<typeof useDataGrid<TestData>>;
+      } = {};
+
+      function Harness() {
+        const api = useDataGrid({
+          data: testData.slice(0, 2),
+          columns: columnsWithSelect,
+        });
+
+        useEffect(() => {
+          gridRef.current = api;
+        });
+
+        return <div ref={api.dataGridRef} />;
+      }
+
+      const { container } = render(<Harness />);
+      const grid = gridRef.current;
+      const gridElement = container.firstElementChild as HTMLElement;
+
+      act(() => {
+        grid?.tableMeta.onCellClick?.(0, "name");
+      });
+
+      act(() => {
+        gridElement.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: "a",
+            metaKey: true,
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+      });
+
+      // 2 rows × 2 data columns. select and actions are not cells.
+      expect(grid?.tableMeta.selectionState?.selectedCells.size).toBe(4);
+      expect(grid?.tableMeta.getIsCellSelected?.(0, "name")).toBe(true);
+      expect(grid?.tableMeta.getIsCellSelected?.(1, "trick")).toBe(true);
+      expect(grid?.tableMeta.getIsCellSelected?.(0, "select")).toBe(false);
+      expect(grid?.tableMeta.getIsCellSelected?.(1, "actions")).toBe(false);
+      expect(grid?.tableMeta.selectionState?.selectionRange).toEqual({
+        start: { rowIndex: 0, columnId: "name" },
+        end: { rowIndex: 1, columnId: "trick" },
+      });
+    });
+
+    it("should not count the select column when selecting rows", () => {
+      const { result } = renderHook(
+        () =>
+          useDataGrid({
+            data: testData.slice(0, 2),
+            columns: columnsWithSelect,
+            getRowId: (row) => row.id,
+          }),
+        { wrapper: createWrapper() },
+      );
+
+      act(() => {
+        result.current.table.toggleAllRowsSelected(true);
+      });
+
+      expect(result.current.tableMeta.selectionState?.selectedCells.size).toBe(
+        4,
+      );
+      expect(result.current.tableMeta.getIsCellSelected?.(0, "select")).toBe(
+        false,
+      );
+      expect(result.current.tableMeta.getIsCellSelected?.(0, "actions")).toBe(
+        false,
+      );
+      expect(result.current.tableMeta.getIsCellSelected?.(1, "name")).toBe(
+        true,
+      );
+    });
+
     it("should clear selection when clicking column with enableColumnSelection false", () => {
       const { result } = renderHook(
         () =>

src/registry/bases/base/hooks/use-data-grid.ts

@@ -486,26 +486,29 @@ function useDataGrid<TData extends RowData>({
     const rowCount = rows.length ?? propsRef.current.data.length;
 
     for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-      for (const columnId of columnIds) {
+      for (const columnId of navigableColumnIds) {
         allCells.add(getCellKey(rowIndex, columnId));
       }
     }
 
-    const firstColumnId = columnIds[0];
-    const lastColumnId = columnIds[columnIds.length - 1];
+    const firstColumnId = navigableColumnIds[0];
+    const lastColumnId = navigableColumnIds[navigableColumnIds.length - 1];
 
     store.setState("selectionState", {
       selectedCells: allCells,
       selectionRange:
-        columnIds.length > 0 && rowCount > 0 && firstColumnId && lastColumnId
+        navigableColumnIds.length > 0 &&
+        rowCount > 0 &&
+        firstColumnId &&
+        lastColumnId
           ? {
               start: { rowIndex: 0, columnId: firstColumnId },
               end: { rowIndex: rowCount - 1, columnId: lastColumnId },
             }
           : null,
       isSelecting: false,
     });
-  }, [columnIds, propsRef, store]);
+  }, [navigableColumnIds, propsRef, store]);
 
   const selectColumn = React.useCallback(
     (columnId: string) => {
@@ -2010,7 +2013,7 @@ function useDataGrid<TData extends RowData>({
         const rowIndex = rows.findIndex((r) => r.id === rowId);
         if (rowIndex === -1) continue;
 
-        for (const columnId of columnIds) {
+        for (const columnId of navigableColumnIds) {
           selectedCells.add(getCellKey(rowIndex, columnId));
         }
       }
@@ -2028,7 +2031,7 @@ function useDataGrid<TData extends RowData>({
 
       propsRef.current.onRowSelectionChange?.(updater);
     },
-    [store, columnIds, propsRef],
+    [store, navigableColumnIds, propsRef],
   );
 
   const onRowSelect = React.useCallback(

src/registry/bases/radix/hooks/use-data-grid.ts

@@ -486,26 +486,29 @@ function useDataGrid<TData extends RowData>({
     const rowCount = rows.length ?? propsRef.current.data.length;
 
     for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-      for (const columnId of columnIds) {
+      for (const columnId of navigableColumnIds) {
         allCells.add(getCellKey(rowIndex, columnId));
       }
     }
 
-    const firstColumnId = columnIds[0];
-    const lastColumnId = columnIds[columnIds.length - 1];
+    const firstColumnId = navigableColumnIds[0];
+    const lastColumnId = navigableColumnIds[navigableColumnIds.length - 1];
 
     store.setState("selectionState", {
       selectedCells: allCells,
       selectionRange:
-        columnIds.length > 0 && rowCount > 0 && firstColumnId && lastColumnId
+        navigableColumnIds.length > 0 &&
+        rowCount > 0 &&
+        firstColumnId &&
+        lastColumnId
           ? {
               start: { rowIndex: 0, columnId: firstColumnId },
               end: { rowIndex: rowCount - 1, columnId: lastColumnId },
             }
           : null,
       isSelecting: false,
     });
-  }, [columnIds, propsRef, store]);
+  }, [navigableColumnIds, propsRef, store]);
 
   const selectColumn = React.useCallback(
     (columnId: string) => {
@@ -2010,7 +2013,7 @@ function useDataGrid<TData extends RowData>({
         const rowIndex = rows.findIndex((r) => r.id === rowId);
         if (rowIndex === -1) continue;
 
-        for (const columnId of columnIds) {
+        for (const columnId of navigableColumnIds) {
           selectedCells.add(getCellKey(rowIndex, columnId));
         }
       }
@@ -2028,7 +2031,7 @@ function useDataGrid<TData extends RowData>({
 
       propsRef.current.onRowSelectionChange?.(updater);
     },
-    [store, columnIds, propsRef],
+    [store, navigableColumnIds, propsRef],
   );
 
   const onRowSelect = React.useCallback(