时间戳

首页 > 解决方案 > 在 React 中将大数据加载为 Grid 和 Table（使用 react-window）

reactjs - 在 React 中将大数据加载为 Grid 和 Table（使用 react-window）

问题描述

我有一个带有起始页的项目，它显示了用户的整个项目列表。用户可以在表格和表格之间切换。

对于网格，我使用 CSS 网格

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 2px;
  align-items: stretch;
  justify-items: stretch;

对于表格，我使用 Material UI 的 Table、TableCell、TableRow、TableHead 和 TableBody 组件。

现在我想找到一种用大数据渲染表格/表格的好方法。到现在为止，我有一个加载屏幕，当所有数据都加载完成时。那需要的时间太长了。

我找到 react-window 或 react-virtualized 和 react-virtualized-autosizer 但无法使其工作。是否有响应式 CSS 网格和表格的示例，您不知道项目的宽度和高度？

谢谢您的帮助！

标签： reactjsstyled-componentsreact-virtualizedreact-window

解决方案

推荐阅读