跳到内容
+

数据表格 - 行更新

始终保持您的行数据最新。

rows prop

更新行的最简单方法是使用 rows prop 提供新行。它会替换之前的值。这种方法有一些缺点

  • 您需要提供所有行。
  • 在准备要提供给数据表格的行数组时,可能会产生性能瓶颈。

updateRows 方法

如果您只想更新部分行,可以使用 apiRef.current.updateRows 方法。

updateRows API 的默认行为是更新或插入行。因此,如果行的 ID 不在当前行列表中,则会将其添加到数据表格中。

或者,如果您想删除一行,则需要在更新对象中传递一个额外的 _action 属性,如下所示。

apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);

无限滚动加载

表格提供了一个 onRowsScrollEnd prop,当滚动条到达视口区域底部时,可以使用它来加载额外的行。

此外,可以使用 scrollEndThreshold 更改调用 onRowsScrollEnd 的区域。

懒加载

懒加载的工作方式类似于分页系统,但它不是基于页面加载新行,而是基于视口加载。当用户滚动浏览数据表格并显示空行时,它会分块加载新行。

数据表格构建垂直滚动条,就好像所有行都已存在一样,并在加载数据时显示空(骨架)行。只有显示的行才会被获取。

要启用懒加载,您需要执行以下几个步骤

首先,设置 rowsLoadingMode="server"。然后,设置 rowCount 以反映服务器上可用的行数。第三,在 onFetchRows 上设置一个回调函数,以加载与 GridFetchRowsParams 中传递的行索引对应的数据。最后,使用 apiRef.current.unstable_replaceRows() 替换空行,如下面的演示所示。

Enter 开始编辑

高频率

每当行更新时,数据表格都必须应用排序和筛选。如果您的更新频率很高,这可能会成为问题。为了保持良好的性能,数据表格允许批量更新,并在一段时间后才应用它们。throttleRowsMs prop 可用于定义应用行更新的频率(以毫秒为单位)。

当接收更新的频率高于此阈值时,数据表格将等待后再更新行。

以下演示每 10 毫秒更新一次行,但它们仅每 2 秒应用一次。

Enter 开始编辑