css - Material UI - 是否可以在表格分页操作中禁用 labelDisplayedRows?
问题描述
我正在尝试从 Material UI 的表格中的表格分页操作中删除 labelDisplayedRows 函数。
我只想在页脚中显示下一个/上一个图标。
我可以通过将选项列表设为单个数字来禁用选择多行的选项,这样就可以摆脱页脚中的选择菜单,但是我找不到摆脱显示计数器的标签的方法(例如:5 个中的 1 个)。
我已经看过这个文档和这个API 大纲,但我找不到一种方法来要求不显示该计数器。
目前我有:
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, useTheme } 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 TableFooter from '@material-ui/core/TableFooter';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';
const useStyles1 = makeStyles((theme) => ({
root: {
flexShrink: 0,
marginLeft: theme.spacing(2.5),
},
}));
function TablePaginationActions(props) {
const classes = useStyles1();
const theme = useTheme();
const { count, page, rowsPerPage, onChangePage } = props;
const handleFirstPageButtonClick = (event) => {
onChangePage(event, 0);
};
const handleBackButtonClick = (event) => {
onChangePage(event, page - 1);
};
const handleNextButtonClick = (event) => {
onChangePage(event, page + 1);
};
const handleLastPageButtonClick = (event) => {
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
<div className={classes.root}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</div>
);
}
TablePaginationActions.propTypes = {
count: PropTypes.number.isRequired,
onChangePage: PropTypes.func.isRequired,
page: PropTypes.number.isRequired,
};
function createData(number, icon, heading, explanation) {
return { number, icon, heading, explanation };
}
const rows = [
createData(1, "sdkfj", 'Cupcake 2', 305),
createData(2, "sdksdfs fj",'Cupcake3', 305),
createData(3, "sdksddddfs fj",'Cupcake3', 305),
createData(4, "sdk ff sdfs fj",'Cupcake3', 305),
].sort((a, b) => (a.number < b.number ? -1 : 1));
const useStyles2 = makeStyles({
table: {
// minWidth: 500,
},
});
export default function CustomPaginationActionsTable() {
const classes = useStyles2();
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(1);
// const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="The design studio supports research">
<TableBody>
{(rowsPerPage > 0
? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: rows
).map((row) => (
<TableRow key={row.number}>
<TableCell align="right">
{row.icon}
</TableCell>
<TableCell component="th" scope="row" style={{ width: "80%" }}>
{row.heading}
{row.explanation}
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
colSpan={3}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[1]}
onChangePage={handleChangePage}
ActionsComponent={TablePaginationActions}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
);
}
这不会映射到数据选项(稍后我会尝试找出原因)。现在,我正在尝试找到一种方法来摆脱页脚中的页面计数器。
现在 - 我渲染一个 NaN:
解决方案
只需将 设置 rowsPerPageOptions
为单个数组项。该库会自动隐藏小于两个的 rowsPerPagesOptions。
在你的情况下
<TablePagination
colSpan={3}
rowsPerPageOptions=[10] //rowPerPageOption takes array parameters
...
/>
推荐阅读
- amazon-web-services - 如何在多个子网上运行 AWS EMR 集群?
- datetime - 如何很好地将 Neo4J 日期映射到 dateTime 字符串?
- r - R:使用收集来清理数据集
- excel - 返回第一个单元格中具有特定值的两个单元格之间的差异
- rust - 如何在同一项目的同一目录中包含另一个文件中的文件?
- python - 根据内部字典中的条件获取特定键 - python
- python - Python – Simplex 为原始和对偶返回不同的值
- sql - SQL 脚本文件失败但未显示错误
- reactjs - 使用 React 和 Hooks 设置从 API 调用到服务器的状态
- java - 很难在一组对象中找到最低价格