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

问题描述

我正在尝试从Material UI的表中的表分页操作中删除labelDisplayedRows函数.

我只想在页脚中显示下一个/上一个图标.

我可以通过使选项列表为单个数字来禁用选择行数的选项，这样可以摆脱页脚中的选择菜单，但是我找不到摆脱标签的方法计数器(例如:5之1).

我已经看过这份

解决方案

可以通过添加样式来尝试使用CSS的一种常见方法.

  import'./custom.css' 

custom.css 文件

  .MuiTablePagination-caption {/*从您的代码生成的类*/显示:无；} 

输出:

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

请注意，它仅对用户隐藏了该元素，但该元素仍位于DOM上.您可以通过开发人员工具查看它.

I'm trying to get rid of the labelDisplayedRows function from the table pagination actions in Material UI's table.

I just want to display the next/previous icons in the footer.

I can disable the option to select a number of rows by making the options list a single number, and that gets rid of the select menu from the footer, but I can't find a way to get rid of the label showing the counter (eg: 1 of 5).

I've seen this documentation and this API outline but I can't find a way to ask for that counter not to be displayed.

Currently I have:

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>
  );
}

This won't map over the data options (I'll try to figure out why later). For now, I'm trying to find a way to get rid of the page counter from the footer.

For now - I render a NaN:

解决方案

One of the common methods you can try to use CSS by including styles.

import './custom.css'

custom.css file

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

Output:

Codesandbox demo: https://codesandbox.io/s/intelligent-monad-75y7b

Note that it only hides it from the user but the element is still on the DOM. You can see it through the Developer Tools.

这篇关于Material UI-是否可以在表分页操作中禁用labelDisplayedRows?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！