MaterialUIのDataGridで1ページに100件以上表示されない

本記事では、ReactでMateriaulUIのDataGridを利用していた時に発生した問題と、その解消方法を検証した内容を紹介します。

Z-A-K-I

MUIのDataGridが便利なので使いはじめたが、DataGridの注意点や問題を知った上で使いたい。

と、思ってる方におすすめです。

この記事では、以下のことを紹介してます。

MaterialUIのDataGridとは
1ページに100件以上表示されない問題の解消方法

ReactのCSSフレームワークの中では、MaterialUIはメジャーであるため採用しているプロジェクトは多くあります。今回はこのMaterialUIのDataGridの注意点について紹介します。

MaterialUIのDataGridとは
利用したMaterialUIのライセンス
今回発生した問題
事象の原因
対応内容
反省点
まとめ

MaterialUIのDataGridとは

MaterialUIにはDataGridというHTMLのTableのような一覧形式でデータを表示する部品があります。

データを参照する際などは、この部品を利用してデータを表示するのが一般的です。通常のHTMLのTableを利用した場合でも一覧形式でデータを表示することが可能ですが、MaterialUIのDataGridはさまざまな機能を備えており、以下のようなリッチなユーザーインターフェースが提供されてます。

ページ切り替え機能
選択レコードの件数表示
Excelのような一覧上でデータ編集が可能
列項目でのソート機能、フィルタ機能

上記のような機能が無料で利用できるため、Reactではよく使われるCSSフレームワークとなっています。上記の機能以外にもさまざまな機能を提供しており、詳細は下記の公式サイトを参照ください。

https://mui.com/x/react-data-grid/

利用したMaterialUIのライセンス

MaterialUIには、MITライセンスで利用できる無料版（DataGrid）と、無料版より高機能な有料版（DataGridPro、DataGridPremium）があります。

今回は、MITライセンスの無料版を利用していた時に発生した事象となります。

今回発生した問題

タイトルの通りなのですが、DataGrid上で100件以上のデータを表示することができない事象に遭遇しました。

前述したようにMaterialUIのDataGridは無料で高機能を備えているため、案件に採用しました。

画面の要件としては、ページ切り替え機能なし、フィルタ機能なし、一覧上で編集を行う、といった要件だったため、見た目をリッチにしたいという理由でMUIを導入しました。

ページ切り替えができるので、ページ切り替えしないこともできるだろうと考えてたのですが、上記事象に遭遇しました。ページ切り替え機能があるのにページ切り替えしないことができないといったことはないと考え、プロパティの設定が悪いのでは？と公式ドキュメントを読み漁りましたが、そのようなプロパティはなさそうでした。また、100件までしか表示されないといった記述も見つけることができず、今回の事象が製品の制約であるのか実装が悪いのかの根拠を見つけることができませんでした。

事象の原因

色々検証した結果、製品の仕様であることが判明しました。

１００件以上のデータを表示すると、React上何のエラーも出ずに100件までしか表示されない状態です。そのため、この挙動が仕様だとなかなか結論に至らなかったのですが、あるプロパティを利用することで検証することができました。

結論に利用したプロパティは「autoPageSize」というプロパティです。これを利用することで制約である内容を発見しました。

「autoPageSize」というプロパティは、グリッドで設定されている高さ（Height）分までデータを表示し、この高さを超えるレコード数が表示されている場合は、ページ切り替えを行うというプロパティです。このプロパティを利用し、この設定値の高さを１００件以上の高さに設定し動かすとエラーが表示されました。
画面キャプチャは残ってないのでエラーメッセージは正確ではないのですが、「MITライセンス版だと１００件までしか表示されない」といったエラーメッセージが表示されました。

以下が公式サイトから抜粋した「autoHeight」プロパティの説明です。

If true, the grid height is dynamic and follow the number of rows in the grid.

Type:
bool

対応内容

製品の制約として1ページに表示される件数は100件ということなので、この製品を利用する限り画面の要件は満たせないので、顧客と調整し100件以上の場合は、ページ切り替えをしてもらうというように要件を変更してもらいました。

反省点

ページ切り替えやフィルタ機能、ソート機能などの追加機能などは有償版でしか提供しないのは納得できますが、データを表示するための部品でわざわざ件数制限をする、というマイナスの制約があるところに考えが及ばず事前調査の対象から外れてしまいました。

ドキュメントにも明記されていないことから、「データを表示する部品だからできるだろう」という安易な考えで調査をしなかったことが反省です。今後は無償製品の場合は基本的なデータ表示に関する制約が何であるかの観点で調査が必要と感じました。

追記：正確には公式ドキュメントに以下の記載があるので、ちゃんと考えを働かせておけば事前にわかる事象でした。今となっては「書いてあるじゃん！」と思うのですが、当時は「ページ機能を利用した場合」だと勘違いしてました。

The DataGrid (MIT license) is limited to pages of up to 100 rows. If you want larger pages, you will need to upgrade to Pro plan or above.

By default, each page contains 100 rows. The user can change the size of the page through the selector in the footer.

↓DataGridのページ切り替え機能の公式ドキュメント

https://mui.com/x/react-data-grid/pagination/

100件までしかデータがないというには希少なケースだと思うので、MITライセンスのDataGridを利用する場合は、ページ切り替えは必ずしなければいけないと思った方がよいです。