Search code examples
javascriptreactjsmaterial-uimui-datatable

Is it possible to add show all pages in the rows per page?


I have these rows per page options 10,15,100 is it possible to add an option to view all the rows? And if so, how? I can't seem to find it in the documentation:

Codesandbox: https://codesandbox.io/s/muidatatables-custom-toolbar-forked-xfhb5h?file=/index.js:1372-1394

  const options = {
    search: searchBtn,
    download: downloadBtn,
    print: printBtn,
    viewColumns: viewColumnBtn,
    filter: filterBtn,
    filterType: "dropdown",
    responsive: "standard",
    tableBodyHeight,
    tableBodyMaxHeight,
    onTableChange: (action, state) => {
      console.log(action);
      console.dir(state);
    }
  };

Solution

  • To achive that, remove tableBodyHeight,tableBodyMaxHeight, from options and add following props to your options object:

        responsive: "scrollFullHeight",
        pagination: false,
        rowsPerPageOptions: [],
    

    So, your options object should look like this :

    const options = {
        search: searchBtn,
        download: downloadBtn,
        print: printBtn,
        viewColumns: viewColumnBtn,
        filter: filterBtn,
        filterType: "dropdown",
        responsive: "scrollFullHeight",
        pagination: false,
        rowsPerPageOptions: [],
    
        onTableChange: (action, state) => {
          console.log(action);
          console.dir(state);
        }
      };
    

    Here is a working example.