Column widths are not working

This issue has been tracked since 2023-01-05.

Describe the bug

I'm upgrading to v7 from 6, and the grid is not using the column.width property. In my dev replacement, it keeps setting the width of each cell to the width of the grid.

Here's a screenshot of a cell for the grid in my app. You can see that the actual width is 1685, even though the template width is 50.

I created a test grid in storybook and copied that into a sandbox, but it doesn't work either
In my sandbox example, it doesn't use the set width of 50, and instead sets it to 80, but it does even respect that in the sample. The actual layout again is that each cell is the width of the grid, so what I have looks like a single column of text. Also, in my sample, no grid actually shows up. There are no borders, no grid lines or cell lines

You can see here that it again sets the cell width to the width of the grid:

To Reproduce

  1. Create basic datagrid with columns and rows.

Link to code example:

Expected behavior

There should be a datagrid with cell lines, a border around the grid, and correct columns widths.


  • react-data-grid version: 7.0.0-beta.20
  • react/react-dom version: 18.0.2

Additional context

ericklind wrote this answer on 2023-01-07

After banging my head on this for a few hours, I finally noticed this line in the sample:
import 'react-data-grid/lib/styles.css';

That's all it took. Hopefully if you're reading this, all you need is that import. :)

Stay safe.
Write dangerous code. ;)

More Details About Repo
Owner Name adazzle
Repo Name react-data-grid
Full Name adazzle/react-data-grid
Language TypeScript
Created Date 2015-03-06
Updated Date 2023-03-23
Star Count 5922
Watcher Count 129
Fork Count 2072
Issue Count 161


Issue Title Created Date Updated Date