Merge pull request #51 from Kuechlin/feat-onRow-callback

Feat on row callback
Kuechlin · Aug 2, 2022 · 1f662d1 · 1f662d1
2 parents 5056fde + df87cc1
commit 1f662d1
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 40 deletions.
diff --git a/.github/workflows/github-actions-publish.yml b/.github/workflows/github-actions-publish.yml
@@ -17,4 +17,4 @@ jobs:
           pnpm run build
       - run: npm publish --access public
         env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
diff --git a/docs/pages/Properties.tsx b/docs/pages/Properties.tsx
@@ -91,9 +91,14 @@ const properties = [
         description: 'The initial table state',
       },
       {
-        name: 'onRowClick',
-        type: '(event: MouseEvent<HTMLTableRowElement, MouseEvent>, row: Row<TData>) => void',
-        description: 'Callback when clicking on a specific row',
+        name: 'onRow',
+        type: '(row: Row<TData>) => HTMLAttributes<HTMLTableRowElement>',
+        description: 'Callback to set props pre row',
+      },
+      {
+        name: 'onCell',
+        type: '(cell: Cell<TData, unknown>) => HTMLAttributes<HTMLTableCellElement>',
+        description: ' Callback to set props pre cell',
       },
     ],
   },

diff --git a/docs/pages/examples/OnRowClickExample.tsx b/docs/pages/examples/OnRowClickExample.tsx
@@ -1,4 +1,4 @@
-import { DataGrid, stringFilterFn } from '../../../src';
+import { DataGrid } from '../../../src';
 import CodeDemo from '../../components/CodeDemo';
 import { demoData } from '../../demoData';
 
@@ -10,12 +10,24 @@ export default function OnRowClickExample() {
         columns={[
           {
             accessorKey: 'cat',
-            filterFn: stringFilterFn,
+          },
+          {
+            accessorKey: 'fish',
+          },
+          {
+            accessorKey: 'city',
           },
         ]}
-        onRowClick={(event, row) => {
-          alert(`You clicked on ${row.original.cat}`);
-        }}
+        onRow={(row) => ({
+          onDoubleClick: () => alert(`You clicked on row ${row.index}`),
+        })}
+        onCell={(cell) =>
+          cell.column.id === 'fish'
+            ? {
+                onClick: () => alert(`You clicked on cell ${cell.getValue()}`),
+              }
+            : {}
+        }
       />
     </CodeDemo>
   );
@@ -30,17 +42,29 @@ import { demoData } from '../../demoData';
 function Demo() {
     return (
       <DataGrid
-      data={demoData.slice(0, 10)}
-      columns={[
-        {
-          accessorKey: 'cat',
-          filterFn: stringFilterFn,
-        },
-      ]}
-      onRowClick={(event, row) => {
-        alert(\`You clicked on \${row.original.cat}\`);
-      }}
-    />
+        data={demoData.slice(0, 10)}
+        columns={[
+          {
+            accessorKey: 'cat',
+          },
+          {
+            accessorKey: 'fish',
+          },
+          {
+            accessorKey: 'city',
+          },
+        ]}
+        onRow={(row) => ({
+          onDoubleClick: () => alert(\`You clicked on row \${row.index}\`),
+        })}
+        onCell={(cell) =>
+          cell.column.id === 'fish'
+            ? {
+                onClick: () => alert(\`You clicked on cell \${cell.getValue()}\`),
+              }
+            : {}
+        }
+      />
     );
 }
 `;
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -13,7 +13,6 @@ import {
   SortingState,
   useReactTable,
   RowData,
-  Row,
 } from '@tanstack/react-table';
 import { BoxOff } from 'tabler-icons-react';
 import useStyles from './DataGrid.styles';
@@ -58,7 +57,8 @@ export function DataGrid<TData extends RowData>({
   // table ref
   tableRef,
   initialState,
-  onRowClick,
+  onRow,
+  onCell,
   iconColor,
   // common props
   ...others
@@ -152,15 +152,6 @@ export function DataGrid<TData extends RowData>({
     [onPageChange]
   );
 
-  const handleOnRowClick = useCallback(
-    (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: Row<TData>) => {
-      if (onRowClick) {
-        onRowClick(e, row);
-      }
-    },
-    [onRowClick]
-  );
-
   const pageCount = withPagination
     ? total
       ? Math.floor(total / table.getState().pagination.pageSize)
@@ -261,14 +252,10 @@ export function DataGrid<TData extends RowData>({
               {table.getRowModel().rows.length > 0 ? (
                 <>
                   {table.getRowModel().rows.map((row) => (
-                    <tr
-                      key={row.id}
-                      className={classes.row}
-                      onClick={(event) => handleOnRowClick(event, row)}
-                      role="row"
-                    >
+                    <tr {...(onRow && onRow(row))} key={row.id} className={classes.row} role="row">
                       {row.getVisibleCells().map((cell) => (
                         <td
+                          {...(onCell && onCell(cell))}
                           key={cell.id}
                           style={{
                             width: cell.column.getSize(),

diff --git a/src/types.ts b/src/types.ts
@@ -1,6 +1,7 @@
-import { ComponentPropsWithoutRef, ComponentType, Ref } from 'react';
+import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, Ref } from 'react';
 import { DefaultProps, MantineNumberSize, Selectors } from '@mantine/core';
 import {
+  Cell,
   ColumnDef,
   ColumnFiltersState,
   FilterFn,
@@ -105,9 +106,14 @@ export interface DataGridProps<TData extends RowData>
   initialState?: InitialTableState;
 
   /**
-   * Callback when clicking on a specific row
+   * Callback to set props pre row
    */
-  onRowClick?: (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: Row<TData>) => void;
+  onRow?: (row: Row<TData>) => HTMLAttributes<HTMLTableRowElement>;
+
+  /**
+   * Callback to set props pre cell
+   */
+  onCell?: (cell: Cell<TData, unknown>) => HTMLAttributes<HTMLTableCellElement>;
 
   /**
    * Change Icon Color on Sort & Filter