Zenn
💡

MUI の TablePagination コンポーネントのデフォルト表示をカスタマイズしたい

2025/01/14に公開
TypeScript
mui
tech

MUI の Table コンポーネントは便利ですね。
フィルタリングやページネーションの管理も用意してくれているので作る手間が省けます。

ただ、上がってくるデザインと異なるので少し調整が必要だったりするので、
できる範囲でカスタマイズしていきます。

基本はドキュメントを参考に、ActionsComponent を作ってボタンイベントを用意しますが、
ページネーションが高機能すぎるので省く時にやったことを書き残します。

対象の箇所

↑の Rows per page と 1-10 of 12 のような UI は特に必要ないので非表示にしたい。

Rows per page のセレクトボックスを非表示にしたい

対応
rowsPerPageOptions に空配列を渡せば良い

<TablePagination
  rowsPerPageOptions={[]}
  ...
/>

ページネーションボタン横にある「1–10 of 12」のような件数の表記を非表示にしたい

対応
labelDisplayedRows に null を返す関数を渡せば良い

<TablePagination
  labelDisplayedRows={() => null}
  ...
/>

最終形

<TablePagination
  rowsPerPageOptions={[]}
  count={totalItemCount}
  rowsPerPage={10}
  page={page}
  onPageChange={handleChangePage}
  ActionsComponent={TablePaginationActions}
  labelDisplayedRows={() => null}
  sx={{
    '& > div': {
      paddingInline: 0,
      paddingTop: 2,
      display: 'block',
      minHeight: '40px',
        '.MuiTablePagination-displayedRows': {
          margin: 0,
        },
      },
  }}
/>

※追加するかもです。

その他

勘違いしていたこと

TableContainer コンポーネントにラップしておけば、TablePagination コンポーネントは使えるかと思っていました。
Tableコンポーネントじゃないと動かないんですね。

参考

https://v5-0-6.mui.com/components/tables/#custom-pagination-actions
https://v5-0-6.mui.com/api/table-pagination/
https://mui.com/material-ui/api/table-pagination/

Discussion