Added support for headerRowClass. (#3405)

* Added support for headerRowClass. Works similar to rowClass but gets applied on the header row.

Co-authored-by: Aman Mahajan <[email protected]>

Author: Agent009

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,7 +4,6 @@ about: Create a bug report
 title: ''
 labels: Feature Request
 assignees: ''
-
 ---
 
 ## Describe the bug <!-- A clear and concise description of what the bug is. -->
@@ -17,6 +16,7 @@ assignees: ''
 ## Expected behavior <!-- A clear and concise description of what you expected to happen. -->
 
 ## Link to Minimal Reproducible Example
+
 <!-- Link to a playground, StackBlitz, or GitHub repo with a minimal reproduction of the problem. A minimal reproduction is required.  -->
 
 ## Environment

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Request a new feature or enhancement
 title: ''
 labels: Feature Request
 assignees: ''
-
 ---
 
 ## Use case <!-- Please describe what it is you would like to achieve. -->

.gitignore

@@ -8,3 +8,4 @@ __screenshots__
 
 npm-debug.log
 **.orig
+.idea

README.md

@@ -459,6 +459,8 @@ function rowClass(row: Row, rowIdx: number) {
 }
 ```
 
+###### `headerRowClass?: Maybe<string>>`
+
 ###### `direction?: Maybe<'ltr' | 'rtl'>`
 
 This property sets the text direction of the grid, it defaults to `'ltr'` (left-to-right). Setting `direction` to `'rtl'` has the following effects:

src/DataGrid.tsx

@@ -222,6 +222,7 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
    */
   renderers?: Maybe<Renderers<NoInfer<R>, NoInfer<SR>>>;
   rowClass?: Maybe<(row: NoInfer<R>, rowIdx: number) => Maybe<string>>;
+  headerRowClass?: Maybe<string>;
   /** @default 'ltr' */
   direction?: Maybe<Direction>;
   'data-testid'?: Maybe<string>;
@@ -275,6 +276,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     className,
     style,
     rowClass,
+    headerRowClass,
     direction: rawDirection,
     // ARIA
     role: rawRole,
@@ -1118,6 +1120,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
               />
             ))}
             <HeaderRow
+              headerRowClass={headerRowClass}
               rowIdx={headerRowsCount}
               columns={getRowViewportColumns(mainHeaderRowIdx)}
               onColumnResize={handleColumnResizeLatest}

src/HeaderRow.tsx

@@ -3,7 +3,7 @@ import { css } from '@linaria/core';
 import clsx from 'clsx';
 
 import { getColSpan } from './utils';
-import type { CalculatedColumn, Direction, Position, ResizedWidth } from './types';
+import type { CalculatedColumn, Direction, Maybe, Position, ResizedWidth } from './types';
 import type { DataGridProps } from './DataGrid';
 import HeaderCell from './HeaderCell';
 import { cell, cellFrozen } from './style/cell';
@@ -23,6 +23,7 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
   selectedCellIdx: number | undefined;
   shouldFocusGrid: boolean;
   direction: Direction;
+  headerRowClass: Maybe<string>;
 }
 
 const headerRow = css`
@@ -46,6 +47,7 @@ const headerRow = css`
 export const headerRowClassname = `rdg-header-row ${headerRow}`;
 
 function HeaderRow<R, SR, K extends React.Key>({
+  headerRowClass,
   rowIdx,
   columns,
   onColumnResize,
@@ -91,9 +93,13 @@ function HeaderRow<R, SR, K extends React.Key>({
     <div
       role="row"
       aria-rowindex={rowIdx} // aria-rowindex is 1 based
-      className={clsx(headerRowClassname, {
-        [rowSelectedClassname]: selectedCellIdx === -1
-      })}
+      className={clsx(
+        headerRowClassname,
+        {
+          [rowSelectedClassname]: selectedCellIdx === -1
+        },
+        headerRowClass
+      )}
     >
       {cells}
     </div>

test/browser/headerRowClass.test.ts

@@ -0,0 +1,32 @@
+import { page } from '@vitest/browser/context';
+
+import type { Column } from '../../src';
+import { headerRowClassname } from '../../src/HeaderRow';
+import { setup } from './utils';
+
+interface Row {
+  id: number;
+}
+
+const columns: readonly Column<Row>[] = [{ key: 'id', name: 'ID' }];
+const rows: readonly Row[] = [{ id: 0 }];
+
+test('headerRowClass is undefined', () => {
+  setup({
+    columns,
+    rows,
+    rowClass: undefined
+  });
+  const header = page.getByRole('row').first();
+  expect(header).toHaveClass(headerRowClassname, { exact: true });
+});
+
+test('headerRowClass is a string', () => {
+  setup({
+    columns,
+    rows,
+    headerRowClass: 'my-header-row'
+  });
+  const header = page.getByRole('row').first();
+  expect(header).toHaveClass(`${headerRowClassname} my-header-row`, { exact: true });
+});