Material-ui DataGrid 和无限滚动

Question

我目前正在使用 material-ui data grid 组件，发现它非常好。

但是，对于我正在开发的当前功能，我需要在 DataGrid 中提供无限滚动支持。有人以前使用 material-ui 数据网格做过这个吗？

似乎不支持开箱即用地阅读文档。我确实遇到了问题，评论中有一些建议。

热衷于了解有关如何通过 material-ui 数据网格使用无限滚动的任何提示

Answer 1

是的，最简单的方法是使用商业版本。 在无限加载部分找到它： https://mui.com/x/react-data-grid/row-updates/ 道具名称是 onRowsScrollEnd。这可以触发一个函数来获取更多数据。

Answer 2

如果将 DataGrid 的 apiRef 属性设置为

useGridApirRef

从

@mui/x-data-grid

返回的引用，则可以通过该引用订阅网格生成的事件。您可以订阅一个

scrollPositionChange

事件，您可以使用该事件手动计算滚动位置并使用它来确定何时获取下一页。

还有一些方法可以获取当前加载的行数和滚动位置。

const gridApiRef = useGridApiRef();

React.useEffect(() => {
  if (gridApiRef.current.instanceId) {
    const currentRowCount = gridApiRef.current.getRowsCount();
    const scrollPosition = gridApiRef.current.getScrollPosition();

    // fetch next page when appropriate
  }
}, [gridApiRef.current.instanceId]);

return (<DataGrid apiRef={gridApiRef} ...props />);