React material table automatic page size

Question

I am using React + Material Table.

Questions I have

Is there a way to dynamically set pageSize based on the available space on the page?
If there is no API to do so - how to better approach this problem from component design perspective?

What am I trying to achieve?

The number of rows displayed in a Material Table should depend on screen size. The page will not look similar depending on your screen size (e.g. on laptop device it could look fine, but on 25 inch display there will be a lot of space which could be filled by rows).

What I already did?

I searched though the official documentation and was not able to find the solution.
I was also looking for developer posts and other SO topics - still no result.

Of course it is possible to build a script which does some simple calculations based on container size and row size to fill as much rows as possible, but I would like to avoid this solution and use something out-of-the-box if possible.

You could try adding an EventListener for the 'resize' event which keeps track of the screen size. And depending on that screen size, you give the desired values for your `pageSize` prop. — minus.273, Sep 06 '19 at 06:59

score 7 · Accepted Answer · answered Sep 26 '19 at 11:45

I too had the same requirement. So I found a solution, by using AutoSizer from the 'react-virtualized-auto-sizer' package. It goes well with the 'material-table' package.

Sample Code:

    import AutoSizer from 'react-virtualized-auto-sizer';  

    export default function Monitor() {
    const columns = [...];
    const data = [..];
    return (
        <AutoSizer>
        {({ height, width }) => {
            console.log(`Height: ${height} | Width: ${width}`);
            const pageSize = Math.floor((height - 192) / 48);
            console.log(`Page Size: ${pageSize}`);

            return (
            <div style={{ height: `${height}px`, width: `${width}px`, overflowY: 'auto' }}>
                <MaterialTable
                columns={columns}
                data={data}
                options={{
                    pageSize: pageSize,
                    pageSizeOptions: [],
                    toolbar: true,
                    paging: true
                }}
                icons={tableIcons}
                ></MaterialTable>
            </div>
            );
        }}
        </AutoSizer>
    );
    }

score 4 · Answer 2 · answered Oct 02 '19 at 00:31

The solution that worked for me is the folling (material-table docs):

 <MaterialTable minRows={10}

    localization={{
    toolbar: {
        searchPlaceholder: "Buscar",
        searchTooltip: "Buscar "
    },
    pagination:{
        labelRowsSelect:"Registros",
        labelRowsPerPage:"Filas por pagina"
    },
    body: {
        deleteTooltip: "Eliminar",
        emptyDataSourceMessage: "No existen registros"
    }
    }}
    title="Listado de registros"
    columns={state.columns}
    data={state.data}
    actions={[
        {
        icon: 'add',
        tooltip: 'Agregar',
        isFreeAction: true,
        onClick: props.addRegister
        }
    ]}

    options={{
        pageSize: 10,
        pageSizeOptions: [5, 10, 20, 30 ,50, 75, 100 ],
        toolbar: true,
        paging: true
    }}

    components={{
        Pagination: props => (
          <TablePagination
            {...props}
            labelRowsPerPage={<div style={{fontSize: 14}}>{props.labelRowsPerPage}</div>}
            labelDisplayedRows={row => <div style={{fontSize: 14}}>{props.labelDisplayedRows(row)}</div>}
            SelectProps={{
              style:{
                fontSize: 14
              }
            }}                    
          />
        )
      }}
    >

    </MaterialTable>

Can you please explain this? I don't see how this solves OP's problem. — Kerim Güney, Jul 01 '20 at 12:31
Of course, in "options" you can se the property pageSize, the 10 value show the first load this rows in the table, if you want to set 20, then the first load should show you 20 rows in the table — Jorge Santos Neill, Jul 03 '20 at 00:11
thank you for the explanation, but I think OP's problem is that he doesn't know ahead of time how many rows the table is supposed to show. If the window height is big, then OP wants the table to resize automatically and fill the window with as many rows as possible. — Kerim Güney, Jul 03 '20 at 12:16

React material table automatic page size

2 Answers2

Linked