Add onRowClick/EnableRowClick and enable pkg.pr.new (#72)

Add onRowClick/EnableRowClick and enable pkg.pr.new

Author: manni497

.github/workflows/pkg.pr.new.yml

@@ -0,0 +1,24 @@
+name: PKG PR New
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [opened, synchronize, ready_for_review]
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: yarn --frozen-lockfile
+
+      - run: npx pkg-pr-new publish

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- property `onRowClick` in `ReactDataTable` in order to define a custom function to execute the row is clicked
+- property `enableRowClick` in `ReactDataTable` in order to define if a row should be clickable or not
+
 ## [5.6.0] - 2024-10-02
 
 ### Added

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -41,6 +41,8 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
     withoutHeaderFilters = false,
     dragAndDropOptions,
     noEntriesMessage,
+    onRowClick,
+    enableRowClick,
   } = props;
 
   const { pagination } = table.getState();
@@ -69,9 +71,11 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
     return enableDragAndDrop ? (
       <SortableContext items={table.getRowModel().rows.map((row) => row.id)} strategy={verticalListSortingStrategy}>
         {table.getRowModel().rows.map((row, index) => (
-          <DraggableRow<TData>
+          <DraggableRow<TData, TFilter>
             key={index}
             row={row}
+            enableRowClick={enableRowClick as ReactDataTableProps<TData, TFilter>["enableRowClick"]}
+            onRowClick={onRowClick as ReactDataTableProps<TData, TFilter>["onRowClick"]}
             enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={rowStyle && rowStyle(row.original)}
@@ -82,9 +86,11 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
     ) : (
       <>
         {table.getRowModel().rows.map((row, index) => (
-          <InternalTableRow<TData>
+          <InternalTableRow<TData, TFilter>
             key={index}
             row={row}
+            enableRowClick={enableRowClick as ReactDataTableProps<TData, TFilter>["enableRowClick"]}
+            onRowClick={onRowClick as ReactDataTableProps<TData, TFilter>["onRowClick"]}
             enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={rowStyle && rowStyle(row.original)}

src/lib/ReactDataTable/ReactDataTableProps.ts

@@ -1,4 +1,4 @@
-import { Table } from "@tanstack/react-table";
+import { Row, Table } from "@tanstack/react-table";
 import { CSSProperties } from "react";
 import { FilterModel } from "../types/TableState";
 import { DragAndDropOptions } from "./DragAndDropOptions";
@@ -53,6 +53,20 @@ export interface ReactDataTableProps<TData, TFilter extends FilterModel> {
    */
   rowStyle?: (row: TData) => CSSProperties;
 
+  /**
+   * boolean indicating whether to enable click for specific row
+   * Notice that this is ignored in case of rowSelection feature is enabled and fullRowSelectable is not provided as false
+   * @param row the row model
+   */
+  enableRowClick?: boolean | ((row: Row<TData>) => boolean);
+
+  /**
+   * callback which gets triggered when the row is clicked
+   * Notice that this is ignored in case of rowSelection feature is enabled and fullRowSelectable is not provided as false
+   * @param row the row model
+   */
+  onRowClick?: (row: Row<TData>) => void | Promise<void>;
+
   /**
    * boolean flag to indicate if the paging should be displayed
    */

src/lib/ReactDataTable/TableRows.tsx

@@ -2,8 +2,11 @@
 import { Row, flexRender } from "@tanstack/react-table";
 import { CSSProperties } from "react";
 import { CSS } from "@dnd-kit/utilities";
+import { FilterModel } from "../types/TableState";
+import { ReactDataTableProps } from "./ReactDataTableProps";
 
-interface TableRowProps<TData> {
+interface TableRowProps<TData, TFilter extends FilterModel = Record<string, never>>
+  extends Pick<ReactDataTableProps<TData, TFilter>, "onRowClick" | "enableRowClick"> {
   row: Row<TData>;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
   fullRowSelectable?: boolean;
@@ -12,21 +15,25 @@ interface TableRowProps<TData> {
   setNodeRef?: (node: HTMLElement | null) => void;
 }
 
-const InternalTableRow = <TData,>(props: TableRowProps<TData>) => {
-  const { row, rowStyle, setNodeRef, enableRowSelection = false, fullRowSelectable = true } = props;
+const InternalTableRow = <TData, TFilter extends FilterModel = Record<string, never>>(props: TableRowProps<TData, TFilter>) => {
+  const { row, rowStyle, setNodeRef, enableRowSelection = false, fullRowSelectable = true, onRowClick, enableRowClick } = props;
   const isRowSelectionEnabled =
     (typeof enableRowSelection === "function" ? enableRowSelection(row) : enableRowSelection) && fullRowSelectable;
-
+  const isRowClickable = typeof enableRowClick === "function" ? enableRowClick(row) : enableRowClick;
   return (
     <tr
       key={row.id}
       ref={setNodeRef}
-      onClick={() => {
+      onClick={async () => {
         if (isRowSelectionEnabled) {
           row.toggleSelected();
+        } else if (isRowClickable && onRowClick) {
+          await onRowClick(row);
+        } else {
+          // Nothing to execute
         }
       }}
-      className={isRowSelectionEnabled ? "cursor-pointer" : undefined}
+      className={isRowSelectionEnabled || isRowClickable ? "cursor-pointer" : undefined}
       style={rowStyle}
     >
       {row.getVisibleCells().map((cell) => (
@@ -38,8 +45,8 @@ const InternalTableRow = <TData,>(props: TableRowProps<TData>) => {
   );
 };
 
-const DraggableRow = <TData,>(props: TableRowProps<TData>) => {
-  const { row, rowStyle, enableRowSelection, fullRowSelectable, enableExpanding } = props;
+const DraggableRow = <TData, TFilter extends FilterModel = Record<string, never>>(props: TableRowProps<TData, TFilter>) => {
+  const { row, rowStyle } = props;
   const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.id });
   const draggableStyle: CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -49,11 +56,8 @@ const DraggableRow = <TData,>(props: TableRowProps<TData>) => {
     position: "relative",
   };
   return (
-    <InternalTableRow
-      row={row}
-      enableRowSelection={enableRowSelection}
-      enableExpanding={enableExpanding}
-      fullRowSelectable={fullRowSelectable}
+    <InternalTableRow<TData, TFilter>
+      {...props}
       setNodeRef={setNodeRef}
       rowStyle={rowStyle ? { ...rowStyle, ...draggableStyle } : draggableStyle}
     />