0

We are using react data grid, Need to add pagination in that. I dont find any reference for that. Kindly suggest any reference

1 Answers1

1

You can use the onScroll props for implementing infinite scrolling. Please see the example below.

import React, { useEffect, useState } from 'react'
import ReactDataGrid from 'react-data-grid'


function Datagrid(props) {
  const [rows, setRows] = useState([])

  useEffect(() => {
    setRows(props.list)
  }, [props.list])

  function getSize() {
    return rows.length;
  }

  function checkEndofRow(rowVisibleEndIdx) {
    return rowVisibleEndIdx % 30 === 0  // Limited to 30 results per page. This can be changed according to your need.
  }

  function onScroll(scrollProps) {
    if (scrollProps.scrollDirection === "downwards" && 
     scrollProps.rowOverscanEndIdx >= scrollProps.rowVisibleEndIdx && 
   checkEndofRow(scrollProps.rowVisibleEndIdx) && props.next !== null) {
        /* The method for pagination is called only when the
         scrollDirection is downwards and end of page is reached. 
        Also a checked is added if there is next page */
        props.pagination()
    }
 }

 return (
    <div className="data-view-table ">
            <ReactDataGrid columns={props.columns}
                rowGetter={i => rows[i]}
                rowsCount={getSize()}
                headerRowHeight={40}
                minHeight={height}
                rowHeight={40}
                onScroll={onScroll}
            />
    </div>
 )
}

export default Datagrid

Note: Here the fetching of data is done in another component which is not mentioned here

Harikrishnan
  • 1,097
  • 8
  • 13