feat: Add row click functionality

athirapbabu · web-flow · commit 64ed3210dc93 · 2025-05-15T14:19:40.000+05:30
* feat: Add onRowClick feature

* feat: Accept react node as column header
diff --git a/src/App.tsx b/src/App.tsx
@@ -455,6 +455,7 @@ const App: React.FC = () => {
             sortable={true}
             selectable={true}
             onSelectionChange={handleSelectionChange}
+            onRowClick={(data) => console.log(data)}
           />
         </div>
         {selectedRows.size > 0 && (
diff --git a/src/components/MultiLevelTable.tsx b/src/components/MultiLevelTable.tsx
@@ -33,6 +33,7 @@ import "../styles/MultiLevelTable.css";
  * @property {Column[]} columns - Array of column configurations
  * @property {number} [pageSize=10] - Number of items per page
  * @property {ThemeProps} theme - Theme properties
+ * @property {(row: DataItem) => void} [onRowClick] - Optional callback function when a parent row is clicked
  */
 export interface MultiLevelTableProps {
   data: DataItem[];
@@ -46,6 +47,7 @@ export interface MultiLevelTableProps {
   expandIcon?: React.ReactNode;
   selectable?: boolean;
   onSelectionChange?: (selectedRows: Set<string | number>) => void;
+  onRowClick?: (row: DataItem) => void;
 }
 
 /**
@@ -66,6 +68,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
   expandIcon,
   selectable = false,
   onSelectionChange,
+  onRowClick,
 }) => {
   const mergedTheme = mergeThemeProps(defaultTheme, theme);
   const [filterInput, setFilterInput] = useState("");
@@ -113,7 +116,8 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
    */
   const tableColumns = useMemo<TableColumn<DataItem>[]>(() => {
     return columns.map((col) => ({
-      Header: col.title,
+      id: col.key,
+      Header: () => col.title,
       accessor: (row: DataItem) => row[col.key as keyof DataItem],
       disableSortBy: sortable ? col.sortable === false : true,
       sortType: col.customSortFn ? SortType.Custom : SortType.Basic,
@@ -139,7 +143,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
               setFilterInput(e.target.value);
               column.setFilter(e.target.value);
             }}
-            placeholder={`Filter ${col.title}...`}
+            placeholder={`Filter ${typeof col.title === 'string' ? col.title : col.key}...`}
           />
         )
         : undefined,
@@ -300,6 +304,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
                 selectable={true}
                 isRowSelected={selectionState.selectedRows.has(row.original.id)}
                 onRowSelect={handleRowSelect}
+                onRowClick={onRowClick}
               />
               {renderNestedRows(parentId)}
             </React.Fragment>
diff --git a/src/components/TableHeader.tsx b/src/components/TableHeader.tsx
@@ -46,7 +46,7 @@ type ColumnWithSorting = {
   Filter?: React.ComponentType<{ column: ColumnWithSorting }>;
   id: string;
   disableSortBy?: boolean;
-  title?: string;
+  title?: string | React.ReactNode;
   filterValue?: string;
   setFilter?: (value: string) => void;
 };
@@ -106,7 +106,7 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
                         style={{ display: 'inline-flex', alignItems: 'center', cursor: isColumnSortable ? 'pointer' : 'default', userSelect: 'none' }}
                         onClick={isColumnSortable ? (e => { e.stopPropagation(); (sortProps.onClick as any)?.(e); }) : undefined}
                       >
-                        {column.title || column.id}
+                        {column.render('Header')}
                         <span className="sort-icon" style={{ marginLeft: 4 }}>
                           {column.isSorted
                             ? column.isSortedDesc
@@ -121,7 +121,7 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
                             className="filter-input"
                             value={column.filterValue || ""}
                             onChange={(e) => column.setFilter?.(e.target.value)}
-                            placeholder={`Filter ${column.title || column.id}...`}
+                            placeholder={`Filter ${typeof column.title === 'string' ? column.title : column.id}...`}
                             style={{
                               color: theme.table?.filter?.textColor,
                               borderColor: theme.table?.filter?.borderColor,
diff --git a/src/components/TableRow.tsx b/src/components/TableRow.tsx
@@ -23,6 +23,7 @@ import "../styles/TableRow.css";
  * @property {boolean} [selectable=false] - Whether the row is selectable
  * @property {boolean} [isRowSelected=false] - Whether the row is selected
  * @property {(rowId: number) => void} [onRowSelect] - Function to select a row
+ * @property {(row: DataItem) => void} [onRowClick] - Optional callback function when a parent row is clicked
  */
 interface TableRowProps {
   row: Row<DataItem> | DataItem;
@@ -36,6 +37,7 @@ interface TableRowProps {
   selectable?: boolean;
   isRowSelected?: boolean;
   onRowSelect?: (rowId: number) => void;
+  onRowClick?: (row: DataItem) => void;
 }
 
 /**
@@ -56,16 +58,18 @@ export const TableRow: React.FC<TableRowProps> = ({
   selectable = false,
   isRowSelected = false,
   onRowSelect,
+  onRowClick,
 }) => {
   const getRowClassName = useMemo(() => {
-    const classes = ["table-row"];
+    const classes = [];
 
     if (isExpanded) classes.push("table-row-expanded");
     if (level === 0) classes.push("table-row-main");
+    if(onRowClick) classes.push("table-row-clickable");
     else classes.push("table-row-nested");
 
     return classes.join(" ");
-  }, [isExpanded, level]);
+  }, [isExpanded, level, onRowClick]);
 
   const getRowStyle = useMemo(() => {
     const rowShades = theme.table?.row?.levelColors || [];
@@ -80,12 +84,24 @@ export const TableRow: React.FC<TableRowProps> = ({
     onToggle();
   };
 
+  const handleRowClick = () => {
+    if (onRowClick && level === 0) {
+      const dataItem = "original" in row ? row.original : row as DataItem;
+      
+      onRowClick(dataItem);
+    }
+  };
+
   // For nested rows that don't have getRowProps
   if (!("getRowProps" in row)) {
     const dataItem = row as DataItem;
 
     return (
-      <tr className={getRowClassName} style={getRowStyle}>
+      <tr 
+        className={getRowClassName} 
+        style={getRowStyle}
+        onClick={handleRowClick}
+      >
         {columns.map((column: Column, index: number) => {
           const value = dataItem[column.key as keyof DataItem];
           const displayValue =
@@ -139,6 +155,7 @@ export const TableRow: React.FC<TableRowProps> = ({
       {...rowProps}
       className={getRowClassName}
       style={getRowStyle}
+      onClick={handleRowClick}
     >
       {tableRow.cells.map((cell: Cell<DataItem>, index: number) => (
         <TableCell
diff --git a/src/styles/TableRow.css b/src/styles/TableRow.css
@@ -1,4 +1,4 @@
-.table-row {
+.table-row-clickable {
   cursor: pointer;
 }
 
diff --git a/src/types/types.ts b/src/types/types.ts
@@ -4,7 +4,7 @@ import type { Row, TableInstance, TableState } from 'react-table';
 
 export interface Column {
   key: string;
-  title: string;
+  title: string | React.ReactNode;
   filterable?: boolean;
   render?: (value: string | number, item: DataItem) => React.ReactNode;
   sortable?: boolean;
diff --git a/tests/components/MultiLevelTable.test.tsx b/tests/components/MultiLevelTable.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
+
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
+
 import { MultiLevelTable } from '../../src/components/MultiLevelTable';
 import type { Column, DataItem } from '../../src/types/types';
 // Mock data for testing
@@ -71,6 +73,7 @@ const mockColumns: Column[] = [
     ),
   },
 ];
+
 describe('MultiLevelTable', () => {
   it('renders table with basic data', () => {
     render(<MultiLevelTable data={mockData} columns={mockColumns} />);
@@ -96,6 +99,7 @@ describe('MultiLevelTable', () => {
     
     // Click expand button for first parent
     const expandButton = screen.getAllByRole('button')[0];
+
     fireEvent.click(expandButton);
     
     // Children should now be visible
@@ -113,6 +117,7 @@ describe('MultiLevelTable', () => {
     
     // Click name header to sort
     const nameHeader = screen.getByText('Name');
+
     fireEvent.click(nameHeader);
     
     // Get all rows and check order
@@ -129,6 +134,7 @@ describe('MultiLevelTable', () => {
     
     // Check if order is reversed
     const updatedRows = screen.getAllByRole('row').slice(1);
+
     expect(within(updatedRows[0]).getByText('Parent 2')).toBeInTheDocument();
     expect(within(updatedRows[1]).getByText('Parent 1')).toBeInTheDocument();
   });
@@ -145,6 +151,7 @@ describe('MultiLevelTable', () => {
     // Check if pagination controls are present
     const nextButton = screen.getByRole('button', { name: '>' });
     const prevButton = screen.getByRole('button', { name: '<' });
+
     expect(nextButton).toBeInTheDocument();
     expect(prevButton).toBeInTheDocument();
     
@@ -190,6 +197,7 @@ describe('MultiLevelTable', () => {
     
     const table = screen.getByRole('table');
     const tableWrapper = table.closest('.table-wrapper');
+
     expect(tableWrapper?.parentElement).toHaveStyle({ backgroundColor: '#f0f0f0' });
     expect(table).toHaveStyle({ borderColor: '#ff0000' });
   });
@@ -207,14 +215,15 @@ describe('MultiLevelTable', () => {
     
     // Check if custom render is applied
     const customElements = screen.getAllByTestId('custom-name');
+
     expect(customElements).toHaveLength(2); // Two parent rows
     expect(customElements[0]).toHaveTextContent('Parent 1');
   });
   it('handles filtering', () => {
     render(<MultiLevelTable data={mockData} columns={mockColumns} />);
     
     // Find filter input
-    const filterInput = screen.getByPlaceholderText('Filter Name...');
+    const filterInput = screen.getByPlaceholderText('Filter name...');
     
     // Type in filter
     fireEvent.change(filterInput, { target: { value: 'Parent 1' } });
@@ -241,10 +250,12 @@ describe('MultiLevelTable', () => {
     render(<MultiLevelTable data={mockData} columns={mockColumns} />);
     
     const statusCells = screen.getAllByTestId('status-cell');
+
     expect(statusCells).toHaveLength(2); // Two parent rows
     
     // Check if status cells have correct styles
     const activeCell = statusCells.find(cell => cell.textContent === 'Active');
+
     expect(activeCell).toHaveStyle({
       backgroundColor: '#e6ffe6',
       color: '#006600',
diff --git a/tests/components/TableHeader.test.tsx b/tests/components/TableHeader.test.tsx
diff --git a/tests/components/TableRow.test.tsx b/tests/components/TableRow.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.table-row {`
	`1`	`+.table-row-clickable {`
`2`	`2`	`cursor: pointer;`
`3`	`3`	`}`
`4`	`4`