Skip to content

Applied suggestions. #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sebastianbochan merged 3 commits into from
Sep 21, 2026
Merged

Applied suggestions. #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bf322c4
Applied suggestions.
sebastianbochan Sep 21, 2026
e0e1585
Sync tailwind styles with grid-pro.
sebastianbochan Sep 21, 2026
c96cbf5
Reverted callback.
sebastianbochan Sep 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions examples/grid-pro/components-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@
"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"
}
Expand Down
203 changes: 142 additions & 61 deletions examples/grid-pro/components-react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,41 @@ import {
ColumnDefaults,
Column,
Description,
Pagination
Pagination,
Header
} from '@highcharts/grid-pro-react';

const GRID_KEY = 'AAAA-BBBB-CCCC-DDDD-EEEE-FFFF';

function App() {
const [dataSource, setDataSource] = useState({
name: ['Alice', 'Bob', 'Charlie', 'David', 'Eve'],
age: [23, 34, 45, 56, 67],
city: ['New York', 'Oslo', 'Paris', 'Tokyo', 'London'],
salary: [50000, 60000, 70000, 80000, 90000]
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
]
});

const onButtonClick = () => {
setDataSource({
name: ['John', 'Jane', 'Jim', 'Jill', 'Jack'],
name: ['John Hale', 'Jane Ortiz', 'Jim Novak', 'Jill Meyer', 'Jack Quinn'],
age: [30, 25, 35, 40, 45],
city: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Miami'],
salary: [40000, 35000, 45000, 50000, 55000]
Expand All @@ -35,63 +54,125 @@ function App() {
};

return (
<>
<Grid
gridKey={GRID_KEY}
callback={onGridCallback}
onAfterLoad={function () {
console.info('Grid loaded');
}}
>
<Data columns={dataSource} />
<ColumnDefaults
dataType="string"
sortingEnabled
filteringEnabled
/>
<Caption>Grid Pro Components</Caption>
<Description>Declarative API with gridKey and event props</Description>
<Column
id="name"
headerFormat="Name"
onAfterSort={function () {
console.info('Sorted name column');
<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
gridKey={GRID_KEY}
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"
onAfterLoad={function () {
console.info('Grid loaded');
}}
onCellClick={function () {
console.info('Clicked name cell', this);
}}
onHeaderClick={function () {
console.info('Clicked name header', this);
}}
/>
<Column
id="age"
dataType="number"
headerFormat="Age"
/>
<Column
id="city"
headerFormat="City"
/>
<Column
id="salary"
dataType="number"
headerFormat="Salary (USD)"
cellFormat="${value}"
/>
<Pagination
page={1}
pageSize={3}
pageSizeOptions={[3, 5, 10]}
onBeforePageChange={function (event) {
console.info('Before page change', event);
}}
/>
</Grid>
<div id="controls">
<button onClick={onButtonClick}>Update data</button>
>
<Data columns={dataSource} />
<ColumnDefaults
dataType="string"
width="auto"
exportable
sortingEnabled
sortingOrderSequence={['asc', 'desc', null]}
filteringEnabled
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 options={[
'name',
{
format: 'Details',
className: 'hcg-center',
columns: ['age', 'city', 'salary']
}
]} />
<Column
id="index"
dataId={null}
headerFormat="#"
width={40}
cellValueGetter={function (this: { row: { index: number } }) {
return String(this.row.index + 1);
}}
/>
<Column
id="name"
enabled
sortingEnabled
sortingOrder="asc"
sortingPriority={0}
headerFormat="Name"
cellClassName="font-semibold text-slate-900 dark:text-slate-100"
cellFormat="{value}"
onAfterSort={function () {
console.info('Sorted name column');
}}
onCellClick={function () {
console.info('Clicked name cell', this);
}}
onHeaderClick={function () {
console.info('Clicked name header', this);
}}
/>
<Column
id="age"
dataType="number"
headerFormat="Age ({id})"
cellFormat="{value}"
/>
<Column
id="city"
width="20%"
headerFormatter={function () {
return `City: ${(this as { id?: string }).id ?? ''}`;
}}
/>
<Column
id="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
page={1}
pageSize={5}
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"
pageSizeOptions={[5, 10, 25]}
pageButtonsCount={5}
onBeforePageChange={function (event) {
console.info('Before page change', event);
}}
/>
</Grid>
<div id="controls" className="mt-4">
<button
type="button"
onClick={onButtonClick}
className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
>
Update data
</button>
</div>
</div>
</>
</div>
);
}

Expand Down
93 changes: 82 additions & 11 deletions examples/grid-pro/components-react/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,18 @@
@import "tailwindcss";

/* Sample viewer theme toggle + system preference */
@custom-variant dark {
&:where(.highcharts-dark, .highcharts-dark *) {
@slot;
}

@media (prefers-color-scheme: dark) {
&:where(:not(.highcharts-light):not(.highcharts-light *)) {
@slot;
}
}
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
Expand All @@ -6,21 +21,77 @@ body {
-moz-osx-font-smoothing: grayscale;
}

#root {
.hcg-container {
width: 100%;
min-height: 100vh;
padding: 20px;
height: 600px;
}

/*
* Pagination buttons / select — Core internals, styled via cascade.
*/
.hcg-pagination-controls {
@apply border-l border-r border-slate-200 dark:border-slate-700;
}

.hcg-pagination-controls .hcg-pagination-pages {
@apply gap-2;
}

.hcg-pagination-controls .hcg-button {
@apply size-7 rounded border border-transparent text-sm leading-none
text-slate-700 dark:text-slate-200;
}

.hcg-pagination-controls .hcg-button:hover:not(:disabled) {
@apply bg-slate-200 dark:bg-slate-700;
}

.hcg-pagination-controls .hcg-button-selected,
.hcg-pagination-controls .hcg-button-selected:hover:not(:disabled) {
@apply bg-teal-700 text-white dark:bg-teal-600;
}

.demo-pag-size select.hcg-input {
@apply rounded border border-slate-300 bg-white py-1 pl-2 pr-5 text-sm
text-slate-700 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200;
}

/*
* Filter popup — Core internals, styled via cascade.
*/
.demo-grid .hcg-container .hcg-popup {
@apply rounded-lg border border-slate-200 bg-white text-sm text-slate-700
shadow-lg dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200
dark:shadow-black/40;
}

.demo-grid .hcg-container .hcg-menu-header {
@apply mb-2 px-1 text-xs font-semibold text-slate-500 dark:text-slate-400;
}

.demo-grid .hcg-container .hcg-column-filter-wrapper {
@apply gap-2;
}

.demo-grid .hcg-container .hcg-column-filter-wrapper .hcg-input {
@apply w-full rounded border border-slate-300 bg-white px-2 py-1.5 text-sm
text-slate-700 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200;
}

.demo-grid .hcg-container .hcg-column-filter-wrapper select.hcg-input {
@apply pr-5;
}

.demo-grid .hcg-container .hcg-clear-filter-button {
@apply text-xs font-medium text-slate-600 no-underline dark:text-slate-300;
}

#controls {
margin-top: 20px;
display: flex;
gap: 10px;
.demo-grid .hcg-container .hcg-clear-filter-button:hover:not(:disabled) {
@apply text-slate-900 underline dark:text-slate-50;
}

@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
@container hcg (max-width: 800px) {
.hcg-pagination-controls {
@apply justify-center border-r-0 border-l-0 mt-2 mb-2;
}
}
4 changes: 3 additions & 1 deletion examples/grid-pro/components-react/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: [
{
Expand All @@ -25,6 +26,7 @@ export default defineConfig({
]
},
server: {
host: true,
port: 3002
}
});
1 change: 1 addition & 0 deletions packages/grid-shared-react/src/hooks/useDeclarativeGridOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export const useDeclarativeGridOptions: UseDeclarativeGridOptionsFn = (
);
const gridOptions = useMemo(
() => build(childOptions, options),
// eslint-disable-next-line react-hooks/exhaustive-deps
[childOptions, options, ...buildDeps]
);

Expand Down
Loading
Loading