Material UI - 是否可以在 table 分页操作中禁用 labelDisplayedRows？

Question

我正在尝试从 Material UI 的 table.

中的 table 分页操作中删除 labelDisplayedRows 函数

我只想在页脚中显示 next/previous 图标。

我可以通过使选项列表为单个数字来禁用 select 多行的选项，这样就可以从页脚中删除 select 菜单，但我不能想办法去掉显示计数器的标签（例如：5 个中的 1 个）。

我看过这个 documentation and this API outline 但我找不到请求不显示该计数器的方法。

目前我有：

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：

Answer 1

您可以通过包含样式来尝试使用 CSS 的常用方法之一。

import './custom.css'

custom.css 文件

.MuiTablePagination-caption { /* Class generated from your code */
  display: none;
}

输出：

Codesandbox 演示：https://codesandbox.io/s/intelligent-monad-75y7b

请注意，它只是对用户隐藏了它，但该元素仍在 DOM 上。你可以通过开发者工具看到它。

Answer 2

只需将 rowsPerPageOptions 设置为单个数组项。图书馆自动隐藏少于两个的 rowsPerPagesOptions.

你的情况

         <TablePagination
            colSpan={3}
            rowsPerPageOptions=[10] //rowPerPageOption takes array parameters
           ...

            />

Material UI - 是否可以在 table 分页操作中禁用 labelDisplayedRows？

Material UI - is it possible to disable labelDisplayedRows in the table pagination actions?

css

material-ui

material-table