Meaningless Notebook

我輩は雑記帖である。名はまだない。


答えはドキュメントにある典型。

<DataGrid
  rows={rows}
  {...data}
  rowCount={rowCountState}
  loading={isLoading}
  pageSizeOptions={[5]}
  paginationModel={paginationModel}
  paginationMode="server"
  onPaginationModelChange={setPaginationModel}
/>

Data Grid のデフォルトペ-ジネ-ションは『rows』に一度渡されたデ-タを全件とみなして制御する。

ペ-ジネ-ションに関する操作 (ペ-ジサイズを 20 から 100 に変えるとか、次のペ-ジに移るとか) をした時にサ-バからデ-タをフェッチする場合は『paginationMode=”server”』の指定が必要。

…これだけで 2 時間ぐらい使った、せつねぇ。

参考元