Laravel + inertia ＋ Vueのスターターキットで作成されるソースをTypescriptで書き換えるの記事で作成したソースを使ってshadcn-vueのData Tableを使ってみます。
TanStack TableというHeadless UI ライブラリを利用しているようです。Typescriptはオプションとのことで使わなくても利用出来るようですが、使うことはオススメとの記載もありTypescriptを使ったソースを利用しました。shadcn-vueのData Tableに記載のサンプルソースがTypescriptで記載されているのでそのまま利用するのに都合が良かったこともあります。
データを表示
shadcn-vueのData Tableの説明が丁寧なのであまり迷うことなくデータを表示することは出来ました。TanStack Tableの型定義が見つからないというようなエラーが出たので tsconfig.json でライブラリのインストール場所を追加してエラーが出ないようにしました。
ルーティングでは暫定的にデータを表示するためのに追加しています。現状のデータ表示とTanStack Tableを使った表示の操作感を比較するためです。最終的には既存のデータ表示と入れ替える想定です。
TanStack Tableはカラムを定義することで表示させるデータをいろいろと操作出来て、使い勝手が良く実装したコードも読みやすいと思います。新しいライブラリを使うときは使いづらさを感じることもあるのですが、このライブラリはとっつきやすくて使い勝手が良い印象です。
実装した差分をgitHubにあげているので参考にしてください。
ページネーション
公式ドキュメントが丁寧に記載されているので簡単にページネーションを設定することが出来ました。ページネーションを利用するために useVueTable で getPaginationRowModel を追加するだけです。
そして次のページのデータを表示するためなど、ページの操作をするAPIを使ったボタンを表示します。
画面を表示時にデータをすべて読み出して、以降はクライアントサイドで操作するため操作性は高いです。ドキュメントによれば数千レコードレベルでも操作性が落ちないそうです。サーバーサイドで適度な大きさにデータを抽出してページネーションを実施するのがよくある実装でした。アプリケーションの用途によってどちらの実装にしたほうが良いか検討の余地が広がると思いました。
実装した差分をgitHubにあげているので参考にしてください。
任意の行に対する操作メニューの表示
データの一覧から任意の行に対して操作したい場合、行ごとにメニューを表示するUIがあります。そのようなUIを追加することも比較的簡単にできました。
テーブルカラムの定義に行操作の箇所を追記して、メニュー用のコンポーネントを作成してそれを表示させます。
過去のプロジェクトでそのようなUIをライブラリを使わずJavascriptやCSSを使って実装されていました。最初に実装された方はとても優秀だと思います。そのソースを修正する立場だったのでどのような実装なのかJavascriptやCSSを把握したうえで作業をするのはとても大変でした。たとえばメニューが表示されているのにクリックしてもイベントが発生しなかったりなどです。
ライブラリを使った場合はそのライブラリが開発が止まったり内部でバグが出た場合に打つ手がなくなるなどの懸念はあります。経験則としては使えるものは使ったほうがトータルで時間やコストが少なくて済むように思います。
実装した差分をgitHubにあげているので参考にしてください。
ソート、フィルタリング、列表示・非表示、行選択の機能の実装
実装した差分をgitHubにソート、フィルタリング、列表示・非表示、行選択をそれぞれあげているので参考にしてください。それぞれの差分を確認すると分かってもらえるように、少しのコードで各種機能が実装出来ることが分かりました。
1,000件と10,000件での操作感
1,000件と10,000件での操作感を確認したところ、1,000件では一覧の表示や各種機能に差がなくスムーズに動作しました。10,000件では一覧の表示は1秒ほど待ちましたが、各種機能には目立った差を感じなかったです。
