web-dev-qa-db-fra.com

React Tableau de matériau Taille de la page automatique

J'utilise React + Tableau de matériau.

questions que j'ai

  • Existe-t-il un moyen de définir dynamiquement Pagesize Basé sur l'espace disponible sur la page?
  • S'il n'y a pas d'API à le faire - comment mieux approcher ce problème de la perspective de la conception des composants?

Qu'est-ce que j'essaie d'atteindre ?

Le nombre de lignes affichées dans une table de matériaux doit dépendre de la taille de l'écran. La page ne semblera pas similaire en fonction de la taille de votre écran (par exemple sur le périphérique portable, il pourrait sembler bien, mais sur l'affichage de 25 pouces, il y aura beaucoup d'espace pouvant être rempli par des rangées).

Qu'est-ce que je faisais déjà ?

  • J'ai eu cherché la Documentation officielle et n'a pas pu trouver la solution.
  • Je cherchais également des postes de développeurs et autres SO Thèmes - toujours aucun résultat.

Bien sûr, il est possible de construire un script qui effectue des calculs simples basés sur la taille du conteneur et la taille de la ligne pour remplir autant de lignes que possible, mais j'aimerais éviter cette solution et utiliser quelque chose à l'emploi si possible.

reactjsmaterial-uimaterial-designmaterial-table
7
Artyom Ignatovich

J'ai aussi eu la même exigence. J'ai donc trouvé une solution, à l'aide de AutoSizer à partir du package '- réacteur-virtualisé-auto-soeur '. Il va bien avec le forfait 'Matériel-Table'.

Exemple de 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>
    );
    }
3
Akhilesh

La solution qui a fonctionné pour moi est la folling ( Matériel-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>
1
Jorge Santos Neill