React-data-grid: Grid is not correctly rendered after window resize

[martinnov92]

Which version of React JS are you using?

✅ Officially supported ✅

• [x] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• [ ] v15.5.x

☣️ Not officially supported, expect warnings and errors ☣️

• [ ] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• [ ] IE 9 / IE 10 / IE 11
• [ ] Edge
• [x] Chrome

⚠️ Not officially supported, but "should work" ⚠️

• [ ] Firefox
• [ ] Safari

---

I'm submitting a ...

• [x] 🐛 Bug Report
• [ ] 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

---

Issue Details

Hello does anyone has same issues as we do?

Sometimes when I resize window or pane in splitter the grid does not get correctly rendered, there are columns and rows missing...

Thank you

[martinnov92]

For now I solved it by calling resize events twice with setTimeout(resize, 0), but I don´t think this is very good solution...

[zguillen]

Hi @martinnov92 - We are having exact same problem. Can you give more details on how you worked around this bug with resize events?

[ghost]

@martinnov92 even we are facing same problem . It will be very helpfull if you can share about workaround...

[martinnov92]

Hello, all I did was to call window resize event twice, something like this:

        const resizeEvent = document.createEvent("HTMLEvents");
        resizeEvent.initEvent('resize', true, false);
        window.dispatchEvent(resizeEvent);
        setTimeout(() => {  window.dispatchEvent(resizeEvent) }, 0);

I am using splitters component in our app so I call this when splitter finishes resizing...
Hope it helps

[zguillen]

Hey guys, I was still seeing the bug after dispatching a duplicate window resize event as @martinnov92 mentioned. But what I did get to work was this:
import { WindowResizeListener } from 'react-window-resize-listener';
constructor(props) {
super(props);
` this.justLoaded = true;` ` this.windowResized = false;` ` }` `...` `render() {` `if (this.windowResized) {` ` this.forceRedraw();` ` return <div/>;` ` } else {` ` <WindowResizeListener onResize={this.handleWindowResize}/>` ` <ReactDataGrid ...>` ` }` `...` `}`
handleWindowResize = (windowSize) => {
//the table itself fires a windowResize event for some reason immediately after
//its done rendering, so ignore that one as its not a true resize event.
if (!this.justLoaded) {
this.windowResized = true;
this.forceUpdate();
} else {
this.justLoaded = false;
}
}
forceRedraw = () => {
this.justLoaded = true;
this.windowResized = false;
this.forceUpdate();
}

[rlreamy]

We are also having the same issue. We have a hide-able div, and when it is hidden, the container for the table is enlarged, but react-data-grid is not resizing.

[jacek-jaskolski]

@martinnov92 Thank you very much. That was exactly what I was looking for!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[rlreamy]

I do not believe this issue has been resolved.

[Digi-Hessam]

+1

Also seeing this issue.

In my case when I resize columns beyond a total of the width of the grid + 280px (div class react-grid-HeaderRow width > width + 279px), and scroll, the issue begins. If I shrink the columns back down to a total of the width of the grid + 279px or less (div class react-grid-HeaderRow width < grid width + 278px), and scroll, everything is rendered again.

So it seems like it depends on the width of the grid + 279px... everything beyond that point will not be rerendered/loaded.

[Digi-Hessam]

Here's a temporary fix. In the first line of getRenderedColumnCount, in react-data-grid.js, props.columnMetrics.totalWidth is used.

var remainingWidth = width && width > 0 ? width : props.columnMetrics.totalWidth;

Instead use props.columnMetrics.width.

var remainingWidth = width && width > 0 ? width : props.columnMetrics.width;

This is not the perfect solution.

[Gajesh-LH]

+1

I am facing the type of similar issue. I am finding a workaround but not getting proper solution. Have anyone solved this issue?

Click here to see the recorded screen

[WDRed]

@Digi-Hessam your solution adds another bug - on vertical scroll all columns content disappears.
Fix is to add this.grid.onColumnResize(n1, n2) to componentDidMount(). But you need to add a little hook to make all columns size not 80px (min size for column).

[Digi-Hessam]

@WDRed - Well, I'm not experiencing that issue. Maybe because all my rows are rendered at load. Not what I intended, and havn't done anything to force it to render all rows at load. It's always been like that.

[shridharbennisur]

@martinnov92 - I am also using splitter component still facing issue, can you please provide some more details.

[martinnov92]

Hello @shridharbennisur , try to follow my previous comment https://github.com/adazzle/react-data-grid/issues/916#issuecomment-337187269. All I did was to provide callback function whenever I release the splitter (onDragEnd/onMouseUp,...). Hope it helps

[shridharbennisur]

HI @martinnov92 , Is their any way to call resize event on rowclick.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[rlreamy]

This is still an issue, and we would really appreciate it being resolved. It looks like there is an outstanding pull request, is there any way this could get reviewed and merged?

[galleyrob]

This is still a major issue across all browsers, can it be resolved, dont want to start adding resize listeners if its resolvable

[galleyrob]

above fixes are very sketchy and dont really work, this is a major headache with this grid can this be looked at urgently please

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[shortwavedave]

I can confirm the same problem - it happens with collapsible panels if the component is loaded with the panel collapsed

[shortwavedave]

Here is a gif of the situation:

I have to resize the window to make it fit correctly, so it doesn't render right in full screen. This is the code:

 <Panel style={{color: "rgb(255,255,255)"}} defaultExpanded>
                <Panel.Heading>
                    <Panel.Title toggle>
                        Fleet
                    </Panel.Title>
                </Panel.Heading>
                <Panel.Body collapsible>
                    <ReactDataGrid
                        columns={columns}
                        rowGetter={i => rows[i]}
                        rowsCount={rows.length}
                    />
                </Panel.Body>
            </Panel>