Search code examples
reactjsmui-datatable

hide pagination and toolbar when printing MUIDataTable mui-datatables

when i click print i want to print only the table data except the toolbar and pagination, i don't need them to appear. i did not find how to fix this in the documentation of MUIDataTable i use MUIDataTable

import MUIDataTable from 'mui-datatables';

...

const options = {
  filter: true,
  selectableRows: false,
  filterType: 'dropdown',
  responsive: 'stacked',
  download: exportButton,
  print: exportButton,
  rowsPerPage: 10,
  downloadOptions: { filename: 'roles.csv' },
  customToolbar: () => (
    <CustomToolbar
      csvData={allRoles}
      /* csvData={staffs} */
      url="/app/data/administration/role-actions"
      tooltip="add new role"
      fileName="Roles"
      excludeAttributes={excludeAttributes}
      hasAddRole={thelogedUser.userRoles[0].actionsNames.admin_roles_management_create}
      hasExportRole={thelogedUser.userRoles[0].actionsNames.admin_roles_management_export}
    />
  ),

};
...
return (
  <div>
    <MUIDataTable
      title=""
      data={allRoles && allRoles}
      columns={columns}
      options={options}
    />
  </div>
);

enter image description here

Solution

  • i resolved my issue using this css code

     const getMuiTheme = () => createMuiTheme({
      overrides: {
        MUIDataTableToolbar: {
          root: {
            '@media print': {
              display: 'none'
            }
          },
        },
        MUIDataTablePagination: {
          root: {
            '@media print': {
              display: 'none'
            }
          },
        }
      }
    });