highcharts · sebastianbochan · Jul 7, 2026
diff --git a/examples/grid-lite/components-react/package.json b/examples/grid-lite/components-react/package.json
@@ -16,11 +16,12 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.2",
     "@types/react": ">=18",
     "@types/react-dom": ">=18",
     "@vitejs/plugin-react": "^4.2.0",
+    "tailwindcss": "^4.3.2",
     "typescript": "^5.0.0",
     "vite": "^5.0.0"
   }
 }
-
diff --git a/examples/grid-lite/components-react/src/App.tsx b/examples/grid-lite/components-react/src/App.tsx
@@ -71,102 +71,120 @@ function App() {
   // };
 
   return (
-    <>
-      <Grid
-        // options={options}
-        // gridRef={grid}
-        callback={onGridCallback}
-      >
-        <Data
-          // dataTable={dataTable}
-          columns={dataSource}
-        />
-        <ColumnDefaults
-          dataType="string"
-          width="auto"
-          exportable
-          style={{ fontWeight: '400' }}
-          sortingEnabled
-          sortingOrderSequence={['asc', 'desc', null]}
-          filteringEnabled
-          filteringInline={true}
-          filteringCondition="contains"
-          filteringValue=""
-          headerClassName="hcg-default-header"
-          headerFormat="{id}"
-          cellClassName="hcg-default-cell"
-          cellFormat="{value}"
-          cellRowHeader={false}
-        />
-        <Caption>Grid Caption v2.1</Caption>
-        <Header header={[
-          'name',
-          {
-            format: 'Details',
-            columns: ['age', 'city', 'salary']
-          }
-        ]} />
-        <Column
-          headerFormat="#"
-          width={40}
-          cellValueGetter={function (this: { row: { index: number } }) {
-            return String(this.row.index + 1);
-          }}
-        />
-        <Column
-          columnId="name"
-          className="hcg-name-column"
-          enabled
-          sortingEnabled
-          sortingOrder="asc"
-          sortingPriority={0}
-          // filteringEnabled
-          // filteringInline
-          // filteringCondition="contains"
-          headerClassName="hcg-name-header"
-          headerFormat="Name"
-          cellClassName="hcg-name-cell"
-          cellFormat="{value}"
-        />
-        <Column
-          columnId="age"
-          dataType="number"
-          headerFormat="Age ({id})"
-          cellFormat="{value}"
-        />
-        <Column
-          columnId="city"
-          width="20%"
-          headerFormatter={function () {
-            return `City: ${(this as { id?: string }).id ?? ''}`;
-          }}
-        />
-        <Column
-          columnId="salary"
-          dataType="number"
-          headerFormat="Salary (USD)"
-          cellFormat="${value}"
-        />
-        <Description>Grid Description</Description>
-        <Pagination
-          // enabled={paginationEnabled}
-          page={1}
-          pageSize={3}
-          align="right"
-          // pageInfo
-          // pageSizeSelector
-          pageSizeOptions={[3, 5, 10, 25]}
-          // pageButtons
-          pageButtonsCount={5}
-          // firstLast
-          // previousNext
-        />
-      </Grid>
-      <div id="controls">
-        <button onClick={onButtonClick}>Data state</button>
-        {/* <button onClick={onPaginationClick}>Pagination</button> */}
+      <div className="p-4">
+        <Grid
+          // options={options}
+          // gridRef={grid}
+          theme="myTheme m-8"
+          callback={onGridCallback}
+          className="border border-slate-300 rounded-md bg-slate-100"
+        >
+          <Data
+            // dataTable={dataTable}
+            columns={dataSource}
+          />
+          <ColumnDefaults
+            dataType="string"
+            width="auto"
+            exportable
+            style={{ fontWeight: '400' }}
+            sortingEnabled
+            sortingOrderSequence={['asc', 'desc', null]}
+            filteringEnabled
+            filteringInline={true}
+            filteringCondition="contains"
+            filteringValue=""
+            // headerClassName="demo-header-cell"
+            headerFormat="{id}"
+            // cellClassName="demo-body-cell"
+            cellFormat="{value}"
+            cellRowHeader={false}
+          />
+          <Caption
+            className="text-lg font-bold"
+          >Grid Caption v2.1</Caption>
+          <Header header={[
+            'name',
+            {
+              format: 'Details',
+              columns: ['age', 'city', 'salary']
+            }
+          ]} />
+          <Column
+            // className="demo-index-column"
+            // headerClassName="demo-index-header"
+            // cellClassName="demo-index-cell"
+            headerFormat="#"
+            width={40}
+            cellValueGetter={function (this: { row: { index: number } }) {
+              return String(this.row.index + 1);
+            }}
+          />
+          <Column
+            columnId="name"
+            // className="hcg-name-column"
+            enabled
+            sortingEnabled
+            sortingOrder="asc"
+            sortingPriority={0}
+            // filteringEnabled
+            // filteringInline
+            // filteringCondition="contains"
+            // headerClassName="demo-name-header"
+            headerFormat="Name"
+            // cellClassName="demo-name-cell"
+            cellFormat="{value}"
+          />
+          <Column
+            columnId="age"
+              // className="demo-age-column"
+              // headerClassName="demo-age-header"
+              // cellClassName="demo-age-cell"
+            dataType="number"
+            headerFormat="Age ({id})"
+            cellFormat="{value}"
+          />
+          <Column
+            columnId="city"
+              // className="demo-city-column"
+              // headerClassName="demo-city-header"
+              // cellClassName="demo-city-cell"
+            width="20%"
+            headerFormatter={function () {
+              return `City: ${(this as { id?: string }).id ?? ''}`;
+            }}
+          />
+          <Column
+            columnId="salary"
+              // className="demo-salary-column"
+              // headerClassName="demo-salary-header"
+              // cellClassName="demo-salary-cell"
+            dataType="number"
+            headerFormat="Salary (USD)"
+            cellFormat="${value}"
+          />
+          <Description
+            // className="demo-description"
+          >Grid Description</Description>
+          <Pagination
+            // enabled={paginationEnabled}
+            page={1}
+            pageSize={3}
+            align="right"
+            // pageInfo
+            // pageSizeSelector
+            pageSizeOptions={[3, 5, 10, 25]}
+            // pageButtons
+            pageButtonsCount={5}
+            // firstLast
+            // previousNext
+          />
+        </Grid>
+        <div className="mt-4">
+          <button onClick={onButtonClick}>Data state</button>
+          {/* <button onClick={onPaginationClick}>Pagination</button> */}
+        </div>
       </div>
-    </>
   );
 }
 

