React-data-grid: Custom Renderer Messing Up Scrolling

Created on 6 Apr 2017 · 14Comments · Source: adazzle/react-data-grid

HAVE YOU ALREADY SEARCHED FOR SIMILAR ISSUES? PLEASE HELP US OUT AND DOUBLE-CHECK FIRST!

didn't see anything

ALSO, PLEASE DON'T BE THAT PERSON WHO DELETES THIS TEMPLATE. IT'S HERE FOR A REASON.

THANKS!

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x

Community Supported:
[ x] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[ x] Chrome

Should work:
[ x] Firefox
[ x] Safari

I'm submitting a ... (check one with "x")

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior
When adding stuff other than a simple <div><Row /><div> as a custom row renderer, the scroll functionality stops working well.

Expected/desired behavior
Smooth scrolling no matter what is provided as the custom renderer

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem.

https://jsfiddle.net/nswope/a8avjpmc/

That's an example, and you can see how the scrolling becomes very choppy when the <h3> is added as a sibling of the <Row />. When it gets to the bottom it starts glitching really badly. This example is almost usable, but in my project this behavior is much worse.

What is the expected behavior?
Smooth scrolling, just like if you comment out the <h3>

What is the motivation / use case for changing the behavior?

Trying to make expandable rows like this:

wontfix

Source

nickswope

👍1

Most helpful comment

Actually guys this is super easy to fix. All you have to do is make sure your rowrenderer matches how your ReactDatagrid rows height are shown below:

RowRenderer = ({ renderBaseRow, ...props }) => {
const color = props.row.status.includes("Passed") ? 'lightgreen' : props.row.status.includes("Failed") ? 'orange' : 'lightgrey'
const bord = this.state.sessionIDfilter === props.row.id ? '5px solid #66afe9' : 'none'

dom = onClick={() => this.setSessionFiltertoRowClicked(props.row.id)}
style={{ cursor: 'pointer', border: bord, background: color }}>{renderBaseRow({ ...props,_height: 500_ //THIS HAS TO MATCH })}

;

}
}
return dom;
};

****rowHeight={500}** //THIS ONE HAS TO MATCH THE ONE IN ROWRENDERER**
headerRowHeight={50}
columns={columns}
rowGetter={i => filteredRows[i]}
rowsCount={filteredRows.length}
rowRenderer={this.RowRenderer}
toolbar={}
onAddFilter={(filter) => this.handleSessionFilterChange(filter)}
onClearFilters={() => this.setState({ setSessionFilters: {} })}
getValidFilterValues={columnKey => this.getValidFilterValues(rows, columnKey)}
getCellActions={this.getCellActions}

sammysamx20 on 29 May 2019

👍2

All 14 comments

I am facing the same problem with a custom row component. It seems like the viewport height is not getting updated when the row height is changed. This in turns throw off scrolling. Have you found a solution to this issue?

alwasa0b on 14 Sep 2017

No I haven't. Because I never got so much as an acknowledgement about this issue, and there's a backlog of over 200 issues, I decided this project is probably a good one to stay away from. I jumped to ag-Grid

nickswope on 14 Sep 2017

This is a major issue for us. Perhaps we can generate some concern in this direction? Thanks for the tip on ag-Grid, but pricing is never fun. Would really like to see some improvement in this neighborhood.

nathanielmoon on 6 Feb 2018

I have not used rowRenderer this way but seems like ReactDataGrid.Row height is different from the custom rowRenderer height which is somehow breaking scrolling. I have created an example to fix the flickering, this seems a bit hacky but this particular case requires some investigation. We will be happy to accept a PR which can make rowRenderer more flexible

https://codesandbox.io/s/rjw20ynoqp

Made 3 changes

// Custom renderer
getRowStyle() {
    return {
      color: this.getRowBackground(),
      height: this.props.height // New prop
    };
},

render: function () {
    return (
      <div style={this.getRowStyle()}>
        <ReactDataGrid.Row ref="row" {...this.props} height={ReactDataGrid.Row.defaultProps.height} /> // Set default height
        <h3>I go between rows</h3>
      </div>
    );
  }

// Grid
render() {
    return (
      <ReactDataGrid
        columns={this._columns}
        rowGetter={this.rowGetter}
        rowsCount={this._rows.length}
        minHeight={500}
        headerRowHeight={35}
        rowHeight={100} // Provide explicit height, this should match the rowRenderer height
        rowRenderer={RowRenderer} />);
  }

There is an open ticket to improve performance in general and it should address laggy scrolling as well

amanmahajan7 on 10 Feb 2018

@amanmahajan7
Any update here?

srikanthpavuluri on 23 Apr 2018

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.

stale[bot] on 12 Jul 2018

I am having this same issue when trying to render tables within rows.

Austint30 on 7 Mar 2019

Any update on this? The flicker happens even on the sample at https://adazzle.github.io/react-data-grid/docs/examples/row-renderer

scottdurow on 14 May 2019

👍1

The lag is really bad when you start rendering tables within rows. @amanmahajan7 some update would be really appreciated.

Thiyageshv on 15 May 2019

@Austint30 were you able to solve the flickering?

Thiyageshv on 15 May 2019

No. I gave up rendering another table within a row. I decided to put links in each row cell that shows the nested table in a separate page.

It seems that rendering elements that stretch the row height cause odd scrolling behavior.

Austint30 on 15 May 2019

I opened a new issue for this, since this one was closed, #1670

JSoet on 28 May 2019

Actually guys this is super easy to fix. All you have to do is make sure your rowrenderer matches how your ReactDatagrid rows height are shown below:

dom = onClick={() => this.setSessionFiltertoRowClicked(props.row.id)}
style={{ cursor: 'pointer', border: bord, background: color }}>{renderBaseRow({ ...props,_height: 500_ //THIS HAS TO MATCH })}

;

}
}
return dom;
};

sammysamx20 on 29 May 2019

👍2

Unfortunately that's not an option in our case because we wanted it to have a dynamic row height... but good find! 👍

JSoet on 30 May 2019

Was this page helpful?

0 / 5 - 0 ratings

React-data-grid: Custom Renderer Messing Up Scrolling

Most helpful comment

All 14 comments

Related issues