Is it possible to set the number of items displayed in a material table per device?

Question

I’m doing a project in React and I have a component that makes a data listing using Material Table. By default I set to display 10 items per page, but in mobile it is bad to have so many items, mainly because I display this data within a modal

import React, { forwardRef } from 'react';

import MaterialTableCore from 'material-table';
import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => (
    <ChevronRight {...props} ref={ref} />
  )),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => (
    <ChevronLeft {...props} ref={ref} />
  )),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
};

const MaterialTable = (props) => (
  <MaterialTableCore
    {...props}
    icons={tableIcons}
    localization={{
      header: {
        actions: 'Ações',
      },
      body: {
        emptyDataSourceMessage: 'Nenhum registro para exibir',
      },
      toolbar: {
        searchTooltip: 'Pesquisar',
        searchPlaceholder: 'Pesquisar',
      },
      pagination: {
        labelRowsSelect: 'por página',
        labelDisplayedRows: '{from} à {to} de {count}',
        firstTooltip: 'Primeira página',
        previousTooltip: 'Página anterior',
        nextTooltip: 'Próxima página',
        lastTooltip: 'Última página',
      },
    }}
    options={{
      pageSize:10,
      actionsColumnIndex:3
    }}
  />
);

export default MaterialTable;

In the options I have set in pagSize to display 10 items per page, but I would like to know if you have how to make a device conditional to display fewer items. In the image below to see that the modal is cutting the items of Material Table and reduce to 5 items per page on mobile would be correct.

Answer 1

Use the following function inside the component. First, make sure it works the way you expect, testing in Firefox/Chrome/etc in devtools responsive mode (Ctrl + shift + M). In my case, the printa snippet which is mobile if I use it.

function isMobile() {
    let mql = window.matchMedia('only screen and (max-width: 760px)');
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera|Mini/i.test(navigator.userAgent) && mql.matches ) {
        return true;
    }
    return false;
}

console.log(isMobile() ? 'parece ser mobile' : 'não parece ser mobile')