在 React 数据网格中，需要为数据添加分页答案

【问题标题】：In React data grid, Need to add pagination for the data在 React 数据网格中，需要为数据添加分页
【发布时间】：2020-06-24 12:35:06
【问题描述】：

我们正在使用反应数据网格，需要在其中添加分页。我没有找到任何参考。请建议任何参考

【问题讨论】：

标签： reactjs react-data-grid

【解决方案1】：

您可以使用onScroll 属性来实现无限滚动。请看下面的例子。

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

注意：这里数据的获取是在另一个组件中完成的，这里没有提到

【讨论】：