From 0978bbf7006a611bbf84ad8a64502f6a5957dae5 Mon Sep 17 00:00:00 2001
From: Mohammad Amir <amir@connextar.com>
Date: Wed, 13 Dec 2023 22:58:44 +0000
Subject: [PATCH 1/5] Added support for headerRowClass. Works similar to
 rowClass but gets applied on the header row.

---
 README.md         |  2 ++
 src/DataGrid.tsx  |  3 +++
 src/HeaderRow.tsx | 15 +++++++++++----
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index e131eac6cf..692cb4a66d 100644
--- a/README.md
+++ b/README.md
@@ -249,6 +249,8 @@ function MyGrid() {
 
 ###### `rowClass?: Maybe<(row: R) => Maybe<string>>`
 
+###### `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:
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index f386331d0b..dfb22f2758 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -187,6 +187,7 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
    */
   renderers?: Maybe<Renderers<R, SR>>;
   rowClass?: Maybe<(row: R, rowIdx: number) => Maybe<string>>;
+  headerRowClass?: Maybe<string>;
   /** @default 'ltr' */
   direction?: Maybe<Direction>;
   'data-testid'?: Maybe<string>;
@@ -240,6 +241,7 @@ function DataGrid<R, SR, K extends Key>(
     className,
     style,
     rowClass,
+    headerRowClass,
     direction: rawDirection,
     // ARIA
     role: rawRole,
@@ -1092,6 +1094,7 @@ function DataGrid<R, SR, K extends Key>(
               />
             ))}
             <HeaderRow
+              headerRowClass={headerRowClass}
               rowIdx={headerRowsCount}
               columns={getRowViewportColumns(mainHeaderRowIdx)}
               onColumnResize={handleColumnResizeLatest}
diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx
index 09fced82e4..7027a80481 100644
--- a/src/HeaderRow.tsx
+++ b/src/HeaderRow.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 
 import { getColSpan } from './utils';
 import type { CalculatedColumn, Direction, Position } from './types';
+import { Maybe } from './types';
 import type { DataGridProps } from './DataGrid';
 import HeaderCell from './HeaderCell';
 import { cell, cellFrozen } from './style/cell';
@@ -23,10 +24,11 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
   selectedCellIdx: number | undefined;
   shouldFocusGrid: boolean;
   direction: Direction;
+  headerRowClass: Maybe<string>;
 }
 
 const headerRow = css`
-  @layer rdg.HeaderRow {
+  @layer rdg . HeaderRow {
     display: contents;
     line-height: var(--rdg-header-row-height);
     background-color: var(--rdg-header-background-color);
@@ -47,6 +49,7 @@ const headerRow = css`
 export const headerRowClassname = `rdg-header-row ${headerRow}`;
 
 function HeaderRow<R, SR, K extends React.Key>({
+  headerRowClass,
   rowIdx,
   columns,
   onColumnResize,
@@ -92,9 +95,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>

From e3dcca72935f047c1a884bde6673ce99ddb950ef Mon Sep 17 00:00:00 2001
From: Mohammad Amir <amir@connextar.com>
Date: Thu, 14 Dec 2023 00:08:46 +0000
Subject: [PATCH 2/5] Ignore Jetbrains IDE files.

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 09ec862dc1..dfdb0b8a9a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@
 
 npm-debug.log
 **.orig
+.idea
\ No newline at end of file

From 4a4c1d922fa064acc226220674cfd37d2f84f0a4 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 11 Apr 2025 12:41:58 -0500
Subject: [PATCH 3/5] Tiny fixes

---
 .gitignore        | 2 +-
 src/HeaderRow.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index c0bd5130e9..9ad8d4c877 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,4 @@ __screenshots__
 
 npm-debug.log
 **.orig
-.idea
\ No newline at end of file
+.idea
diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx
index 977a28a6c3..ce9b8cb513 100644
--- a/src/HeaderRow.tsx
+++ b/src/HeaderRow.tsx
@@ -27,7 +27,7 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
 }
 
 const headerRow = css`
-  @layer rdg . HeaderRow {
+  @layer rdg.HeaderRow {
     display: contents;
     background-color: var(--rdg-header-background-color);
     font-weight: bold;

From 59c40d10008029e436a03770f9d166975c43d7d3 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 11 Apr 2025 12:52:43 -0500
Subject: [PATCH 4/5] Add test

---
 test/browser/headerRowClass.test.ts | 32 +++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 test/browser/headerRowClass.test.ts

diff --git a/test/browser/headerRowClass.test.ts b/test/browser/headerRowClass.test.ts
new file mode 100644
index 0000000000..0b16cbc3a4
--- /dev/null
+++ b/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 });
+});

From ef73b0b8d808adb2814f2f8f772b439471ce33e4 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 11 Apr 2025 12:53:47 -0500
Subject: [PATCH 5/5] prettier

---
 .github/ISSUE_TEMPLATE/bug_report.md      | 2 +-
 .github/ISSUE_TEMPLATE/feature_request.md | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 728c8458fa..a74d3d2bec 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.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
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index f8dcf06fb1..4a9623b95e 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.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. -->