React material table automatic page size

那年仲夏 提交于 2019-12-13 19:48:24

问题


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.


回答1:


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>
    );
    }



回答2:


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>


来源:https://stackoverflow.com/questions/57787218/react-material-table-automatic-page-size

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!