Header cell collapses when resizable set to true and promoted to staging environment

[FoxCDD]

Describe the bug

When resizable is set to true the columns work as intended but only locally. When the code is deployed to staging environment the header cells shrink. The same problem is seen with code from quick start and other examples.

To Reproduce

1. Apply the code from the quick start page but include 'resizable: true' in column data. Alternatively set 'resizable: true' in defaultColumnOptions within the DataGrid component.
2. Run locally and confirm expected behavior.
3. Deploy to staging environment, header cell will have collapsed.

Link to code example:

https://www.npmjs.com/package/react-data-grid/v/7.0.0-beta.42 for quick start code

What the header cell looks like in local dev environment:

What the header cell looks like in staging environment:

Expected behavior

Header cell should expand to fill the entire width of the column. Expected behavior is seen in local environment but not in staging.

Environment

• react-data-grid version: 7.0.0.beta42
• react/react-dom version: 18.2.0

Additional context

[ronneldavis]

I face the same issue, I am using Next.js version 14.0.0 and react-data-grid version ^7.0.0-beta.42 Weirdly it works perfectly locally (next dev) but the headers are broken when building and deploying to production.

[Bhupendra-Shekawat]

Hey @ronneldavis @FoxCDD are you guys still facing the same issue, I was not able to find the issue as mentioned by you.

[c-stiles]

This is happening to me as well. In my production build, several CSS layers are missing (rdg.MeasuringCell, rdg.GroupCellContent, rdg.SortableHeaderCell, rdg.SortableHeaderName).

I use Webpack 5 for my build process. The production build uses the MiniCssExtractPlugin loader, while development uses style-loader. As a temporary workaround, I was able to fix the issue by removing MiniCssExtractPlugin and using style-loader instead.

[FoxCDD]

Hey @ronneldavis @FoxCDD are you guys still facing the same issue, I was not able to find the issue as mentioned by you.

Yes I'm still facing this issue. I also found that setting sortable to true also caused the same issue.

[ronneldavis]

Hey @ronneldavis @FoxCDD are you guys still facing the same issue, I was not able to find the issue as mentioned by you.

Yeap still facing the same issue, I have sortable and resizable set as true in the default column options.

defaultColumnOptions={{
    sortable: true,
    resizable: true,
}}

[wangdrew]

setting frozen: true on a ColumnOrColumnGroup also causes this rendering issue for the frozen column.

react: 18.2.0 react-data-grid: 7.0.0-beta.42

[fsuk]

Same issue, works fine in dev but not when deployed. Can't see any difference in the styles of the cells when I inspect them. Stylesheet seems to have been imported correctly.

[caribjin]

I'm having the same problem. I checked and it's happening since 7.0.0-beta.42. I did not experience this issue with 7.0.0-beta.41.

[fsuk]

Wonder if its something to do with this commit:

https://github.com/adazzle/react-data-grid/commit/36080cc2302c6a814625142002b21590966cfcd2

[bakermd86]

I experienced this issue today as well, and just wanted to share some extra data in case it helps. In my case, the issue from 2 classes being applied to the columnheader div from the rdg.HeaderCell layer (.c1creorc7-0-0-beta-42, .c1kqdw7y7-0-0-beta-42). They both show as applying the same styles, which includes "inline-size: 10px":

But if you look at the stylesheet, those properties are from a different class (r1y6ywlx7-0-0-beta-42) in the same layer, but not in .c1kqdw7y7-0-0-beta-42 or .c6l2wv17-0-0-beta-42:

No idea why they are being applied here, the div in question doesn't have the r1y6ywlx7-0-0-beta-42 class on it, and these properties are clearly only in that class and not in the ones actually being applied to that div. I also just worked-around it by using .41.

Just sharing in case it helps with identifying the issue.

[aefnor]

This is happening to me as well. In my production build, several CSS layers are missing (rdg.MeasuringCell, rdg.GroupCellContent, rdg.SortableHeaderCell, rdg.SortableHeaderName).

I use Webpack 5 for my build process. The production build uses the MiniCssExtractPlugin loader, while development uses style-loader. As a temporary workaround, I was able to fix the issue by removing MiniCssExtractPlugin and using style-loader instead.

This worked on my end. Thanks @c-stiles

[guilhermecunha-2amtech]

Any news on this ? It is still happening.

This bug was introduced on the version 7.0.0-beta.42

[truk]

Same issue for me. Local is fine, but Webpack build artifacts are collapsing several different css styles into a grouped one. I don't have a good workaround, but oddly, the order of the source css rules has an impact. It's definitely something happening in post-processing and new in beta 42

.c1creorc7-0-0-beta-43 {
  @layer rdg.DragHandle {
    z-index: 1;
    position: sticky;
  }
}


.cis5rrm7-0-0-beta-43 {
  @layer rdg.EditCell {
    padding: 0;
  }
}


.h44jtk67-0-0-beta-43 {
  @layer rdg.SortableHeaderCell {
    display: flex;
  }
}

.hcgkhxz7-0-0-beta-43 {
  @layer rdg.SortableHeaderCellName {
    flex-grow: 1;
    overflow: clip;
    text-overflow: ellipsis;
  }
}


.c6l2wv17-0-0-beta-43 {
  @layer rdg.HeaderCell {
    cursor: pointer;
  }
}

.c1kqdw7y7-0-0-beta-43 {
  @layer rdg.HeaderCell {
    touch-action: none;
  }
}

.r1y6ywlx7-0-0-beta-43 {
  @layer rdg.HeaderCell {
    cursor: col-resize;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    inline-size: 10px;
  }
}

becomes

.c1creorc7-0-0-beta-43,
.c1kqdw7y7-0-0-beta-43,
.c6l2wv17-0-0-beta-43,
.cis5rrm7-0-0-beta-43,
.h44jtk67-0-0-beta-43,
.hcgkhxz7-0-0-beta-43,
.r1y6ywlx7-0-0-beta-43 {
    @layer rdg.HeaderCell {
        cursor: col-resize;
        inline-size: 10px;
        inset-block-end: 0;
        inset-block-start: 0;
        inset-inline-end: 0;
        position: absolute
    }
}

[msaiducar64]

Any news on this ? It is still happening. 7.0.0-beta.42

[iamyoki]

This is happening to me as well. In my production build, several CSS layers are missing (rdg.MeasuringCell, rdg.GroupCellContent, rdg.SortableHeaderCell, rdg.SortableHeaderName).

I use Webpack 5 for my build process. The production build uses the MiniCssExtractPlugin loader, while development uses style-loader. As a temporary workaround, I was able to fix the issue by removing MiniCssExtractPlugin and using style-loader instead.

This is key of the problem. My temp solution would be simple and no need to change the webpack config:

1. Copy react-data-grid styles.css file which in node_modules/react-data-grid/lib/styles.css into public folder
2. Add <link rel="stylesheet" href="styles.css"> in your index.html

Note: Do not import styles.css in your source file using import.

[jmjuanico]

same with me 7.0.0-beta.41 works fine but 7.0.0-beta.42 is having this problem.

[alexschultz]

still happening as of version 7.0.0-beta.46. @nstepien it looks like this change might have been what caused this behavior, any chance you might be able to assist?

[PrabeenGautam]

still happening as of version 7.0.0-beta.47. Do anyone find any solutions?

[williammetcalf]

This seems like a pretty big issue, are there any updates on it? We need to lock the dependency to no later than 7.0.0-beta.41 currently