Header cell collapses when resizable set to true and promoted to staging environment about react-data-grid HOT 16 OPEN

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.

from react-data-grid.

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.

from react-data-grid.

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

from react-data-grid.

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.

from react-data-grid.

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,
}}

from react-data-grid.

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

from react-data-grid.

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.

from react-data-grid.

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.

from react-data-grid.

Wonder if its something to do with this commit:

36080cc

from react-data-grid.

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.

from react-data-grid.

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

from react-data-grid.

Any news on this ? It is still happening.

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

from react-data-grid.

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
    }
}

from react-data-grid.

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

from react-data-grid.

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.

from react-data-grid.