MUI v5 DataGridの使い方　その5 ～フッター～

前回に続いて、Vite+React+TypeScript 環境で MUI の DataGrid の使い方を、Tips的にまとめていきます。

MUI v5 DataGrid の記事一覧
MUI v5 DataGridの使い方　その1 ～基本の使い方から日本語化まで～
MUI v5 DataGridの使い方　その2 ～クリックできるアイコンセルを表示する～
MUI v5 DataGridの使い方　その3 ～セルの縦線を表示する（不具合対応済み）～
MUI v5 DataGridの使い方　その4 ～列ヘッダ、列の設定～
MUI v5 DataGridの使い方　その5 ～フッター～
MUI v5 DataGridの使い方　その6 ～グリッドのPropsの一覧～
MUI v5 DataGridの使い方　その7～有償版(Pro版)のエラー対応～

有料版と無料版のフッターの違い

有料版はデータ件数が表示されています。

無料版はページあたりの行数やページングが表示されています。

フッターに表示されている選択中の行数を非表示にする

DataGrid に hideFooterSelectedRowCount を設定します。

<DataGrid
  columns={cols}
  rows={rows}
  density="compact"
  autoHeight
  components={{
    Toolbar: CustomToolbar 
  }}
  hideFooterSelectedRowCount
/>

フッターに表示されているページ当たりの行数、ページングを非表示にする。（無料版のみ）

DataGrid に hideFooterPagination を設定します。

<DataGrid
  columns={cols}
  rows={rows}
  density="compact"
  autoHeight
  components={{
    Toolbar: CustomToolbar 
  }}
  hideFooterPagination
/>

フッターに表示されているページ当たりの行数、ページングを非表示にする。（有料版のみ）

DataGrid に hideFooterPagination を設定します。

<DataGridPro
  columns={cols}
  rows={rows}
  density="compact"
  autoHeight
  components={{
    Toolbar: CustomToolbar 
  }}
  hideFooterPagination
/>

フッターを非表示にする

DataGrid に hideFooter を設定します。

<DataGrid
  columns={cols}
  rows={rows}
  density="compact"
  autoHeight
  components={{
    Toolbar: CustomToolbar 
  }}
  hideFooter
/>