Scroll to row

[amit1911]

I want to make my table scroll to top when some event happens. For example when user sorts the table data, i want the user to be moved to the top of the table. For this I am using the scrollToRow property. So I have a scrollToRow property in my state that I set to 0 when the user sorts the data and then the cursor moves to the top of the table.

Problem
Now when I scroll inside my table and then some other action happens, the state changes and the table is re-rendered and it scrolls to the top because the scrollToRow property in my state is still 0. What is the best way to tackle this issue?

[KamranAsif]

Best way to do this is to inform your application in componentDidUpdate that it has finished scrolling to the top, so the subsequent render doesn't set scrollToRow to zero.

Here is a very simple example: https://jsfiddle.net/z2yhpwLh/
Feel free to create your own jsfiddle and we can help you debug it.

[amit1911]

hey thanks for the prompt response.
I am using React with Redux so i wanted to somehow keep the scrollToTop in the state and wanted to have a smooth redux flow. componentDidUpdate is what I was looking for. Here is how i did it

class CustomTable extends React.Component {
    componentWillReceiveProps(nextProps) {
        const { tableSettings: newTableSettings } = nextProps;
        const { tableSettings: oldTableSettings } = this.props;

        this.scrollToRow = null;

        // scroll table to top only if scrollTop changed from false -> true
        if (!oldTableSettings.scrollToTop && newTableSettings.scrollToTop) {
            this.scrollToRow = 0;
        }
    }

    componentDidUpdate() {
        // reset scroll state to false if it was true. this is so that we can
        // detect the next scrollToTop event
        if (this.props.tableSettings.scrollToTop) {
            this.props.resetScrollState();
        }
    }

    render() {
        return (
            <Table
                scrollToRow={this.scrollToRow}
            >
            </Table>
        );
    }
}

I have removed all the extra data from the above code so that it's easy to understand.

So basically the main logic is that I will only scroll the table to top when the value of scrollToTop changes from false to true. And after the scrollToTop is changed to true i will change it back to false during the componentDidUpdate lifecycle by dispatching RESET_SCROLL_STATE action which will change the scrollToTop state back to false. Now it will scroll to top only when the event happens.
Let me know what you think about it.

[KamranAsif]

Looks great! Let me know if you see any bugs with that in the future.