Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vuetify - Data Table Componentの検証
Search
kouki.miura
August 25, 2024
Programming
0
150
Vuetify - Data Table Componentの検証
VuetifyのDataTableの機能を検証(サンプル実装、公式ドキュメント確認)しました。
kouki.miura
August 25, 2024
Tweet
Share
More Decks by kouki.miura
See All by kouki.miura
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
koukimiura
0
28
リソース制限環境下でのローカルLLM構築術
koukimiura
0
86
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.4k
医療系ソフトウェアのAI駆動開発
koukimiura
1
220
レポートから見る生成AIを活用したシステム開発.
koukimiura
0
150
AWSサービスの整理と使いたい機能の概要
koukimiura
1
82
生成AIによる PHP = Node.js 変換の検証
koukimiura
0
140
Javaの学習・実行環境-JBangの概要
koukimiura
0
120
オンプレミス環境にKubernetesを構築する
koukimiura
0
300
Other Decks in Programming
See All in Programming
What's new in Adaptive Android development
fornewid
0
130
Flutterと Vibe Coding で個人開発!
hyshu
1
190
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
880
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.6k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
11k
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.4k
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
330
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
110
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
400
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
120
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.1k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
410
GraphQLとの向き合い方2022年版
quramy
49
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Code Reviewing Like a Champion
maltzj
524
40k
Navigating Team Friction
lara
188
15k
Building Adaptive Systems
keathley
43
2.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Speed Design
sergeychernyshev
32
1k
Transcript
Vuetify - Data Table Componentの検証 2024.08.25 ゆるWeb勉強会@札幌 三浦 恒樹 (MIURA
KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社
長男が飼っている ハリネズミがアイコン INTRODUCE ・ドゥウェル株式会社 (医療系IT開発・導入会社)に所属 ・マネージャー(プレイングマネージャー) ・仕事では Java,C#,Node.js + JavaScript,TypeScript
・趣味では PHP,Node.js + JavaScript ・3児の父 ・札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会 等に参加
INDEX ・データテーブルについて ・Vuetifyとは ・Data Table Componentの概要 ・Data Tableの各機能
データテーブルについて ・一般的な業務システム ログイン画面 一覧画面 詳細画面 ID PASSWORD LOGIN 9999 TARO
46 HOKKAIDO EDIT ID NAME AGE ADDR PREV NEXT システムを使う ユーザーを認証する データのすべてまたは 一部を一覧表示する データ1件を参照・編集 する IDaaSを使う (開発しない) データテーブルを使う (開発工数削減)
Vuetifyとは ・Vue.jsコンポーネントUIライブラリ ・格納コンポーネント ×13 ・ナビゲーション ×10 ・フォームの入力とコントロール ×15 ・レイアウト ×1 ・選択 ×5 ・データと表示 ×9
・フィードバック ×11 ・画像とアイコン ×5 ・ピッカー ×2 ・プロバイダ ×3 ・その他 ×2 https://vuetifyjs.com/ja/ ※v3.7時点 ← Data Table Component
Data Table Component の概要 ・データをユーザーが見やすい表形式で表示する ・ソート、検索、ページネーション、選択が含まれる ・Vuetify v3.4 で追加された ・3タイプの使い方
・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 の各機能 ‐ 基本 ‐ 選択1 ・show-selectプロパティで選択列を表示 ・item-valueプロパティで行を区別するプロパティ指定が必要 (デフォルトで検索されるプロパティは
"id") ・v-modelプロパティに選択行のプロパティ (キー)を配列でセットされる
Data Table の各機能 ‐ 基本 ‐ 選択2 ・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スロットで行のグルーピングが可能(今回説明省略) ご清聴ありがとうございました。