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

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

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

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

以下是优化后的代码：

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，而是显示一个加载指示器或占位符，数据加载完成后再渲染表格：

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" 的信息。