From 98050cb713a96948d234dda90bfc10c6e78acf77 Mon Sep 17 00:00:00 2001
From: Ilya Radchenko <knownasilya@gmail.com>
Date: Wed, 5 Nov 2025 10:26:15 -0500
Subject: [PATCH] feat: add className prop to container

---
 src/lib/Components/GridRenderer.tsx | 6 ++++--
 src/lib/Components/ReactGrid.tsx    | 4 ++--
 src/lib/Model/InternalModel.ts      | 1 +
 src/lib/Model/PublicModel.ts        | 2 ++
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/lib/Components/GridRenderer.tsx b/src/lib/Components/GridRenderer.tsx
index 858a13be..06f78f6a 100644
--- a/src/lib/Components/GridRenderer.tsx
+++ b/src/lib/Components/GridRenderer.tsx
@@ -5,16 +5,18 @@ import { ErrorBoundary } from './ErrorBoundary';
 import { useReactGridState } from './StateProvider';
 import { isBrowserFirefox } from '../Functions/firefox';
 
-export const GridRenderer: React.FC<GridRendererProps> = ({ eventHandlers, children }) => {
+export const GridRenderer: React.FC<GridRendererProps> = ({ eventHandlers, children, className }) => {
     const { cellMatrix, props } = useReactGridState();
     const sharedStyles = {
         width: props?.enableFullWidthHeader ? '100%' : cellMatrix.width,
         height: cellMatrix.height,
     };
+    const classNameJoined = ['reactgrid', className].filter(Boolean).join(' ');
+    
     return (
         <ErrorBoundary>
             <div
-                className="reactgrid"
+                className={classNameJoined}
                 style={{
                     position: 'relative',
                     paddingRight: isBrowserFirefox() ? "10px" : "",
diff --git a/src/lib/Components/ReactGrid.tsx b/src/lib/Components/ReactGrid.tsx
index df98d025..8a0b698b 100644
--- a/src/lib/Components/ReactGrid.tsx
+++ b/src/lib/Components/ReactGrid.tsx
@@ -109,7 +109,7 @@ export class ReactGrid extends React.Component<ReactGridProps, State> {
   }
 
   render(): React.ReactNode {
-    const { state, eventHandlers } = this;
+    const { state, eventHandlers, props } = this;
 
     if (state.legacyBrowserMode) {
       return (
@@ -121,7 +121,7 @@ export class ReactGrid extends React.Component<ReactGridProps, State> {
 
     return (
       <StateProvider state={state}>
-        <GridRenderer eventHandlers={eventHandlers}>
+        <GridRenderer className={props.className} eventHandlers={eventHandlers}>
           <PanesRenderer cellRenderer={CellRenderer} />
 
           <Line />
diff --git a/src/lib/Model/InternalModel.ts b/src/lib/Model/InternalModel.ts
index d6beac03..9be392fc 100644
--- a/src/lib/Model/InternalModel.ts
+++ b/src/lib/Model/InternalModel.ts
@@ -54,6 +54,7 @@ export interface PointerLocation extends Location {
 }
 
 export interface GridRendererProps {
+    readonly className?: string;
     eventHandlers: EventHandlers;
 }
 
diff --git a/src/lib/Model/PublicModel.ts b/src/lib/Model/PublicModel.ts
index 58d283e3..d9e19c8b 100644
--- a/src/lib/Model/PublicModel.ts
+++ b/src/lib/Model/PublicModel.ts
@@ -33,6 +33,8 @@ export type SelectionMode =
  * @see https://reactgrid.com/docs/3.1/7-api/0-interfaces/1-reactgrid-props/
  */
 export interface ReactGridProps {
+    /** CSS class name for the grid container */
+    readonly className?: string;
     /** Array of `Column`s */
     readonly columns: Column[];
     /** Array of `Row`s */