We are using react data grid, Need to add pagination in that. I dont find any reference for that. Kindly suggest any reference
Asked
Active
Viewed 648 times
1 Answers
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