material-react-table中 ,<MaterialReactTable /> optimization

怎么避免有数据的情况下,初始化页面显示 No data currently available:

material-react-table 中,如果数据量较大或者数据加载存在延迟,表格可能会先显示 "No data currently available" 然后再渲染数据。这通常发生在数据加载过程中。要改善这种情况,可以使用"加载"指示器,并在数据完全加载后再渲染表格。

如果只需要在 tbody 内容区域显示加载状态而保持 table 的 header 可见,可以通过自定义的方式来实现。我们可以在 MaterialReactTable 中渲染 headertbody 的内容,并在 tbody 中判断数据是否为空。如果数据还在加载中,就在 tbody 中显示一个加载指示器。

以下是优化后的代码:

javascript 复制代码
import React, { useState, useEffect } from 'react';
import MaterialReactTable from 'material-react-table';

const ExampleTable = () => {
  const [tableData, setTableData] = useState(null); // 数据初始为空,表示加载中
  const columns = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'age', header: 'Age' },
  ];

  useEffect(() => {
    // 模拟数据加载
    setTimeout(() => {
      setTableData([
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        { id: 3, name: 'Tom', age: 35 },
        // 添加其他数据行
      ]);
    }, 2000); // 模拟2秒的加载延迟
  }, []);

  return (
    <MaterialReactTable
      columns={columns}
      data={tableData || []} // 如果数据为空,传递空数组以显示表头
      renderRow={({ row, index }) => (
        <tr key={index}>
          {columns.map((col) => (
            <td key={col.accessorKey}>{row[col.accessorKey]}</td>
          ))}
        </tr>
      )}
      renderEmptyRowsFallback={() => (
        <tbody>
          <tr>
            <td colSpan={columns.length} style={{ textAlign: 'center', padding: '16px' }}>
              {tableData === null ? 'Loading...' : 'No data available'}
            </td>
          </tr>
        </tbody>
      )}
    />
  );
};

export default ExampleTable;

解释

  1. data={tableData || []} :确保即使数据为空,表格头部仍然会渲染,因为表格会认为有一个空的 data 数组。
  2. renderRow :渲染行数据。当数据加载完成后,renderRow 将显示实际数据行。
  3. renderEmptyRowsFallback :自定义空行的渲染内容。tableData === null 时显示 Loading...,否则显示 No data available
  4. <td colSpan={columns.length}> :设置加载指示器或空数据提示的 colSpan,使其占据整个行的宽度。

这样做可以确保在 tbody 中显示加载状态,并且 table 的头部(header)始终保持可见。

方法2:条件渲染 MaterialReactTable

在数据完全加载之前,可以选择不渲染 MaterialReactTable,而是显示一个加载指示器或占位符,数据加载完成后再渲染表格:

javascript 复制代码
import React, { useState, useEffect } from 'react';
import MaterialReactTable from 'material-react-table';

const ExampleTable = () => {
  const [tableData, setTableData] = useState(null);

  useEffect(() => {
    // 模拟数据加载
    setTimeout(() => {
      setTableData([
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        { id: 3, name: 'Tom', age: 35 },
        // 其他数据
      ]);
    }, 2000); // 模拟2秒的加载延迟
  }, []);

  return (
    <>
      {tableData ? (
        <MaterialReactTable
          columns={[
            { accessorKey: 'name', header: 'Name' },
            { accessorKey: 'age', header: 'Age' },
          ]}
          data={tableData}
        />
      ) : (
        <div>Loading...</div> // 加载指示器
      )}
    </>
  );
};

export default ExampleTable;

这两种方法都可以确保在数据完全准备好之前不会显示 "No data currently available" 的信息。

相关推荐
王解34 分钟前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
我不当帕鲁谁当帕鲁38 分钟前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂42 分钟前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2136 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy6 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js