Skip to content

Commit

Permalink
feat(BaseTable): add renderHeaderCellContent prop (#77)
Browse files Browse the repository at this point in the history
  • Loading branch information
@beliarh
beliarh authored Oct 28, 2024
1 parent 2d2f4d0 commit 2ce2bce
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 30 deletions.
76 changes: 46 additions & 30 deletions src/components/BaseHeaderCell/BaseHeaderCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -38,6 +39,7 @@ export const BaseHeaderCell = <TData, TValue>({
className: classNameProp,
header,
parentHeader,
renderHeaderCellContent,
renderResizeHandle,
renderSortIndicator,
resizeHandleClassName,
Expand All @@ -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)}
Expand All @@ -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>
);
};
3 changes: 3 additions & 0 deletions src/components/BaseHeaderRow/BaseHeaderRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Expand All @@ -34,6 +35,7 @@ export const BaseHeaderRow = <TData, TValue = unknown>({
className: classNameProp,
headerGroup,
parentHeaderGroup,
renderHeaderCellContent,
renderResizeHandle,
renderSortIndicator,
resizeHandleClassName,
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 4 additions & 0 deletions src/components/BaseTable/BaseTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -137,6 +139,7 @@ export const BaseTable = React.forwardRef(
renderCustomRowContent,
renderGroupHeader,
renderGroupHeaderRowContent,
renderHeaderCellContent,
renderResizeHandle,
renderSortIndicator,
resizeHandleClassName,
Expand Down Expand Up @@ -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}
Expand Down
2 changes: 2 additions & 0 deletions src/components/BaseTable/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand All @@ -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` |
Expand Down

0 comments on commit 2ce2bce

Please sign in to comment.