diff --git a/examples/grid-lite/components-react/src/index.css b/examples/grid-lite/components-react/src/index.css
@@ -1,8 +1,4 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+@import "tailwindcss";
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -15,19 +11,4 @@ body {
 #root {
   width: 100%;
   min-height: 100vh;
-  padding: 20px;
-}
-
-#controls {
-  margin-top: 20px;
-  display: flex;
-  gap: 10px;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #121212;
-    color: #ffffff;
-  }
-}
-
+}
diff --git a/examples/grid-lite/components-react/vite.config.ts b/examples/grid-lite/components-react/vite.config.ts
@@ -1,12 +1,13 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 import { resolve, dirname } from 'path';
 import { fileURLToPath } from 'url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: [
       {
@@ -24,6 +25,7 @@ export default defineConfig({
     ]
   },
   server: {
+    host: true,
     port: 3000
   }
 });

diff --git a/packages/grid-lite-react/src/Grid.tsx b/packages/grid-lite-react/src/Grid.tsx
@@ -19,16 +19,20 @@ import '@highcharts/grid-lite/css/grid-lite.css';
 import type { Options } from '@highcharts/grid-lite/es-modules/Grid/Core/Options';
 
 export default function GridLite(props: GridProps<Options>) {
-    const { gridRef, children, options, ...gridProps } = props;
+    const { gridRef, children, options, theme, ...gridProps } = props;
     const childOptions = useMemo(() => getChildProps(children), [children]);
     const columnKey = useMemo(() => {
         const columns = childOptions.columns as Array<{ id?: string }> | undefined;
 
         return columns?.map((column) => column.id).join('\0') ?? '';
     }, [childOptions]);
     const gridOptions = useMemo(
-        () => merge(childOptions, options ?? {}) as Options,
-        [childOptions, options]
+        () => merge(
+            childOptions,
+            options ?? {},
+            theme ? { rendering: { theme } } : {}
+        ) as Options,
+        [childOptions, options, theme]
     );
 
     return (

diff --git a/packages/grid-pro-react/src/Grid.tsx b/packages/grid-pro-react/src/Grid.tsx
@@ -19,16 +19,20 @@ import '@highcharts/grid-pro/css/grid-pro.css';
 import type { Options } from '@highcharts/grid-pro/es-modules/Grid/Core/Options';
 
 export default function GridPro(props: GridProps<Options>) {
-    const { gridRef, children, options, ...gridProps } = props;
+    const { gridRef, children, options, theme, ...gridProps } = props;
     const childOptions = useMemo(() => getChildProps(children), [children]);
     const columnKey = useMemo(() => {
         const columns = childOptions.columns as Array<{ id?: string }> | undefined;
 
         return columns?.map((column) => column.id).join('\0') ?? '';
     }, [childOptions]);
     const gridOptions = useMemo(
-        () => merge(childOptions, options ?? {}) as Options,
-        [childOptions, options]
+        () => merge(
+            childOptions,
+            options ?? {},
+            theme ? { rendering: { theme } } : {}
+        ) as Options,
+        [childOptions, options, theme]
     );
 
     return (

diff --git a/packages/grid-shared-react/src/components/BaseGrid.tsx b/packages/grid-shared-react/src/components/BaseGrid.tsx
@@ -32,6 +32,14 @@ export interface GridProps<TOptions> {
      * Grid configuration options
      */
     options?: TOptions;
+    /**
+     * Optional CSS class name applied to the root grid container.
+     */
+    className?: string;
+    /**
+     * Optional theme name passed to Grid Core.
+     */
+    theme?: string;
     /**
      * Declarative option components (e.g. Caption) passed as children.
      */
@@ -53,13 +61,14 @@ export interface BaseGridProps<TOptions> {
     options?: TOptions;
     Grid: GridType<TOptions>;
     callback?: (grid: GridInstance<TOptions>) => void;
+    className?: string;
 }
 
 export const BaseGrid = forwardRef(function BaseGrid<TOptions>(
     props: BaseGridProps<TOptions>,
     ref: ForwardedRef<GridRefHandle<TOptions>>
 ) {
-    const { options, Grid, callback } = props;
+    const { options, Grid, callback, className } = props;
     const containerRef = useRef<HTMLDivElement>(null);
 
     const currGridRef = useGrid({
@@ -79,5 +88,5 @@ export const BaseGrid = forwardRef(function BaseGrid<TOptions>(
         []
     );
 
-    return <div ref={containerRef} />;
+    return <div ref={containerRef} className={className} />;
 });