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

Question

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:

Answer 1

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.

Answer 2

Just set the rowsPerPageOptions to a single array item. The library automatically hides rowsPerPagesOptions that are less than two.

In your case

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

            />