Does React-data-grid have a mechanism to handle pagination?

Question

I didn't see anything in the docs for pagination. Is there a built-in mechanism for this, or would I have to implement it myself?

Answer 1

Here is an example of pagination (Infinite scrolling) in react data grid. I am using the scrollHeight,scrollTop and clientHeight properties to check whether to load next page.You need to modify your API's to support this type of pagination.

let columns = [
    {
        key: 'field1',
        name: 'Field1 ',
    },
    {
        key: 'field2',
        name: 'Field2 ',
    },
    {
        key: 'field3',
        name: 'Field3',
    },
]
export default class DataGrid extends React.Component {
    constructor(props) {
        super(props)
        this.state = {height: window.innerHeight - 180 > 300 ? window.innerHeight - 180 : 300,page:1}
        this.rowGetter = this.rowGetter.bind(this)
        this.scrollListener = () => {
            if (
                (this.canvas.clientHeight +
                    this.canvas.scrollTop) >= this.canvas.scrollHeight) {
                        if (this.props.data.next !== null) {
                            let query = {}
                            let newpage = this.state.page +1
                            query['page'] = newpage
                            this.setState({'page':newpage})
                            this.props.dispatch(fetchData(query)).then(
                                (res) => {
                                    // make handling
                                },
                                (err) => {
                                    //  make handleing
                                }
                            )
                        }
            }
        };
        this.canvas = null;
    }
    componentDidMount() {
        this.props.dispatch(fetchData({'page':this.state.page}))
        this.canvas = findDOMNode(this).querySelector('.react-grid-Canvas');
        this.canvas.addEventListener('scroll', this.scrollListener);
        this._mounted = true
    }
    componentWillUnmount() {
        if(this.canvas) {
            this.canvas.removeEventListener('scroll', this.scrollListener);
        }
    }
    getRows() {
        return this.props.data.rows;
    }

    getSize() {
        return this.getRows().length;
    }
    rowGetter(rowIndex) {
        let rows = this.getRows();
        let _row = rows[rowIndex]
        return _row
    }
    render() {
        return (
                    <ReactDataGrid columns={columns}
                        rowGetter={this.rowGetter}
                        rowsCount={this.getSize()}
                        headerRowHeight={40}
                        minHeight={this.state.height}
                        rowHeight={40}
                    />

        )
    }
}

Note : Assumed data are taken from redux store