Skip to content

Demo grids are rendered incorrectly on the react-data-grid documentation site #4137

Description

@ydessoukyy

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

  1. Open https://comcast.github.io/react-data-grid/
  2. Navigate to any of the demos.
  3. Observe the rendered DataGrid.
  4. 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.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions