diff --git a/.github/workflows/github-actions-publish.yml b/.github/workflows/github-actions-publish.yml index 96a0419..896cad8 100644 --- 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 index e072eaa..bd0aeb6 100644 --- 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, row: Row) => void', - description: 'Callback when clicking on a specific row', + name: 'onRow', + type: '(row: Row) => HTMLAttributes', + description: 'Callback to set props pre row', + }, + { + name: 'onCell', + type: '(cell: Cell) => HTMLAttributes', + description: ' Callback to set props pre cell', }, ], }, diff --git a/docs/pages/examples/OnRowClickExample.tsx b/docs/pages/examples/OnRowClickExample.tsx index a166520..cc8cfe8 100644 --- 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()}`), + } + : {} + } /> ); @@ -30,17 +42,29 @@ import { demoData } from '../../demoData'; function Demo() { return ( { - 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 index 17808e9..c804efb 100644 --- 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({ // table ref tableRef, initialState, - onRowClick, + onRow, + onCell, iconColor, // common props ...others @@ -152,15 +152,6 @@ export function DataGrid({ [onPageChange] ); - const handleOnRowClick = useCallback( - (e: React.MouseEvent, row: Row) => { - if (onRowClick) { - onRowClick(e, row); - } - }, - [onRowClick] - ); - const pageCount = withPagination ? total ? Math.floor(total / table.getState().pagination.pageSize) @@ -261,14 +252,10 @@ export function DataGrid({ {table.getRowModel().rows.length > 0 ? ( <> {table.getRowModel().rows.map((row) => ( - handleOnRowClick(event, row)} - role="row" - > + {row.getVisibleCells().map((cell) => ( initialState?: InitialTableState; /** - * Callback when clicking on a specific row + * Callback to set props pre row */ - onRowClick?: (event: React.MouseEvent, row: Row) => void; + onRow?: (row: Row) => HTMLAttributes; + + /** + * Callback to set props pre cell + */ + onCell?: (cell: Cell) => HTMLAttributes; /** * Change Icon Color on Sort & Filter