Add support for defaultColumnOptions.renderHeaderCell (#3733)

* feat(render-header-cell): Support override defaultRenderHeaderCell from
defaultColumnOptions

* feat(render-header-cell): fix lint and cleanup

* feat(render-header-cell): fix pretter

* feat(render-header-cell): fix tests

Author: hadyelzayady

src/DataGrid.tsx

@@ -93,7 +93,14 @@ interface EditCellState<R> extends Position {
 
 export type DefaultColumnOptions<R, SR> = Pick<
   Column<R, SR>,
-  'renderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable' | 'draggable'
+  | 'renderCell'
+  | 'renderHeaderCell'
+  | 'width'
+  | 'minWidth'
+  | 'maxWidth'
+  | 'resizable'
+  | 'sortable'
+  | 'draggable'
 >;
 
 export interface DataGridHandle {

src/HeaderCell.tsx

@@ -12,7 +12,6 @@ import {
 } from './utils';
 import type { CalculatedColumn, SortColumn } from './types';
 import type { HeaderRowProps } from './HeaderRow';
-import defaultRenderHeaderCell from './renderHeaderCell';
 
 const cellSortableClassname = css`
   @layer rdg.HeaderCell {
@@ -108,8 +107,6 @@ export default function HeaderCell<R, SR>({
     [cellOverClassname]: isOver
   });
 
-  const renderHeaderCell = column.renderHeaderCell ?? defaultRenderHeaderCell;
-
   function onPointerDown(event: React.PointerEvent<HTMLDivElement>) {
     if (event.pointerType === 'mouse' && event.buttons !== 1) {
       return;
@@ -295,7 +292,7 @@ export default function HeaderCell<R, SR>({
       onKeyDown={sortable ? onKeyDown : undefined}
       {...draggableProps}
     >
-      {renderHeaderCell({
+      {column.renderHeaderCell({
         column,
         sortDirection,
         priority,

src/hooks/useCalculatedColumns.ts

@@ -5,6 +5,7 @@ import type { CalculatedColumn, CalculatedColumnParent, ColumnOrColumnGroup, Omi
 import { renderValue } from '../cellRenderers';
 import { SELECT_COLUMN_KEY } from '../Columns';
 import type { DataGridProps } from '../DataGrid';
+import defaultRenderHeaderCell from '../renderHeaderCell';
 
 type Mutable<T> = {
   -readonly [P in keyof T]: T[P] extends ReadonlyArray<infer V> ? Mutable<V>[] : T[P];
@@ -48,6 +49,8 @@ export function useCalculatedColumns<R, SR>({
   const defaultMinWidth = defaultColumnOptions?.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH;
   const defaultMaxWidth = defaultColumnOptions?.maxWidth ?? undefined;
   const defaultCellRenderer = defaultColumnOptions?.renderCell ?? renderValue;
+  const defaultHeaderCellRenderer =
+    defaultColumnOptions?.renderHeaderCell ?? defaultRenderHeaderCell;
   const defaultSortable = defaultColumnOptions?.sortable ?? false;
   const defaultResizable = defaultColumnOptions?.resizable ?? false;
   const defaultDraggable = defaultColumnOptions?.draggable ?? false;
@@ -98,7 +101,8 @@ export function useCalculatedColumns<R, SR>({
           sortable: rawColumn.sortable ?? defaultSortable,
           resizable: rawColumn.resizable ?? defaultResizable,
           draggable: rawColumn.draggable ?? defaultDraggable,
-          renderCell: rawColumn.renderCell ?? defaultCellRenderer
+          renderCell: rawColumn.renderCell ?? defaultCellRenderer,
+          renderHeaderCell: rawColumn.renderHeaderCell ?? defaultHeaderCellRenderer
         };
 
         columns.push(column);
@@ -153,6 +157,7 @@ export function useCalculatedColumns<R, SR>({
     defaultMinWidth,
     defaultMaxWidth,
     defaultCellRenderer,
+    defaultHeaderCellRenderer,
     defaultResizable,
     defaultSortable,
     defaultDraggable

src/types.ts

@@ -78,6 +78,7 @@ export interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TR
   readonly draggable: boolean;
   readonly frozen: boolean;
   readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;
+  readonly renderHeaderCell: (props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode;
 }
 
 export interface ColumnGroup<R, SR = unknown> {

test/browser/column/renderCell.test.tsx

@@ -3,6 +3,7 @@ import { page, userEvent } from '@vitest/browser/context';
 
 import { DataGrid } from '../../../src';
 import type { Column } from '../../../src';
+import defaultRenderHeaderCell from '../../../src/renderHeaderCell';
 import { getCells, getCellsAtRowIndexOld, setup } from '../utils';
 
 interface Row {
@@ -107,7 +108,8 @@ describe('Custom cell renderer', () => {
         resizable: false,
         sortable: false,
         draggable: false,
-        width: 'auto'
+        width: 'auto',
+        renderHeaderCell: defaultRenderHeaderCell
       },
       indexes: [0]
     });