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

@@ -74,25 +74,14 @@ function App() {
   // };
 
   return (
-    <>
+    <div className="container p-4">
       <Grid
         // options={options}
         // gridRef={grid}
+        theme="myTheme"
         callback={onGridCallback}
+        className="border border-slate-300 rounded-md bg-slate-100"
       >
-        {/* <Pagination
-          // enabled={paginationEnabled}
-          page={1}
-          pageSize={3}
-          align="right"
-          // pageInfo
-          // pageSizeSelector
-          pageSizeOptions={[3, 5, 10, 25]}
-          // pageButtons
-          pageButtonsCount={5}
-          // firstLast
-          // previousNext
-        /> */}
         <Data
           // dataTable={dataTable}
           columns={dataSource}
@@ -114,7 +103,7 @@ function App() {
           cellFormat="{value}"
           cellRowHeader={false}
         />
-        <Caption>Grid Caption v2.1</Caption>
+        <Caption className="p-4 bg-blue-100 text-blue-500 text-lg font-bold">Grid Caption v2.1</Caption>
         <Header header={[
           'name',
           {
@@ -163,7 +152,9 @@ function App() {
           headerFormat="Salary (USD)"
           cellFormat="${value}"
         />
-        <Description>Grid Description</Description>
+        <Description
+          className="p-4 bg-red-50 text-red-500 text-sm"
+        >Grid Description</Description>
         <Pagination
           // enabled={paginationEnabled}
           page={1}
@@ -178,11 +169,11 @@ function App() {
           // previousNext
         />
       </Grid>
-      <div id="controls">
+      <div id="controls" 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/package.json

@@ -30,7 +30,7 @@
         "url": "https://github.com/highcharts/grid-react/issues"
     },
     "scripts": {
-        "build": "pnpm clean:dist && rollup -c",
+        "build": "pnpm clean:dist && rollup -c && cp -R src/styles dist/styles",
         "lint": "eslint src --ext .ts,.tsx",
         "clean:dist": "rimraf dist",
         "clean": "rimraf node_modules dist",

packages/grid-lite-react/rollup.config.js

@@ -6,7 +6,7 @@ const isExternal = (id) => [
     'react',
     'react-dom',
     '@highcharts/grid-lite'
-].some(pattern => id.startsWith(pattern));
+].some((pattern) => id.startsWith(pattern)) || id.endsWith('.css');
 
 export default [{
     input: 'src/index.ts',

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

@@ -12,17 +12,30 @@ import {
     useDeclarativeGridOptions
 } from '@highcharts/grid-shared-react';
 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';
 import type { GridProps } from '@highcharts/grid-shared-react';
 import { buildGridOptions } from './utils/buildGridOptions';
 
 export default function GridLite(props: GridProps<Options>) {
-    const { gridRef, children, options, callback } = props;
+    const {
+        gridRef,
+        children,
+        options,
+        callback,
+        theme,
+        className
+    } = props;
     const { gridOptions, columnKey } = useDeclarativeGridOptions(
         children,
         options,
-        (childOptions, opts) => buildGridOptions(childOptions, opts)
+        (childOptions, opts) => buildGridOptions(
+            childOptions,
+            opts,
+            theme,
+            className
+        ),
+        [theme, className]
     );
 
     return (