怎么避免有数据的情况下,初始化页面显示 No data currently available:
在 material-react-table
中,如果数据量较大或者数据加载存在延迟,表格可能会先显示 "No data currently available" 然后再渲染数据。这通常发生在数据加载过程中。要改善这种情况,可以使用"加载"指示器,并在数据完全加载后再渲染表格。
如果只需要在 tbody
内容区域显示加载状态而保持 table
的 header 可见,可以通过自定义的方式来实现。我们可以在 MaterialReactTable
中渲染 header
和 tbody
的内容,并在 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;
解释
data={tableData || []}
:确保即使数据为空,表格头部仍然会渲染,因为表格会认为有一个空的data
数组。renderRow
:渲染行数据。当数据加载完成后,renderRow
将显示实际数据行。renderEmptyRowsFallback
:自定义空行的渲染内容。tableData === null
时显示Loading...
,否则显示No data available
。<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" 的信息。