The data grids across the react-data-grid demo/documentation site are currently not rendered correctly.
The issue appears to affect the demo grid layout/rendering generally rather than being isolated to a single example. The grids' visual structure and styling are incorrect when viewing the live demo site:
https://comcast.github.io/react-data-grid/
The live documentation currently contains multiple demos that use the same DataGrid implementation, including the common features, column grouping, row grouping, resizing, scrolling, and other examples.
To Reproduce
- Open https://comcast.github.io/react-data-grid/
- Navigate to any of the demos.
- Observe the rendered
DataGrid.
- The grid is not rendered/styled correctly and the overall table layout appears broken.
Expected behavior
All demo grids should render with the expected react-data-grid layout and styling, including:
- Correct column and row dimensions
- Correct header and cell alignment
- Correct borders and background styling
- Correct virtualization/layout behavior
- Consistent rendering across the different demo examples
Link to Minimal Reproducible Example
The issue is reproducible directly on the project's official demo site:
https://comcast.github.io/react-data-grid/
Environment
react-data-grid version: current main / latest deployed demo
react/react-dom version: React 19.2+
- Browser: Chrome 151
- OS: Windows
Additional context
The issue appears to affect the demo system broadly rather than a single grid example.
The current react-data-grid repository has the demo source under the website/ directory and uses CSS Grid for the grid layout. The current project documentation also notes that the grid's styling uses the CSS light-dark() function and specifically documents a Vite 8+ CSS-minification issue involving light-dark() syntax. This may be relevant when investigating the deployed demo's generated CSS.
The repository currently has approximately 2,890 commits on main, so the regression should be investigated against the most recent changes to the grid styling/demo build pipeline.
The data grids across the
react-data-griddemo/documentation site are currently not rendered correctly.The issue appears to affect the demo grid layout/rendering generally rather than being isolated to a single example. The grids' visual structure and styling are incorrect when viewing the live demo site:
https://comcast.github.io/react-data-grid/
The live documentation currently contains multiple demos that use the same
DataGridimplementation, including the common features, column grouping, row grouping, resizing, scrolling, and other examples.To Reproduce
DataGrid.Expected behavior
All demo grids should render with the expected
react-data-gridlayout and styling, including:Link to Minimal Reproducible Example
The issue is reproducible directly on the project's official demo site:
https://comcast.github.io/react-data-grid/
Environment
react-data-gridversion: currentmain/ latest deployed demoreact/react-domversion: React 19.2+Additional context
The issue appears to affect the demo system broadly rather than a single grid example.
The current
react-data-gridrepository has the demo source under thewebsite/directory and uses CSS Grid for the grid layout. The current project documentation also notes that the grid's styling uses the CSSlight-dark()function and specifically documents a Vite 8+ CSS-minification issue involvinglight-dark()syntax. This may be relevant when investigating the deployed demo's generated CSS.The repository currently has approximately 2,890 commits on
main, so the regression should be investigated against the most recent changes to the grid styling/demo build pipeline.