在Material-UItable中添加进度条
Add progress bar in Material-UI table
我有这个例子 Material-UI table:
import React from "react";
import clsx from "clsx";
import {
createStyles,
lighten,
makeStyles,
Theme
} from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow";
import TableSortLabel from "@material-ui/core/TableSortLabel";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import DeleteIcon from "@material-ui/icons/Delete";
import FilterListIcon from "@material-ui/icons/FilterList";
interface Data {
calories: number;
carbs: number;
fat: number;
name: string;
protein: number;
}
function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number
): Data {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Donut", 452, 25.0, 51, 4.9),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Honeycomb", 408, 3.2, 87, 6.5),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Jelly Bean", 375, 0.0, 94, 0.0),
createData("KitKat", 518, 26.0, 65, 7.0),
createData("Lollipop", 392, 0.2, 98, 0.0),
createData("Marshmallow", 318, 0, 81, 2.0),
createData("Nougat", 360, 19.0, 9, 37.0),
createData("Oreo", 437, 18.0, 63, 4.0)
];
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
type Order = "asc" | "desc";
function getComparator<Key extends keyof any>(
order: Order,
orderBy: Key
): (
a: { [key in Key]: number | string },
b: { [key in Key]: number | string }
) => number {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
interface HeadCell {
disablePadding: boolean;
id: keyof Data;
label: string;
numeric: boolean;
}
const headCells: HeadCell[] = [
{
id: "name",
numeric: false,
disablePadding: true,
label: "Dessert (100g serving)"
},
{ id: "calories", numeric: true, disablePadding: false, label: "Calories" },
{ id: "fat", numeric: true, disablePadding: false, label: "Fat (g)" },
{ id: "carbs", numeric: true, disablePadding: false, label: "Carbs (g)" },
{ id: "protein", numeric: true, disablePadding: false, label: "Protein (g)" }
];
interface EnhancedTableProps {
classes: ReturnType<typeof useStyles>;
numSelected: number;
onRequestSort: (
event: React.MouseEvent<unknown>,
property: keyof Data
) => void;
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
order: Order;
orderBy: string;
rowCount: number;
}
function EnhancedTableHead(props: EnhancedTableProps) {
const {
classes,
onSelectAllClick,
order,
orderBy,
numSelected,
rowCount,
onRequestSort
} = props;
const createSortHandler = (property: keyof Data) => (
event: React.MouseEvent<unknown>
) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
onChange={onSelectAllClick}
inputProps={{ "aria-label": "select all desserts" }}
/>
</TableCell>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.numeric ? "right" : "left"}
padding={headCell.disablePadding ? "none" : "normal"}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : "asc"}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<span className={classes.visuallyHidden}>
{order === "desc" ? "sorted descending" : "sorted ascending"}
</span>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
const useToolbarStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1)
},
highlight:
theme.palette.type === "light"
? {
color: theme.palette.secondary.main,
backgroundColor: lighten(theme.palette.secondary.light, 0.85)
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.secondary.dark
},
title: {
flex: "1 1 100%"
}
})
);
interface EnhancedTableToolbarProps {
numSelected: number;
}
const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
const classes = useToolbarStyles();
const { numSelected } = props;
return (
<Toolbar
className={clsx(classes.root, {
[classes.highlight]: numSelected > 0
})}
>
{numSelected > 0 ? (
<Typography
className={classes.title}
color="inherit"
variant="subtitle1"
component="div"
>
{numSelected} selected
</Typography>
) : (
<Typography
className={classes.title}
variant="h6"
id="tableTitle"
component="div"
>
Nutrition
</Typography>
)}
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</Toolbar>
);
};
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: "100%"
},
paper: {
width: "100%",
marginBottom: theme.spacing(2)
},
table: {
minWidth: 750
},
visuallyHidden: {
border: 0,
clip: "rect(0 0 0 0)",
height: 1,
margin: -1,
overflow: "hidden",
padding: 0,
position: "absolute",
top: 20,
width: 1
}
})
);
export default function Hello() {
const classes = useStyles();
const [order, setOrder] = React.useState<Order>("asc");
const [orderBy, setOrderBy] = React.useState<keyof Data>("calories");
const [selected, setSelected] = React.useState<string[]>([]);
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const handleRequestSort = (
event: React.MouseEvent<unknown>,
property: keyof Data
) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.checked) {
const newSelecteds = rows.map((n) => n.name);
setSelected(newSelecteds);
return;
}
setSelected([]);
};
const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
const selectedIndex = selected.indexOf(name);
let newSelected: string[] = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1)
);
}
setSelected(newSelected);
};
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (
event: React.ChangeEvent<HTMLInputElement>
) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const isSelected = (name: string) => selected.indexOf(name) !== -1;
const emptyRows =
rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<EnhancedTableToolbar numSelected={selected.length} />
<TableContainer>
<Table
className={classes.table}
aria-labelledby="tableTitle"
size={"medium"}
aria-label="enhanced table"
>
<EnhancedTableHead
classes={classes}
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
/>
<TableBody>
{stableSort(rows, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.name);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.name)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.name}
selected={isItemSelected}
>
<TableCell padding="checkbox">
<Checkbox
checked={isItemSelected}
inputProps={{ "aria-labelledby": labelId }}
/>
</TableCell>
<TableCell
component="th"
id={labelId}
scope="row"
padding="none"
>
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</div>
);
}
沙盒：https://codesandbox.io/s/fragrant-leaf-d0zy2?file=/src/Hello.tsx:0-12181
你知道我怎样才能把这样的进度条添加到 table:
import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
'& > * + *': {
marginLeft: theme.spacing(2),
},
},
}),
);
export default function CircularIndeterminate() {
const classes = useStyles();
return (
<div className={classes.root}>
<CircularProgress />
<CircularProgress color="secondary" />
</div>
);
}
参考：https://material-ui.com/components/progress/
我希望在从 Rest 加载数据时看到进度条 API。
您可以添加位置为 absolute 的加载，以将其显示在 table 的中心。
然后在从 API
获取数据时使用状态来控制 show/hide 此加载
https://codesandbox.io/s/upbeat-lamport-ct3k4?file=/src/loading.tsx
下面是此类用例的简单示例：
调用后端 API 时，我们将加载设置为 true 以显示进度条，当它完成时，我们将加载设置为 false 以“关闭它”
import React from "react";
import CircularProgress from "@material-ui/core/CircularProgress";
export default function App() {
const [loading, setLoading] = useState(false);
const apiCall = () => {
setLoading(true)
axios.get("url")
.then(response => {
useData(response);
}
)
.finally(() => {
setLoading(false)
}
);
}
return (
<div>
{ loading ?? <CircularProgress />}
<RestOfApplication/>
</div>
);
}
在这个沙箱中的一个示例中，用于显示在页面加载时进行 API 调用时的进度：
https://codesandbox.io/s/Whosebug-example-of-circular-progress-while-api-call-z10gp
相关片段：
const [loading, setLoading] = useState(false);
const wait = (ms: number | undefined) =>
new Promise((resolve) => setTimeout(resolve, ms));
var chain = Promise.resolve();
const apiCall = () => {
setLoading(true);
// axios
// .get("url")
// .then((response) => {
// useData(response);
// })
chain = chain
.then(() => {
console.log("api call");
return wait(7000);
})
.finally(() => {
setLoading(false);
});
};
useEffect(() => {
apiCall();
}, []);
........
<Fragment>
{loading ? (
<div
style={{
position: "absolute",
alignItems: "center",
display: "flex",
justifyContent: "center",
width: "100vw"
}}
>
<CircularProgress />
</div>
) : (
[]
)}
<RestOfApplication/>
</Fragment>
这对我有用
import { Stack, Typography, CircularProgress } from '@mui/material';
...
const { loading, error, data } = useQuery(query GetPage($slug: String!) {
pageBySlug(slug: $slug) {
id
slug
Title
Content
}, {
variables: {
slug: slug,
},
});
if (loading) {
return <Stack alignItems="center">
<CircularProgress sx={{ m: 1 }} color="primary" />
<Typography
sx={{
display: 'inline-block',
color: 'primary.main',
p: 1,
}}
>
Data is loading...
</Typography>
</Stack>
}
if (error) {
return <Error />;
}
...
return (
<React.Fragment>
{page.Seo && <Head props={page.Seo} slug={page.slug} />}
{page.Hero && <Hero props={page.Hero} />}
<Container
sx={{
py: 10,
}}
>
<Typography component="h1" variant="h1" sx={{ mb: 10 }}>
{page.Title}
</Typography>
<Container
sx={{
width: { md: '75%' },
}}
>
<ReactMarkdown>{page.Content}</ReactMarkdown>
</Container>
</Container>
</React.Fragment>
);
我有这个例子 Material-UI table:
import React from "react";
import clsx from "clsx";
import {
createStyles,
lighten,
makeStyles,
Theme
} from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow";
import TableSortLabel from "@material-ui/core/TableSortLabel";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import DeleteIcon from "@material-ui/icons/Delete";
import FilterListIcon from "@material-ui/icons/FilterList";
interface Data {
calories: number;
carbs: number;
fat: number;
name: string;
protein: number;
}
function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number
): Data {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Donut", 452, 25.0, 51, 4.9),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Honeycomb", 408, 3.2, 87, 6.5),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Jelly Bean", 375, 0.0, 94, 0.0),
createData("KitKat", 518, 26.0, 65, 7.0),
createData("Lollipop", 392, 0.2, 98, 0.0),
createData("Marshmallow", 318, 0, 81, 2.0),
createData("Nougat", 360, 19.0, 9, 37.0),
createData("Oreo", 437, 18.0, 63, 4.0)
];
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
type Order = "asc" | "desc";
function getComparator<Key extends keyof any>(
order: Order,
orderBy: Key
): (
a: { [key in Key]: number | string },
b: { [key in Key]: number | string }
) => number {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
interface HeadCell {
disablePadding: boolean;
id: keyof Data;
label: string;
numeric: boolean;
}
const headCells: HeadCell[] = [
{
id: "name",
numeric: false,
disablePadding: true,
label: "Dessert (100g serving)"
},
{ id: "calories", numeric: true, disablePadding: false, label: "Calories" },
{ id: "fat", numeric: true, disablePadding: false, label: "Fat (g)" },
{ id: "carbs", numeric: true, disablePadding: false, label: "Carbs (g)" },
{ id: "protein", numeric: true, disablePadding: false, label: "Protein (g)" }
];
interface EnhancedTableProps {
classes: ReturnType<typeof useStyles>;
numSelected: number;
onRequestSort: (
event: React.MouseEvent<unknown>,
property: keyof Data
) => void;
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
order: Order;
orderBy: string;
rowCount: number;
}
function EnhancedTableHead(props: EnhancedTableProps) {
const {
classes,
onSelectAllClick,
order,
orderBy,
numSelected,
rowCount,
onRequestSort
} = props;
const createSortHandler = (property: keyof Data) => (
event: React.MouseEvent<unknown>
) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
onChange={onSelectAllClick}
inputProps={{ "aria-label": "select all desserts" }}
/>
</TableCell>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.numeric ? "right" : "left"}
padding={headCell.disablePadding ? "none" : "normal"}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : "asc"}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<span className={classes.visuallyHidden}>
{order === "desc" ? "sorted descending" : "sorted ascending"}
</span>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
const useToolbarStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1)
},
highlight:
theme.palette.type === "light"
? {
color: theme.palette.secondary.main,
backgroundColor: lighten(theme.palette.secondary.light, 0.85)
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.secondary.dark
},
title: {
flex: "1 1 100%"
}
})
);
interface EnhancedTableToolbarProps {
numSelected: number;
}
const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
const classes = useToolbarStyles();
const { numSelected } = props;
return (
<Toolbar
className={clsx(classes.root, {
[classes.highlight]: numSelected > 0
})}
>
{numSelected > 0 ? (
<Typography
className={classes.title}
color="inherit"
variant="subtitle1"
component="div"
>
{numSelected} selected
</Typography>
) : (
<Typography
className={classes.title}
variant="h6"
id="tableTitle"
component="div"
>
Nutrition
</Typography>
)}
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</Toolbar>
);
};
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: "100%"
},
paper: {
width: "100%",
marginBottom: theme.spacing(2)
},
table: {
minWidth: 750
},
visuallyHidden: {
border: 0,
clip: "rect(0 0 0 0)",
height: 1,
margin: -1,
overflow: "hidden",
padding: 0,
position: "absolute",
top: 20,
width: 1
}
})
);
export default function Hello() {
const classes = useStyles();
const [order, setOrder] = React.useState<Order>("asc");
const [orderBy, setOrderBy] = React.useState<keyof Data>("calories");
const [selected, setSelected] = React.useState<string[]>([]);
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const handleRequestSort = (
event: React.MouseEvent<unknown>,
property: keyof Data
) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.checked) {
const newSelecteds = rows.map((n) => n.name);
setSelected(newSelecteds);
return;
}
setSelected([]);
};
const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
const selectedIndex = selected.indexOf(name);
let newSelected: string[] = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1)
);
}
setSelected(newSelected);
};
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (
event: React.ChangeEvent<HTMLInputElement>
) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const isSelected = (name: string) => selected.indexOf(name) !== -1;
const emptyRows =
rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<EnhancedTableToolbar numSelected={selected.length} />
<TableContainer>
<Table
className={classes.table}
aria-labelledby="tableTitle"
size={"medium"}
aria-label="enhanced table"
>
<EnhancedTableHead
classes={classes}
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
/>
<TableBody>
{stableSort(rows, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.name);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.name)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.name}
selected={isItemSelected}
>
<TableCell padding="checkbox">
<Checkbox
checked={isItemSelected}
inputProps={{ "aria-labelledby": labelId }}
/>
</TableCell>
<TableCell
component="th"
id={labelId}
scope="row"
padding="none"
>
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</div>
);
}
沙盒：https://codesandbox.io/s/fragrant-leaf-d0zy2?file=/src/Hello.tsx:0-12181
你知道我怎样才能把这样的进度条添加到 table:
import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
'& > * + *': {
marginLeft: theme.spacing(2),
},
},
}),
);
export default function CircularIndeterminate() {
const classes = useStyles();
return (
<div className={classes.root}>
<CircularProgress />
<CircularProgress color="secondary" />
</div>
);
}
参考：https://material-ui.com/components/progress/
我希望在从 Rest 加载数据时看到进度条 API。
您可以添加位置为 absolute 的加载，以将其显示在 table 的中心。
然后在从 API
获取数据时使用状态来控制 show/hide 此加载https://codesandbox.io/s/upbeat-lamport-ct3k4?file=/src/loading.tsx
下面是此类用例的简单示例：
调用后端 API 时，我们将加载设置为 true 以显示进度条，当它完成时，我们将加载设置为 false 以“关闭它”
import React from "react";
import CircularProgress from "@material-ui/core/CircularProgress";
export default function App() {
const [loading, setLoading] = useState(false);
const apiCall = () => {
setLoading(true)
axios.get("url")
.then(response => {
useData(response);
}
)
.finally(() => {
setLoading(false)
}
);
}
return (
<div>
{ loading ?? <CircularProgress />}
<RestOfApplication/>
</div>
);
}
在这个沙箱中的一个示例中，用于显示在页面加载时进行 API 调用时的进度： https://codesandbox.io/s/Whosebug-example-of-circular-progress-while-api-call-z10gp
相关片段：
const [loading, setLoading] = useState(false);
const wait = (ms: number | undefined) =>
new Promise((resolve) => setTimeout(resolve, ms));
var chain = Promise.resolve();
const apiCall = () => {
setLoading(true);
// axios
// .get("url")
// .then((response) => {
// useData(response);
// })
chain = chain
.then(() => {
console.log("api call");
return wait(7000);
})
.finally(() => {
setLoading(false);
});
};
useEffect(() => {
apiCall();
}, []);
........
<Fragment>
{loading ? (
<div
style={{
position: "absolute",
alignItems: "center",
display: "flex",
justifyContent: "center",
width: "100vw"
}}
>
<CircularProgress />
</div>
) : (
[]
)}
<RestOfApplication/>
</Fragment>
这对我有用
import { Stack, Typography, CircularProgress } from '@mui/material';
...
const { loading, error, data } = useQuery(query GetPage($slug: String!) {
pageBySlug(slug: $slug) {
id
slug
Title
Content
}, {
variables: {
slug: slug,
},
});
if (loading) {
return <Stack alignItems="center">
<CircularProgress sx={{ m: 1 }} color="primary" />
<Typography
sx={{
display: 'inline-block',
color: 'primary.main',
p: 1,
}}
>
Data is loading...
</Typography>
</Stack>
}
if (error) {
return <Error />;
}
...
return (
<React.Fragment>
{page.Seo && <Head props={page.Seo} slug={page.slug} />}
{page.Hero && <Hero props={page.Hero} />}
<Container
sx={{
py: 10,
}}
>
<Typography component="h1" variant="h1" sx={{ mb: 10 }}>
{page.Title}
</Typography>
<Container
sx={{
width: { md: '75%' },
}}
>
<ReactMarkdown>{page.Content}</ReactMarkdown>
</Container>
</Container>
</React.Fragment>
);