styling/tailwind

examples/grid-lite/components-react/package.json

@@ -10,17 +10,18 @@
     "clean": "rimraf dist node_modules"
   },
   "dependencies": {
-    "@highcharts/grid-lite": ">=3.0.0",
+    "@highcharts/grid-lite": "3.1.0",
     "@highcharts/grid-lite-react": "workspace:*",
     "react": ">=18",
     "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

@@ -34,11 +34,29 @@ function App() {
 
   // ==== DATA ====
   // Data Columns
-  const [dataSource, setDataSource] = useState({
-    name: ['COLUMNS', 'Bob', 'Charlie', 'David', 'Eve'],
-    age: [23, 34, 45, 56, 67],
-    city: ['New York', 'Oslo', 'Paris', 'Tokyo', 'London'],
-    salary: [50000, 60000, 70000, 80000, 90000]
+  const [dataSource] = useState({
+    name: [
+      'Alice Nguyen', 'Bob Berg', 'Charlie Dupont', 'David Sato', 'Eve Shaw',
+      'John Hale', 'Jane Ortiz', 'Jim Novak', 'Jill Meyer', 'Jack Quinn',
+      'Nora Ellis', 'Omar Khan', 'Priya Shah', 'Quinn Blake', 'Ruth Adler',
+      'Sam Okonkwo', 'Tina Rossi', 'Uma Patel', 'Victor Lang', 'Wendy Cho'
+    ],
+    age: [
+      23, 34, 45, 56, 67, 30, 25, 35, 40, 45,
+      28, 31, 39, 42, 51, 27, 33, 36, 44, 48
+    ],
+    city: [
+      'New York', 'Oslo', 'Paris', 'Tokyo', 'London',
+      'New York', 'Oslo', 'Paris', 'Tokyo', 'London',
+      'Berlin', 'Toronto', 'Mumbai', 'Sydney', 'Zurich',
+      'Lagos', 'Rome', 'Lisbon', 'Seoul', 'Chicago'
+    ],
+    salary: [
+      50000, 60000, 70000, 80000, 90000,
+      40000, 35000, 45000, 50000, 55000,
+      62000, 71000, 48000, 53000, 88000,
+      41000, 59000, 64000, 76000, 82000
+    ]
   });
 
   // Data Table
@@ -52,15 +70,15 @@ function App() {
   // });
 
   // ==== ACTIONS ====
-  const onButtonClick = () => {
-    // console.info('(ref) grid:', grid.current?.grid);
-    setDataSource({
-      name: ['John', 'Jane', 'Jim', 'Jill', 'Jack'],
-      age: [30, 25, 35, 40, 45],
-      city: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Miami'],
-      salary: [40000, 35000, 45000, 50000, 55000]
-    });
-  };
+  // const onButtonClick = () => {
+  //   // console.info('(ref) grid:', grid.current?.grid);
+  //   setDataSource({
+  //     name: ['John', 'Jane', 'Jim', 'Jill', 'Jack'],
+  //     age: [30, 25, 35, 40, 45],
+  //     city: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Miami'],
+  //     salary: [40000, 35000, 45000, 50000, 55000]
+  //   });
+  // };
 
   const onGridCallback = (grid: GridInstance<GridOptions>) => {
     console.info('(callback) grid:', grid);
@@ -74,115 +92,121 @@ function App() {
   // };
 
   return (
-    <>
-      <Grid
-        // options={options}
-        // gridRef={grid}
-        callback={onGridCallback}
-      >
-        {/* <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}
-        />
-        <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="min-h-screen bg-slate-100 dark:bg-slate-950">
+      <div className="mx-auto max-w-5xl p-4 sm:p-8">
+        <Grid
+          // options={options}
+          // gridRef={grid}
+          theme=""
+          callback={onGridCallback}
+          className="demo-grid rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6 dark:border-slate-700 dark:bg-slate-900 dark:shadow-none"
+          tableClassName="w-full border border-slate-200 rounded-md dark:border-slate-700"
+        >
+          <Data
+            // dataTable={dataTable}
+            columns={dataSource}
+          />
+          <ColumnDefaults
+            dataType="string"
+            width="auto"
+            exportable
+            sortingEnabled
+            sortingOrderSequence={['asc', 'desc', null]}
+            filteringEnabled
+            // filteringInline={true}
+            // filteringCondition="contains"
+            // filteringValue=""
+            headerFormat="{id}"
+            headerClassName="p-4 border-b border-r border-slate-200 font-semibold bg-slate-50 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
+            cellClassName="p-4 border-b border-r border-slate-200 text-slate-600 dark:border-slate-700 dark:text-slate-300"
+            rowClassName="hover:bg-slate-50 dark:hover:bg-slate-800/80"
+            evenRowClassName="bg-slate-50/50 dark:bg-slate-800/40"
+            cellFormat="{value}"
+            cellRowHeader={false}
+          />
+          <Caption
+            className="mb-2 pt-2 pb-1 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100"
+          >Team directory</Caption>
+          <Header header={[
+            'name',
+            {
+              format: 'Details',
+              className: 'hcg-center',
+              columns: ['age', 'city', 'salary']
+            }
+          ]} />
+          <Column
+            headerFormat="#"
+            width={40}
+            cellValueGetter={function (this: { row: { index: number } }) {
+              return String(this.row.index + 1);
+            }}
+          />
+          <Column
+            columnId="name"
+            enabled
+            sortingEnabled
+            sortingOrder="asc"
+            sortingPriority={0}
+            // filteringEnabled
+            // filteringInline
+            // filteringCondition="contains"
+            headerFormat="Name"
+            cellClassName="font-semibold text-slate-900 dark:text-slate-100"
+            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)"
+            headerClassName="text-right tabular-nums"
+            cellClassName="text-right tabular-nums"
+            cellFormat="${value}"
+          />
+          <Description
+            className="mb-2 pt-1 pb-4 text-sm text-slate-500 dark:text-slate-400"
+          >
+            Filter, sort, and page through sample employee rows styled with
+            utility classes.
+          </Description>
+          <Pagination
+            // enabled={paginationEnabled}
+            page={1}
+            pageSize={5}
+            // align="right"
+            className="mt-2 pt-2 pb-1"
+            infoClassName="font-semibold text-sm text-slate-700 dark:text-slate-200"
+            controlsClassName="gap-2"
+            sizeClassName="demo-pag-size gap-2 font-semibold text-sm text-slate-700 dark:text-slate-200"
+            // pageInfo
+            // pageSizeSelector
+            pageSizeOptions={[5, 10, 25]}
+            // pageButtons
+            pageButtonsCount={5}
+            // firstLast
+            // previousNext
+            // className="mt-4"
+          />
+        </Grid>
+        {/* <div id="controls" className="mt-4">
+          <button onClick={onButtonClick}>Data state</button>
+          <button onClick={onPaginationClick}>Pagination</button>
+        </div> */}
       </div>
-    </>
+    </div>
   );
 }