使用 sorting/pagination 为 table 添加骨架效果

Question

我想将 Skeleton effect 添加到 MUI table。 table 的唯一要求是排序和分页功能。为了测试，我添加了 loading 钩子和假数据获取，延迟 3 秒，但 DataGrid 似乎不可能。

import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { Paper } from '@mui/material';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 },
];

const Home: NextPage = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  // fetch data from fake API
  useEffect(() => {
    setInterval(
      () =>
        fetch('https://jsonplaceholder.typicode.com/posts')
          .then((response) => response.json())
          .then((data) => {
            setPosts(data);
            setLoading(false);
          }),
      3000
    );
  }, []);

  return (
    <Container maxWidth="lg">
      <Box
        sx={{
          my: 4,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Paper sx={{ width: '100%' }}>
          <DataGrid
            rows={posts}
            columns={columns}
            pageSize={10}
            autoHeight
            rowsPerPageOptions={[10]}
            disableSelectionOnClick
            disableColumnMenu
            disableColumnSelector
          />
        </Paper>
      </Box>
    </Container>
  );
};

export default Home;

Answer 1

您需要从 MUI 导入骨架组件。
在您的 JSX 代码中使用 组件。每当 loading === true 你需要显示骨架组件。示例：

{loading ? <Skeleton variant="rectangular" width={210} height={118} /> : <> ...Your table... </> }

每当请求被撤回时，您需要调用 setLoading(true) 以便您可以向用户显示已发出请求并且正在加载一些数据。

我建议将 setLoading() 函数移动到 .then() 块中 [!] 这样即使请求失败加载也会停止并且你可以显示某种错误信息。在您的情况下，如果请求失败，加载将继续，直到您重新加载页面或调用请求直到它成功。 [!]

Answer 2

Mui DataGrid 有一些用于加载的自定义选项，您可以在 https://mui.com/components/data-grid/components/#loading-overlay ，如果您想设置自定义加载组件，您的 DataGrid 组件将看起来像

    // You can find a proper height for the Paper component (if you do that 
    // you will need to remove autoHeight from data grid) , or change the data grid height  . 
    // if not the table height wont fit and you will need to edit some styles .

     <Paper sx={{ width: "100%" , height: "600px" }}> 
           <DataGrid
            rows={posts}
            columns={columns}
            pageSize={10}
            // autoHeight
            // sx={{minHeight: 600}}  if you want to use autoHeight you will need add some height
            rowsPerPageOptions={[10]}
            disableSelectionOnClick
            disableColumnMenu
            disableColumnSelector
            components={{
              LoadingOverlay: LoadingSkeleton  
            }}
            loading={loading}   // you need to set your boolean loading
          />
    </Paper>

您可以使用骨架制作自定义组件

  const LoadingSkeleton = () => (
          <Skeleton variant="rectangular" sx={{ my: 4, mx: 1 }} />
 );

如果你要列一个赛艇骨架列表

const LoadingSkeleton = () => (
  <Box
    sx={{
      height: "max-content"
    }}
  >
    {[...Array(10)].map((_) => (
      <Skeleton variant="rectangular" sx={{ my: 4, mx: 1 }} />
    ))}
  </Box>
);

可以在此处找到一个简单示例 https://codesandbox.io/s/trusting-rgb-wwqd2o?file=/src/App.js:440-644，划船骨架列表的样式可能需要一些更改。

使用 sorting/pagination 为 table 添加骨架效果

Adding skeleton effect to a table with sorting/pagination

reactjs

typescript

material-ui

next.js

react-loading-skeleton