feat: Accept react node as column header

athirapbabu · athirapbabu · commit 90fe6299db8c · 2025-05-15T14:16:09.000+05:30
diff --git a/src/components/MultiLevelTable.tsx b/src/components/MultiLevelTable.tsx
@@ -116,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,
@@ -142,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,
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
@@ -85,7 +85,7 @@ export const TableRow: React.FC<TableRowProps> = ({
   };
 
   const handleRowClick = () => {
-    if (onRowClick) {
+    if (onRowClick && level === 0) {
       const dataItem = "original" in row ? row.original : row as DataItem;
       
       onRowClick(dataItem);
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
@@ -1,11 +1,13 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+
+import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { describe, it, expect, vi } from 'vitest';
-import { TableHeader } from '../../src/components/TableHeader';
 import type { HeaderGroup } from 'react-table';
-import type { DataItem } from '../../src/types/types';
+import { describe, expect, it, vi } from 'vitest';
+
+import { TableHeader } from '../../src/components/TableHeader';
 import type { ThemeProps } from '../../src/types/theme';
+import type { DataItem } from '../../src/types/types';
 
 // Mock theme
 const mockTheme: ThemeProps = {
@@ -28,7 +30,7 @@ const mockTheme: ThemeProps = {
 // Mock header groups
 const createMockHeaderGroup = (
   id: string,
-  title: string,
+  title: string | React.ReactNode,
   isSorted = false,
   isSortedDesc = false,
   hasFilter = false
@@ -42,21 +44,22 @@ const createMockHeaderGroup = (
     getSortByToggleProps: () => ({
       onClick: vi.fn(),
     }),
-    render: (type: string) => (type === 'Header' ? title : null),
+    render: (type: string) => (type === 'Header' ? (title || id) : null),
     isSorted,
     isSortedDesc,
     Filter: hasFilter
       ? ({ column }: { column: any }) => (
-          <input
-            data-testid={`filter-${id}`}
-            value={column.filterValue || ''}
-            onChange={(e) => column.setFilter?.(e.target.value)}
-          />
-        )
+        <input
+          data-testid={`filter-${id}`}
+          value={column.filterValue || ''}
+          onChange={(e) => column.setFilter?.(e.target.value)}
+          placeholder={`Filter ${column.title || column.id}...`}
+        />
+      )
       : undefined,
     setFilter: hasFilter ? vi.fn() : undefined,
     disableSortBy: false,
-    title,
+    title: title || id,
     filterValue: '',
   };
 
@@ -119,9 +122,11 @@ describe('TableHeader', () => {
 
   it('applies theme styles correctly', () => {
     const headerGroups = [createMockHeaderGroup('name', 'Name')];
+
     renderTableHeader({ headerGroups });
 
     const headerCell = screen.getByRole('columnheader', { name: 'Name' });
+
     expect(headerCell).toHaveStyle({
       backgroundColor: mockTheme.table?.header?.background,
       color: mockTheme.table?.header?.textColor,
@@ -160,22 +165,27 @@ describe('TableHeader', () => {
 
   it('uses column id when title is not provided', () => {
     const headerGroups = [createMockHeaderGroup('name', '')];
+
     renderTableHeader({ headerGroups });
     expect(screen.getByText('name')).toBeInTheDocument();
   });
 
   it('renders filter input when column has Filter component', () => {
     const headerGroups = [createMockHeaderGroup('name', 'Name', false, false, true)];
+
     renderTableHeader({ headerGroups });
     const filterInput = screen.getByPlaceholderText('Filter Name...');
+
     expect(filterInput).toBeInTheDocument();
     expect(filterInput).toHaveClass('filter-input');
   });
 
   it('applies filter theme styles correctly', () => {
     const headerGroups = [createMockHeaderGroup('name', 'Name', false, false, true)];
+
     renderTableHeader({ headerGroups });
     const filterInput = screen.getByPlaceholderText('Filter Name...');
+
     expect(filterInput).toHaveStyle({
       color: mockTheme.table?.filter?.textColor,
       borderColor: mockTheme.table?.filter?.borderColor,
@@ -185,24 +195,43 @@ describe('TableHeader', () => {
 
   it('handles filter input change correctly', () => {
     const headerGroups = [createMockHeaderGroup('name', 'Name', false, false, true)];
+
     renderTableHeader({ headerGroups });
     const filterInput = screen.getByPlaceholderText('Filter Name...');
+
     fireEvent.change(filterInput, { target: { value: 'test' } });
     const mockColumn = (headerGroups[0].headers[0] as any).column;
+
     expect(mockColumn.setFilter).toHaveBeenCalledWith('test');
   });
 
   it('renders filter input with column id when title is not provided', () => {
     const headerGroups = [createMockHeaderGroup('name', '', false, false, true)];
+
     renderTableHeader({ headerGroups });
     const filterInput = screen.getByPlaceholderText('Filter name...');
+
     expect(filterInput).toBeInTheDocument();
   });
 
   it('does not render filter input when column has no Filter component', () => {
     const headerGroups = [createMockHeaderGroup('name', 'Name', false, false, false)];
+
     renderTableHeader({ headerGroups });
     const filterInput = screen.queryByPlaceholderText('Filter Name...');
+
     expect(filterInput).not.toBeInTheDocument();
   });
+
+  it('renders a React node as column header', () => {
+    const customHeader = <span data-testid="custom-header">Custom</span>;
+    const headerGroups = [
+      createMockHeaderGroup('custom', customHeader as any),
+    ];
+
+    // Patch the render function to return the React node for 'Header'
+    (headerGroups[0].headers[0] as any).render = (type: string) => type === 'Header' ? customHeader : null;
+    renderTableHeader({ headerGroups });
+    expect(screen.getByTestId('custom-header')).toBeInTheDocument();
+  });
 }); 
diff --git a/tests/components/TableRow.test.tsx b/tests/components/TableRow.test.tsx
