React-data-grid: Scroll to a row and bring it into view

Created on 15 Feb 2017 · 3Comments · Source: adazzle/react-data-grid

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

Yes have searched

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?

React 15.3
Officially Supported:
[ ] v0.14.x

Community Supported:
[ ] v15.0.x

WHICH BROWSER ARE YOU USING?
Chrome

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

Should work:
[ ] Firefox
[ ] Safari

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

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

Current behavior
General question really as not obvious in docs. How to scroll to a particular row and bring it into view?
Any help wpuld be much appreciated.

Expected/desired behavior

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.

What is the expected behavior?

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

wontfix

Source

KalKhera

👍8

Most helpful comment

I do this like so:
When rendering the grid

<ReactDataGrid ref={(g) => {this.grid = g;}} .../>

And then:

scrollToRow(idx) {
    var top = this.grid.getRowOffsetHeight() * idx;
    var gridCanvas = this.grid.getDataGridDOMNode().querySelector('.react-grid-Canvas');
    gridCanvas.scrollTop = top;
}

ValYouW on 1 Jul 2017

👍6

All 3 comments

I would also like to see this functionality added. The user can select rows using other parts of the UI and I would like to show the row they selected in the table.

lduane on 4 May 2017

I do this like so:
When rendering the grid

<ReactDataGrid ref={(g) => {this.grid = g;}} .../>

And then:

scrollToRow(idx) {
    var top = this.grid.getRowOffsetHeight() * idx;
    var gridCanvas = this.grid.getDataGridDOMNode().querySelector('.react-grid-Canvas');
    gridCanvas.scrollTop = top;
}

ValYouW on 1 Jul 2017

👍6

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.