データグリッドは、並べ替え、絞り込み、ページング、編集ができるネイティブのテーブルです。columns を定義して rows を渡すと、各セルは型に応じてロケールの書式で表示されます。数値、通貨、日付、はい・いいえ、enum の値のラベルに対応しています。
状態はモデルに保持され、バインド、保存、サーバーへの送信ができます。モデルは sort、filters、search、page、selected、そしてユーザーが選んだ列の幅、順序、固定、非表示を保持する columnState です。ページングしない場合は表示範囲の行だけがレンダリングされるため、10万行でも10行と同じようにスクロールできます。
すべてのセルにキーボードで移動できます。各列のパネルからは、その列の並べ替え、絞り込み、固定、移動、幅の自動調整、非表示ができます。
検索、並べ替え、ページング
入力するとすべての列を検索します。ヘッダーをクリックすると並べ替え、Shift キーを押しながらクリックすると2つ目の列を並べ替えに加えます。nuiGridCell がステータスを描画し、exportCsv() は表示中の内容を書き出します。
選択
selection="multiple" はチェックボックスを追加し、選択された行のキーをバインドします。Shift キーを押しながらクリックすると範囲を選択でき、ヘッダーのチェックボックスは絞り込み条件に一致するすべての行を選択します。
編集
セルをダブルクリックするか、Enter キーを押すか、そのまま入力してみてください。validate はメッセージを表示してエディターを開いたままにします。確定した編集は rows を更新し、cellEdit を出力します。
10万行
ページングしない場合は、表示範囲の行だけがレンダリングされます。固定した列は端にとどまり、columnState はユーザーが作ったレイアウトを保持します。
サーバーのデータ
server モードでは、グリッドは受け取った行をそのまま表示し、変更のたびに queryChange で知らせます。データの取得中は loading を設定します。