【React】MUIのDataGridにてソート・フィルター情報やページ情報を保存する方法

方法

apiRefのexportState()を使用し、DataGridの状態を取得する。
取得した状態をsessionなどに保存しておく。
状態を戻したいときは、restoreState()を使用する。

// 取得
apiRef.current.exportState();
// 復元
apiRef.current.restoreState(/*exportStateで取得したデータ*/);

参考URL：https://mui.com/x/react-data-grid/state/?srsltid=AfmBOoqAdmsDdiBdz69gEpHmZcbnB3HPtVBOeh_bzpB90piFpMgorl0t

サンプルコード

以下は、ソート・フィルター設定変更、またはページ切り替えをしたときに、その情報をセッションに保存し、画面を開いたときにそのセッションを元にDataGridの状態を復元するサンプルコードです。

import * as React from 'react';
import { useEffect } from 'react';
import { Box } from '@mui/material';
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';

export default function Sample() {
  // apiRefを使用
  const apiRef = useGridApiRef();

  // 仮データ
  const rows = [
    { id: 1, col1: 'ABC', col2: '123' },
    { id: 2, col1: 'DEF', col2: '456' },
    { id: 3, col1: 'GHI', col2: '789' },
    { id: 4, col1: 'JKL', col2: '123' },
    { id: 5, col1: 'MNO', col2: '456' },
    { id: 6, col1: 'PQR', col2: '789' },
    { id: 7, col1: 'STU', col2: '123' },
    { id: 8, col1: 'VWX', col2: '456' },
  ];

  const columns = [
    { field: 'id', headerName: 'id', width: 150 },
    { field: 'col1', headerName: 'Column 1', width: 150 },
    { field: 'col2', headerName: 'Column 2', width: 150 },
  ];

  /**
   * 画面起動時処理
   */
  useEffect(() => {
    // セッションストレージから保存された状態を取得
    const savedState = sessionStorage.getItem('dataGridState');
    if (savedState) {
      const parsedState = JSON.parse(savedState);
      // 状態を復元
      apiRef.current.restoreState(parsedState);
    }
  }, []);

  /**
   * DataGrid状態保存処理
   */
  const handleStateChange = () => {
    // 現在の状態をセッションストレージに保存
    const currentState = apiRef.current.exportState();
    sessionStorage.setItem('dataGridState', JSON.stringify(currentState));
  };

  return (
    <Box sx={{ height: 400, width: '50%', margin: 4 }}>
      <DataGrid
        apiRef={apiRef}// 使い方は普通のRefと同じ
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: { pageSize: 5, page: 0 },
          },
        }}
        onPaginationModelChange={handleStateChange} // ページ移動時
        onSortModelChange={handleStateChange} // ソート時
        onFilterModelChange={handleStateChange} // フィルター変更時
      />
    </Box>
  );
}

これで2ページ目以降を開いたり、昇順・降順を変えたときなどの情報を保存しておき、後から同じ状態に戻すことができます。

apiRefとは？

ここで使われているapiRefというのは、DataGridの扱いに特化したRefらしく、他にも行や列の変更もこれでできるそうです。

参考URL：https://mui.com/x/react-data-grid/api-object/?srsltid=AfmBOooeQ0gpfxI9Yr31T4TC4CDoTF5BkgK56LzoSJV5mO8_0dl68eKX

以上です。