styling/tailwind

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

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"
+          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="p-4 bg-blue-500 text-white text-lg font-bold"
+          >Grid styled by Tailwind CSS</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="p-4 bg-red-500 text-white text-sm"
+          >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>
-    </>
   );
 }
 

examples/grid-lite/components-react/src/index.css

@@ -1,8 +1,7 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+@import "tailwindcss";
+
+/* Optional: load default Grid theme tokens + themed caption styles */
+/* @import "@highcharts/grid-lite-react/src/styles/grid-theme-default.css"; */
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -15,19 +14,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;
-  }
-}
-
+}

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
   }
 });

packages/grid-lite-react/src/Grid.tsx

@@ -15,20 +15,28 @@ import {
 } from '@highcharts/grid-shared-react';
 import { merge } from '@highcharts/grid-lite/es-modules/Shared/Utilities.js';
 import Grid from '@highcharts/grid-lite/es-modules/masters/grid-lite.src';
-import '@highcharts/grid-lite/css/grid-lite.css';
+import './styles/grid-core.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, className, ...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 containerTheme = useMemo(
+        () => [theme, className].filter(Boolean).join(' ') || void 0,
+        [theme, className]
+    );
     const gridOptions = useMemo(
-        () => merge(childOptions, options ?? {}) as Options,
-        [childOptions, options]
+        () => merge(
+            childOptions,
+            options ?? {},
+            containerTheme ? { rendering: { theme: containerTheme } } : {}
+        ) as Options,
+        [childOptions, options, containerTheme]
     );
 
     return (