feat: add ability to pass custom class to table header (EightfoldAI#224)

thiyagaraj-eightfold · Jul 11, 2022 · e8133e3 · e8133e3
1 parent a7c341e
commit e8133e3
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 3 deletions.
diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
diff --git a/src/components/Table/Internal/Header/Header.tsx b/src/components/Table/Internal/Header/Header.tsx
@@ -81,6 +81,7 @@ function Header<RecordType>({
     columns,
     flattenColumns,
     onHeaderRow,
+    classNames,
 }: HeaderProps<RecordType>): React.ReactElement {
     const { getComponent } = useContext(TableContext);
     const rows: CellType<RecordType>[][] = useMemo(
@@ -97,6 +98,7 @@ function Header<RecordType>({
             {rows.map((row, rowIndex) => {
                 const rowNode = (
                     <HeaderRow
+                        classNames={classNames}
                         key={rowIndex}
                         flattenColumns={flattenColumns}
                         cells={row}

diff --git a/src/components/Table/Internal/Header/Header.types.ts b/src/components/Table/Internal/Header/Header.types.ts
@@ -15,11 +15,13 @@ export interface RowProps<RecordType> {
     cellComponent: CustomizeComponent;
     onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
     index: number;
+    classNames?: string;
 }
 
 export interface HeaderProps<RecordType> {
     columns: ColumnsType<RecordType>;
     flattenColumns: readonly ColumnType<RecordType>[];
     stickyOffsets: StickyOffsets;
     onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
+    classNames?: string;
 }
diff --git a/src/components/Table/Internal/Header/HeaderRow.tsx b/src/components/Table/Internal/Header/HeaderRow.tsx
@@ -5,6 +5,7 @@ import { RowProps } from './Header.types';
 import TableContext from '../Context/TableContext';
 import { getCellFixedInfo } from '../Utilities/fixUtil';
 import { getColumnsKey } from '../Utilities/valueUtil';
+import { mergeClasses } from '../../../../shared/utilities';
 
 function HeaderRow<RecordType>({
     cells,
@@ -14,6 +15,7 @@ function HeaderRow<RecordType>({
     cellComponent: CellComponent,
     onHeaderRow,
     index,
+    classNames,
 }: RowProps<RecordType>) {
     const { direction } = useContext(TableContext);
 
@@ -47,6 +49,7 @@ function HeaderRow<RecordType>({
                 return (
                     <Cell
                         {...cell}
+                        classNames={mergeClasses([cell.classNames, classNames])}
                         ellipsis={column.ellipsis}
                         align={column.align}
                         component={CellComponent}

diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx
@@ -113,6 +113,7 @@ function OcTable<RecordType extends DefaultRecordType>(
         onHeaderRow,
         transformColumns,
         sticky,
+        headerClassName,
     } = props;
 
     const mergedData = data || EMPTY_DATA;
@@ -484,6 +485,7 @@ function OcTable<RecordType extends DefaultRecordType>(
         onHeaderRow,
         fixHeader,
         scroll,
+        classNames: headerClassName,
     };
 
     // Empty
@@ -599,7 +601,10 @@ function OcTable<RecordType extends DefaultRecordType>(
                     >
                         {(fixedHolderPassProps) => (
                             <>
-                                <Header {...fixedHolderPassProps} />
+                                <Header
+                                    {...fixedHolderPassProps}
+                                    classNames={headerClassName}
+                                />
                                 {fixFooter === 'top' && (
                                     <Footer {...fixedHolderPassProps}>
                                         {summaryNode}

diff --git a/src/components/Table/Internal/OcTable.types.ts b/src/components/Table/Internal/OcTable.types.ts
@@ -241,6 +241,7 @@ export interface OcTableProps<RecordType = unknown> {
     onRow?: GetComponentProps<RecordType>;
     onHeaderRow?: GetComponentProps<readonly ColumnType<RecordType>[]>;
     emptyText?: React.ReactNode | (() => React.ReactNode);
+    headerClassName?: string;
 
     direction?: string;
 

diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -1365,6 +1365,7 @@ export const Virtual_List: FC = () => {
 
 const tableArgs: Object = {
     alternateRowColor: true,
+    headerClassName: 'my-header',
     bordered: true,
     classNames: 'my-table-class',
     id: 'myTableId',