From 2ce2bced878dd57c751a4affbf6947bca04fd6d4 Mon Sep 17 00:00:00 2001
From: Dmitry Artemov <d-artemov@yandex-team.ru>
Date: Mon, 28 Oct 2024 10:04:12 +0100
Subject: [PATCH] feat(BaseTable): add renderHeaderCellContent prop (#77)

---
 .../BaseHeaderCell/BaseHeaderCell.tsx         | 76 +++++++++++--------
 .../BaseHeaderRow/BaseHeaderRow.tsx           |  3 +
 src/components/BaseTable/BaseTable.tsx        |  4 +
 src/components/BaseTable/README.md            |  2 +
 4 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/components/BaseHeaderCell/BaseHeaderCell.tsx b/src/components/BaseHeaderCell/BaseHeaderCell.tsx
index d3bd4ca..21350be 100644
--- a/src/components/BaseHeaderCell/BaseHeaderCell.tsx
+++ b/src/components/BaseHeaderCell/BaseHeaderCell.tsx
@@ -22,6 +22,7 @@ export interface BaseHeaderCellProps<TData, TValue> {
         | ((header: Header<TData, TValue>, parentHeader?: Header<TData, unknown>) => string);
     header: Header<TData, TValue>;
     parentHeader?: Header<TData, unknown>;
+    renderHeaderCellContent?: (props: {header: Header<TData, TValue>}) => React.ReactNode;
     renderResizeHandle?: (props: BaseResizeHandleProps<TData, TValue>) => React.ReactNode;
     renderSortIndicator?: (props: BaseSortIndicatorProps<TData, TValue>) => React.ReactNode;
     resizeHandleClassName?: string;
@@ -38,6 +39,7 @@ export const BaseHeaderCell = <TData, TValue>({
     className: classNameProp,
     header,
     parentHeader,
+    renderHeaderCellContent,
     renderResizeHandle,
     renderSortIndicator,
     resizeHandleClassName,
@@ -54,6 +56,49 @@ export const BaseHeaderCell = <TData, TValue>({
 
     const rowSpan = header.isPlaceholder ? header.getLeafHeaders().length : 1;
 
+    const renderContent = () => {
+        if (renderHeaderCellContent) {
+            return renderHeaderCellContent({
+                header,
+            });
+        }
+
+        return (
+            <React.Fragment>
+                {header.column.getCanSort() ? (
+                    <BaseSort header={header}>
+                        {flexRender(header.column.columnDef.header, header.getContext())}{' '}
+                        {renderSortIndicator ? (
+                            renderSortIndicator({
+                                className: b('sort-indicator', sortIndicatorClassName),
+                                header,
+                            })
+                        ) : (
+                            <BaseSortIndicator
+                                className={b('sort-indicator', sortIndicatorClassName)}
+                                header={header}
+                            />
+                        )}
+                    </BaseSort>
+                ) : (
+                    flexRender(header.column.columnDef.header, header.getContext())
+                )}
+                {header.column.getCanResize() &&
+                    (renderResizeHandle ? (
+                        renderResizeHandle({
+                            className: b('resize-handle', resizeHandleClassName),
+                            header,
+                        })
+                    ) : (
+                        <BaseResizeHandle
+                            className={b('resize-handle', resizeHandleClassName)}
+                            header={header}
+                        />
+                    ))}
+            </React.Fragment>
+        );
+    };
+
     return (
         <th
             className={b('header-cell', getHeaderCellClassModes(header), className)}
@@ -64,36 +109,7 @@ export const BaseHeaderCell = <TData, TValue>({
             {...attributes}
             style={getCellStyles(header, attributes?.style)}
         >
-            {header.column.getCanSort() ? (
-                <BaseSort header={header}>
-                    {flexRender(header.column.columnDef.header, header.getContext())}{' '}
-                    {renderSortIndicator ? (
-                        renderSortIndicator({
-                            className: b('sort-indicator', sortIndicatorClassName),
-                            header,
-                        })
-                    ) : (
-                        <BaseSortIndicator
-                            className={b('sort-indicator', sortIndicatorClassName)}
-                            header={header}
-                        />
-                    )}
-                </BaseSort>
-            ) : (
-                flexRender(header.column.columnDef.header, header.getContext())
-            )}
-            {header.column.getCanResize() &&
-                (renderResizeHandle ? (
-                    renderResizeHandle({
-                        className: b('resize-handle', resizeHandleClassName),
-                        header,
-                    })
-                ) : (
-                    <BaseResizeHandle
-                        className={b('resize-handle', resizeHandleClassName)}
-                        header={header}
-                    />
-                ))}
+            {renderContent()}
         </th>
     );
 };
diff --git a/src/components/BaseHeaderRow/BaseHeaderRow.tsx b/src/components/BaseHeaderRow/BaseHeaderRow.tsx
index 7cb5c7b..97748e2 100644
--- a/src/components/BaseHeaderRow/BaseHeaderRow.tsx
+++ b/src/components/BaseHeaderRow/BaseHeaderRow.tsx
@@ -16,6 +16,7 @@ export interface BaseHeaderRowProps<TData, TValue = unknown>
         | ((headerGroup: HeaderGroup<TData>, parentHeaderGroup?: HeaderGroup<TData>) => string);
     headerGroup: HeaderGroup<TData>;
     parentHeaderGroup?: HeaderGroup<TData>;
+    renderHeaderCellContent?: BaseHeaderCellProps<TData, TValue>['renderHeaderCellContent'];
     renderResizeHandle?: (props: BaseResizeHandleProps<TData, TValue>) => React.ReactNode;
     renderSortIndicator: BaseHeaderCellProps<TData, TValue>['renderSortIndicator'];
     resizeHandleClassName?: BaseHeaderCellProps<TData, TValue>['resizeHandleClassName'];
@@ -34,6 +35,7 @@ export const BaseHeaderRow = <TData, TValue = unknown>({
     className: classNameProp,
     headerGroup,
     parentHeaderGroup,
+    renderHeaderCellContent,
     renderResizeHandle,
     renderSortIndicator,
     resizeHandleClassName,
@@ -65,6 +67,7 @@ export const BaseHeaderRow = <TData, TValue = unknown>({
                         className={cellClassName}
                         header={header as Header<TData, TValue>}
                         parentHeader={parentHeader}
+                        renderHeaderCellContent={renderHeaderCellContent}
                         renderResizeHandle={renderResizeHandle}
                         renderSortIndicator={renderSortIndicator}
                         resizeHandleClassName={resizeHandleClassName}
diff --git a/src/components/BaseTable/BaseTable.tsx b/src/components/BaseTable/BaseTable.tsx
index 88c7e4c..fdd8cd4 100644
--- a/src/components/BaseTable/BaseTable.tsx
+++ b/src/components/BaseTable/BaseTable.tsx
@@ -81,6 +81,8 @@ export interface BaseTableProps<TData, TScrollElement extends Element | Window =
     renderGroupHeader?: BaseRowProps<TData>['renderGroupHeader'];
     /** Function to override the default rendering of the entire group header row */
     renderGroupHeaderRowContent?: BaseRowProps<TData>['renderGroupHeaderRowContent'];
+    /** Function to override the default rendering of header cell content */
+    renderHeaderCellContent?: BaseHeaderRowProps<TData>['renderHeaderCellContent'];
     /** Function to override the default rendering of resize handles */
     renderResizeHandle?: BaseHeaderRowProps<TData>['renderResizeHandle'];
     /** Function to override the default rendering of sort indicators */
@@ -137,6 +139,7 @@ export const BaseTable = React.forwardRef(
             renderCustomRowContent,
             renderGroupHeader,
             renderGroupHeaderRowContent,
+            renderHeaderCellContent,
             renderResizeHandle,
             renderSortIndicator,
             resizeHandleClassName,
@@ -252,6 +255,7 @@ export const BaseTable = React.forwardRef(
                                 className={headerRowClassName}
                                 headerGroup={headerGroup}
                                 parentHeaderGroup={headerGroups[index - 1]}
+                                renderHeaderCellContent={renderHeaderCellContent}
                                 renderResizeHandle={renderResizeHandle}
                                 renderSortIndicator={renderSortIndicator}
                                 resizeHandleClassName={resizeHandleClassName}
diff --git a/src/components/BaseTable/README.md b/src/components/BaseTable/README.md
index 1339066..ee86988 100644
--- a/src/components/BaseTable/README.md
+++ b/src/components/BaseTable/README.md
@@ -8,6 +8,7 @@
 | attributes                  | HTML attributes for the `<table>` element                                                         | `React.TableHTMLAttributes<HTMLTableElement>`                                                                                                                                                                  |
 | bodyAttributes              | HTML attributes for the `<tbody>` element                                                         | `React.HTMLAttributes<HTMLTableSectionElement>`                                                                                                                                                                |
 | bodyClassName               | CSS classes for the `<tbody>` element                                                             | `string`                                                                                                                                                                                                       |
+| bodyRef                     | Ref for the `<tbody>` element                                                                     | `React.Ref<HTMLTableSectionElement>`                                                                                                                                                                           |
 | cellAttributes              | HTML attributes for the `<td>` elements inside `<tbody>`                                          | `React.TdHTMLAttributes<HTMLTableCellElement>`<br>`((cell?: Cell<TData, unknown>) => React.TdHTMLAttributes<HTMLTableCellElement>)`                                                                            |
 | cellClassName               | CSS classes for the `<td>` elements inside `<tbody>`                                              | `string`<br>`((cell?: Cell<TData, unknown>) => string)`                                                                                                                                                        |
 | className                   | CSS classes for the `<table>` element                                                             | `string`                                                                                                                                                                                                       |
@@ -32,6 +33,7 @@
 | renderCustomRowContent      | Function to render custom rows                                                                    | `(props: {row: Row<TData>; Cell: React.FunctionComponent<BaseCellProps<TData>>; cellClassName?: BaseCellProps<TData>['className']}) => React.ReactNode`                                                        |
 | renderGroupHeader           | Function to override the default rendering of group headers                                       | `(props: {row: Row<TData>; className?: string; getGroupTitle?: (row: Row<TData>) => React.ReactNode}) => React.ReactNode`                                                                                      |
 | renderGroupHeaderRowContent | Function to override the default rendering of the entire group header row                         | `(props: {row: Row<TData>; Cell: React.FunctionComponent<BaseCellProps<TData>>; cellClassName?: BaseCellProps<TData>['className']; getGroupTitle?: (row: Row<TData>) => React.ReactNode;}) => React.ReactNode` |
+| renderHeaderCellContent     | Function to override the default rendering of header cell content                                 | `(props: {header: Header<TData, TValue>}) => React.ReactNode`                                                                                                                                                  |
 | renderResizeHandle          | Function to override the default rendering of resize handles                                      | `(props: {header: Header<TData, TValue>; className?: string}) => React.ReactNode`                                                                                                                              |
 | renderSortIndicator         | Function to override the default rendering of sort indicators                                     | `(props: {header: Header<TData, TValue>; className?: string}) => React.ReactNode`                                                                                                                              |
 | resizeHandleClassName       | CSS classes for resize handles in `<th>` elements                                                 | `string`                                                                                                                                                                                                       |