Enable/Disable selection onClick the row (#71)

Once "enableRowSelection" option is enabled, a toggle can be used in
order to allow the selection clicking anywhere on the row.

Author: Michele-Masciave

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- property `fullRowSelectable` in the `reactTableOptions` to manually disable the selection once `enableRowSelection` is enabled and the row is anywhere clicked
+
 ## [5.5.0] - 2024-09-25
 
 ### Added

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -45,7 +45,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
 
   const { pagination } = table.getState();
   const {
-    options: { manualPagination, enableRowSelection, enableExpanding },
+    options: { manualPagination, enableRowSelection, enableExpanding, fullRowSelectable },
     resetPageIndex,
   } = table;
 
@@ -75,6 +75,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
             enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={rowStyle && rowStyle(row.original)}
+            fullRowSelectable={fullRowSelectable}
           />
         ))}
       </SortableContext>
@@ -87,6 +88,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
             enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={rowStyle && rowStyle(row.original)}
+            fullRowSelectable={fullRowSelectable}
           />
         ))}
       </>

src/lib/ReactDataTable/TableRows.tsx

@@ -6,14 +6,16 @@ import { CSS } from "@dnd-kit/utilities";
 interface TableRowProps<TData> {
   row: Row<TData>;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+  fullRowSelectable?: boolean;
   enableExpanding?: boolean | ((row: Row<TData>) => boolean);
   rowStyle?: CSSProperties;
   setNodeRef?: (node: HTMLElement | null) => void;
 }
 
 const InternalTableRow = <TData,>(props: TableRowProps<TData>) => {
-  const { row, rowStyle, setNodeRef, enableRowSelection = false } = props;
-  const isRowSelectionEnabled = typeof enableRowSelection === "function" ? enableRowSelection(row) : enableRowSelection;
+  const { row, rowStyle, setNodeRef, enableRowSelection = false, fullRowSelectable = true } = props;
+  const isRowSelectionEnabled =
+    (typeof enableRowSelection === "function" ? enableRowSelection(row) : enableRowSelection) && fullRowSelectable;
 
   return (
     <tr
@@ -37,7 +39,7 @@ const InternalTableRow = <TData,>(props: TableRowProps<TData>) => {
 };
 
 const DraggableRow = <TData,>(props: TableRowProps<TData>) => {
-  const { row, rowStyle, enableRowSelection, enableExpanding } = props;
+  const { row, rowStyle, enableRowSelection, fullRowSelectable, enableExpanding } = props;
   const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.id });
   const draggableStyle: CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -51,6 +53,7 @@ const DraggableRow = <TData,>(props: TableRowProps<TData>) => {
       row={row}
       enableRowSelection={enableRowSelection}
       enableExpanding={enableExpanding}
+      fullRowSelectable={fullRowSelectable}
       setNodeRef={setNodeRef}
       rowStyle={rowStyle ? { ...rowStyle, ...draggableStyle } : draggableStyle}
     />

src/react-table.d.ts

@@ -63,4 +63,8 @@ declare module "@tanstack/table-core" {
      */
     isHidden?: boolean;
   }
+
+  interface RowSelectionOptions<TData extends RowData> {
+    fullRowSelectable?: boolean;
+  }
 }

test/DataTable/DataTable.test.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-import { render } from "@testing-library/react";
+import { render, fireEvent } from "@testing-library/react";
 import { renderHook } from "@testing-library/react-hooks/server";
 import "@testing-library/jest-dom";
 import React from "react";
@@ -218,4 +218,29 @@ describe("DataTable", () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  test("fullRowSelectable is working: clicking on the rows it does not select them", () => {
+    const {
+      result: {
+        current: { table },
+      },
+    } = renderHook(() =>
+      useReactDataTable({
+        data: dataDynamic,
+        isLoading: false,
+        columns,
+        reactTableOptions: {
+          fullRowSelectable: false,
+          enableRowSelection: true,
+          enableMultiRowSelection: true,
+          getRowId: (row) => row.id,
+        },
+      }),
+    );
+    render(<ReactDataTable table={table} showPaging totalRecords={dataDynamic?.length} isFetching={false} isLoading={false} />);
+
+    const rows = document.querySelectorAll("tr");
+    rows.forEach((row) => fireEvent.click(row));
+    expect(table.getSelectedRowModel().rows.length).toBe(0);
+  });
 });