Data table
v-data-table コンポーネントは表形式のデータを表示するために使われます。ソート、検索、ページネーション、インライン編集、ヘッダーツールチップ、行の選択 などの機能を含んでいます。
Usage
The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the hide-actions prop.
API
Components.DataTables.
Components.DataTables.
ダークテーマを適用します。
Components.DataTables.
Components.DataTables.
Components.DataTables.
Components.DataTables.
ヘッダーとなるテキストを設定します。
ヘッダーのカラムとなる配列のオブジェクトを設定します。 全プロパティの定義については下記の例を参照してください。
{
text: string",
value: string",
align: 'left' | 'center' | 'right'",
sortable: boolean",
class: string[] | string",
width: string"
}Components.DataTables.
Components.DataTables.
ヘッダーを非表示にします。
Components.DataTables.
Components.DataTables.
ライトテーマを適用します。
Components.DataTables.
Components.DataTables.
Components.DataTables.
Components.DataTables.
Components.DataTables.
Components.DataTables.
{
descending: boolean",
page: number",
rowsPerPage: number // -1 for All",
sortBy: string",
totalItems: number"
}Components.DataTables.
Components.DataTables.
Components.DataTables.
Components.DataTables.
Components.DataTables.
Components.DataTables.
Components.DataTables.
Components.DataTables.
Examples
スロット: no-data
no-data スロットはデータが無い場合に表示する HTML を設定することができます。
スロット: items と headers
items と headers スロットは td/th タグを受け付けることができます。行の全体を制御したい場合は、 tr を受け付けることができます。
スロット: headerCell
ヘッダーのセルごとに共通のマークアップやエフェクトを適用したい場合は、headerCell スロットを使用することができます。この例では Tooltip をヘッダーごとに適用しています。
スロット: progress
progress スロットは、Data Table のローディング状態の表示をカスタマイズする際に使用します。デフォルトでは indeterminate が設定された v-progress-linear が使用されます。
スロット: footer
footer スロットは、例えばカラムのフィルタや検索など、テーブルに拡張機能を持たせたい場合に使用します。
スロット: expand
v-data-table コンポーネントは expand スロットを使用して行の折りたたみを可能にします。expand prop を使用して他の行をクリックした際に行を閉じる動作を止めることができます。
スロット: page-text
page-text スロットを利用すると、ページネーションに使用されるテキストを変更することができます。
選択可能な行
選択可能な行を使用することで、特定の行及びすべての行に対してアクションを実行することができます。
no-results スロットを使用した検索
Data table ではデータをフィルタリングするために search prop が用意されています
Custom icons
Previous/next pagination icons and sort icon can be customized with prev-icon, next-icon and sort-icon props.
外部ページネーション
pagination prop を使用することで外部からページネーションを制御できます。 使用するには .sync modifier を適用する必要があります。
外部ソート
pagination prop を使用することで外部からソートも制御できます。 使用するには .sync modifier を適用する必要があります。 prop でデフォルトでソートに使用するカラムを設定することもできます。
サーバーサイドでのページネーションとソート
バックエンドから情報を読み込んでおり、結果を表示する前にページネーションとソートを適用する必要がある場合には、 total-items prop を使用することができます。 この prop を使用すると、標準のページネーションとソートは無効化されるため、変化を検知するには代わりに pagination prop を使用する必要があります。 loading prop を使用するとデータを取得している間にプログレスバーを表示することができます。
ヘッダー無しテーブル
hide-headers prop を設定するとヘッダーなしのテーブルを作成することができます。
インライン編集
v-edit-dialog コンポーネントは Data table 内部でインライン編集する際に使用します。
CRUD アクション
各行を編集するために v-dialog コンポーネントを使用した、CRUD アクション付き Data table のサンプルです。