Forward sorting props to headerRenderer

src/HeaderCell.tsx

@@ -41,26 +41,35 @@ export default function HeaderCell<R, SR>({
   onSort
 }: HeaderCellProps<R, SR>) {
   function getCell() {
-    if (!column.headerRenderer) return column.name;
+    if (column.headerRenderer) {
+      return createElement(column.headerRenderer, {
+        column,
+        sortColumn,
+        sortDirection,
+        onSort,
+        allRowsSelected,
+        onAllRowsSelectionChange
+      });
+    }
 
-    return createElement(column.headerRenderer, { column, allRowsSelected, onAllRowsSelectionChange });
+    if (column.sortable) {
+      return (
+        <SortableHeaderCell
+          column={column}
+          onSort={onSort}
+          sortColumn={sortColumn}
+          sortDirection={sortDirection}
+        >
+          {column.name}
+        </SortableHeaderCell>
+      );
+    }
+
+    return column.name;
   }
 
   let cell = getCell();
 
-  if (column.sortable) {
-    cell = (
-      <SortableHeaderCell
-        column={column}
-        onSort={onSort}
-        sortColumn={sortColumn}
-        sortDirection={sortDirection}
-      >
-        {cell}
-      </SortableHeaderCell>
-    );
-  }
-
   const className = clsx('rdg-cell', column.headerCellClass, {
     'rdg-cell-frozen': column.frozen,
     'rdg-cell-frozen-last': column.isLastFrozenColumn

src/index.ts

@@ -4,5 +4,6 @@ export { default as Row } from './Row';
 export * from './Columns';
 export * from './formatters';
 export { default as TextEditor } from './editors/TextEditor';
+export { default as SortableHeaderCell } from './headerCells/SortableHeaderCell';
 export * from './enums';
 export * from './types';

src/types.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { SortDirection } from './enums';
 import EventBus from './EventBus';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
@@ -111,6 +112,9 @@ export interface EditorProps<TRow, TSummaryRow = unknown> extends SharedEditorPr
 
 export interface HeaderRendererProps<TRow, TSummaryRow = unknown> {
   column: CalculatedColumn<TRow, TSummaryRow>;
+  sortColumn?: string;
+  sortDirection?: SortDirection;
+  onSort?: (columnKey: string, direction: SortDirection) => void;
   allRowsSelected: boolean;
   onAllRowsSelectionChange: (checked: boolean) => void;
 }

stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx

@@ -1,16 +1,20 @@
 import React from 'react';
 import { useDrag, useDrop, DragObjectWithType } from 'react-dnd';
 
-import { HeaderRendererProps } from '../../../../src';
+import { HeaderRendererProps, SortableHeaderCell } from '../../../../src';
 import { useCombinedRefs } from '../../../../src/hooks';
 
 interface ColumnDragObject extends DragObjectWithType {
   key: string;
 }
 
-export function DraggableHeaderRenderer<R>({ onColumnsReorder, ...props }: HeaderRendererProps<R> & { onColumnsReorder: (sourceKey: string, targetKey: string) => void }) {
+interface DraggableHeaderRendererProps<R> extends HeaderRendererProps<R> {
+  onColumnsReorder: (sourceKey: string, targetKey: string) => void;
+}
+
+export function DraggableHeaderRenderer<R>({ onColumnsReorder, column, sortColumn, sortDirection, onSort }: DraggableHeaderRendererProps<R>) {
   const [{ isDragging }, drag] = useDrag({
-    item: { key: props.column.key, type: 'COLUMN_DRAG' },
+    item: { key: column.key, type: 'COLUMN_DRAG' },
     collect: monitor => ({
       isDragging: !!monitor.isDragging()
     })
@@ -20,7 +24,7 @@ export function DraggableHeaderRenderer<R>({ onColumnsReorder, ...props }: Heade
     accept: 'COLUMN_DRAG',
     drop({ key, type }: ColumnDragObject) {
       if (type === 'COLUMN_DRAG') {
-        onColumnsReorder(key, props.column.key);
+        onColumnsReorder(key, column.key);
       }
     },
     collect: monitor => ({
@@ -38,7 +42,14 @@ export function DraggableHeaderRenderer<R>({ onColumnsReorder, ...props }: Heade
         cursor: 'move'
       }}
     >
-      {props.column.name}
+      <SortableHeaderCell
+        column={column}
+        sortColumn={sortColumn}
+        sortDirection={sortDirection}
+        onSort={onSort}
+      >
+        {column.name}
+      </SortableHeaderCell>
     </div>
   );
 }