web-dev-qa-db-ja.com

Reactマテリアルテーブルの自動ページサイズ）

私はReact +素材表）を使っています。

私が持っている質問

  • 動的に設定される方法はありますPageSizeページの使用可能なスペースに基づいていますか？
  • それをするためのAPIがない場合 - コンポーネントデザインの観点からこの問題に適している方法

私は何を達成しようとしていますか？

素材テーブルに表示される行数は画面サイズに依存する必要があります。ページは画面サイズ（例えば、ノートパソコンのデバイスでは、25インチのディスプレイでは、行で埋める可能性がある多くのスペースがあるでしょう）のスペースがあるでしょう。

私はすでにしたこと？

  • 私は 公式ドキュメント を検索し、その解決策を見つけることができませんでした。
  • 私はまた開発者の投稿とその他SOトピック）を探していました - それでも結果はありません。

もちろん、できるだけ多くの行を埋めるためにコンテナサイズと行サイズに基づいていくつかの簡単な計算を行うスクリプトを構築することが可能ですが、この解決策を回避し、可能であれば箱外のものを使用します。

reactjsmaterial-uimaterial-designmaterial-table
7
Artyom Ignatovich

私も同じ要件がありました。そのため、 ' React-Virtualized-Auto-Sizer 'パッケージからautosizerを使用して、解決策を見つけました。 「品目テーブル」パッケージとうまくいきます。

サンプルコード：

    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

私のために働いた解決策は、次のところ（ 資料表のドキュメント ）です。

_ <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