fix: keep className and style from onHeaderRow

src/Header/HeaderRow.tsx

@@ -1,3 +1,4 @@
+import { clsx } from 'clsx';
 import * as React from 'react';
 import Cell from '../Cell';
 import TableContext from '../context/TableContext';
@@ -49,12 +50,17 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
   const columnsKey = getColumnsKey(cells.map(cell => cell.column));
 
   return (
-    <RowComponent {...rowProps} className={classNames.row} style={styles.row}>
+    <RowComponent
+      {...rowProps}
+      className={clsx(rowProps?.className, classNames.row) || undefined}
+      style={{ ...rowProps?.style, ...styles.row }}
+    >
       {cells.map((cell: CellType<RecordType>, cellIndex) => {
         const { column, colStart, colEnd, colSpan } = cell;
         const fixedInfo = getCellFixedInfo(colStart, colEnd, flattenColumns, stickyOffsets);
 
-        const additionalProps: React.HTMLAttributes<HTMLElement> = column?.onHeaderCell?.(column) || {};
+        const additionalProps: React.HTMLAttributes<HTMLElement> =
+          column?.onHeaderCell?.(column) || {};
 
         return (
           <Cell

tests/Table.spec.jsx

@@ -567,6 +567,29 @@ describe('Table.Basic', () => {
     );
   });
 
+  it('keeps className and style from onHeaderRow', () => {
+    const onHeaderRow = () => ({ className: 'my-header-row', style: { color: 'red' } });
+    const { container } = render(createTable({ onHeaderRow }));
+    const headerRow = container.querySelector('thead tr');
+    expect(headerRow).toHaveClass('my-header-row');
+    expect(headerRow.style.color).toBe('red');
+  });
+
+  it('merges onHeaderRow className and style with semantic header row', () => {
+    const onHeaderRow = () => ({ className: 'my-header-row', style: { color: 'red' } });
+    const { container } = render(
+      createTable({
+        onHeaderRow,
+        classNames: { header: { row: 'semantic-header-row' } },
+        styles: { header: { row: { background: 'blue' } } },
+      }),
+    );
+    const headerRow = container.querySelector('thead tr');
+    expect(headerRow).toHaveClass('my-header-row', 'semantic-header-row');
+    expect(headerRow.style.color).toBe('red');
+    expect(headerRow.style.background).toBe('blue');
+  });
+
   it('renders column.onHeaderCell', () => {
     const onHeaderCell = column => ({
       id: `header-cell-${column.key}`,