Vuetify - Data Table Componentの検証 2024.08.25 ゆるWeb勉強会@札幌 三浦 恒樹 (MIURA KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社

長男が飼っている ハリネズミがアイコン INTRODUCE ・ドゥウェル株式会社 （医療系IT開発・導入会社）に所属 ・マネージャー（プレイングマネージャー） ・仕事では Java，C#，Node.js + JavaScript，TypeScript ・趣味では PHP，Node.js + JavaScript ・３児の父 ・札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会 等に参加

INDEX ・データテーブルについて ・Vuetifyとは ・Data Table Componentの概要 ・Data Tableの各機能

データテーブルについて ・一般的な業務システム ログイン画面 一覧画面 詳細画面 ID PASSWORD LOGIN ９９９９ TARO ４６ HOKKAIDO EDIT ID NAME AGE ADDR PREV NEXT システムを使う ユーザーを認証する データのすべてまたは 一部を一覧表示する データ１件を参照・編集 する IDaaSを使う （開発しない） データテーブルを使う （開発工数削減）

Vuetifyとは ・Vue.jsコンポーネントUIライブラリ ・格納コンポーネント　×１３ ・ナビゲーション　×１０ ・フォームの入力とコントロール　 ×１５ ・レイアウト　×１ ・選択　×５ ・データと表示　 ×９ ・フィードバック　×１１ ・画像とアイコン　×５ ・ピッカー　×２ ・プロバイダ　×３ ・その他　×２ https://vuetifyjs.com/ja/ ※v3.7時点 ←　Data Table Component

Data Table Component の概要 ・データをユーザーが見やすい表形式で表示する ・ソート、検索、ページネーション、選択が含まれる ・Vuetify v3.4 で追加された ・３タイプの使い方 ・Data tables（基本機能） ・サーバーサイドテーブル…　APIからのデータを表示する ・仮想テーブル…　表示領域のみデータを描画する https://vuetifyjs.com/ja/components/data -tables/introduction/ v3.3 2023.05.19 v3.4 2023.11.09 v3.5 2024.01.20 v3.6 2024.05.01 v3.7 2024.08.12

Data Table の各機能 ‐ 基本 ・:itemsプロパティでデータモデルをセットする ・:headersプロパティが無い場合は最初の 　　アイテムのすべてのキーがヘッダーとなる

Data Table の各機能 ‐ 基本 ‐ ヘッダー ・:headersプロパティでヘッダーや列に表示する項目を 　　設定する ・childrenで複数行のヘッダーラベルを表示 ・alignで左寄せ、中央寄せ、右寄せ

Data Table の各機能 ‐ 基本 ‐ 選択１ ・show-selectプロパティで選択列を表示 ・item-valueプロパティで行を区別するプロパティ指定が必要 　　（デフォルトで検索されるプロパティは "id"） ・v-modelプロパティに選択行のプロパティ (キー)を配列でセットされる

Data Table の各機能 ‐ 基本 ‐ 選択２ ・select-strategyプロパティで選択方法を指定する 　　デフォルトは'page' https://vuetifyjs.com/ja/components/data-tables/data-and-display/#select-strategies

Data Table の各機能 ‐ 基本‐ソート(Multi sort) ・multi-sortプロパティで複数列の 　　ソートも実現できる

Data Table の各機能 ‐ サーバーサイドテーブル 初回表示、ソート、検索、 ページネーションにより、API からデータを取得中 APIからデータ取得完了

Data Table の各機能 ‐ 仮想テーブル ・フッター（ページネーション）は無い ・初回表示、ソート、検索、スクロール時に、 　表示領域のみ描画する

SUMMARY ・データテーブルコンポーネントの利用で、一覧画面の開発工数を削減できる ・VuetifyのDataTableを使えば、Vuetifyで統一されたデザインで一覧画面を実装できる ・Vueコンポーネントにデータモデルをセットするだけで利用できる ・ソート、検索（今回説明省略）、ページネーション、選択を実現する ・Headerスロット、Itemスロットで表示機能を拡張可能（今回説明省略） ・Group Headerスロットで行のグルーピングが可能（今回説明省略） ご清聴ありがとうございました。