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 = ({ eventHandlers, children }) => { +export const GridRenderer: React.FC = ({ 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 (
{ } 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 { return ( - + 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 */