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
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>