VuetifyのData Tableのスタイルを触る
Vuetify This article is about how to change the style of Vuetify's Data Table. The author tried various styles and provides the code and style.
by JanitorOct 06, 2023
VuetifyのData Table API「v-data-table」のスタイルを色々と触ってみました。ヘッダー背景色と文字色変更、フッター背景色と文字色の変更、奇数行・偶数行によって背景色の変更、テーブルに表示するデータによってクラスのバインディングを試しました。
VuetifyのData Table API「v-data-table」のスタイルを色々と触ってみました。ヘッダー背景色と文字色変更、フッター背景色と文字色の変更、奇数行・偶数行によって背景色の変更、テーブルに表示するデータによってクラスのバインディングを試しました。
Jump Links
1. スクリプトとスタイルを書く
1. スクリプトとスタイルを書く
1. スクリプトとスタイルを書く
この記事で使っているテーブルは下記URLの記事で作成したテーブルに、スタイルを加えたものです。
https://comytom.com/anarticle/ae02685e-46f7-4bab-bf1b-69270b0f0e8a
この記事で使っているテーブルは下記URLの記事で作成したテーブルに、スタイルを加えたものです。
https://comytom.com/anarticle/ae02685e-46f7-4bab-bf1b-69270b0f0e8a
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
class="elevation-1 dataTableStyle">
<template v-slot:item.key2="item">
<div :class="[ objArr.value[ item.index ].cbValues.some( ( element ) => element == true ) ? 'BGRed' : '' ]">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]">
</v-checkbox-btn>
</span>
</div>
</template>
</VDataTable>
</template>
<style>
.dataTableStyle th {
background-color: #FFFFFF00 !important;
font-weight: bold !important;
color: #8CF786 !important;
}
.dataTableStyle td {
background-color: #FFFFFF00 !important;
padding-right: 0px !important;
}
.dataTableStyle thead {
background-color: #216E4B !important;
}
.dataTableStyle tbody tr:nth-child(odd) {
background-color: #FFFFFF;
}
.dataTableStyle tbody tr:nth-child(even) {
background-color: #f9ffd1;
}
.dataTableStyle .v-data-table-footer {
background-color: #FFFFFF;
color: #B53430;
font-weight: bold;
}
.BGRed{
background-color: #ffc5ba;
}
</style>
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
class="elevation-1 dataTableStyle">
<template v-slot:item.key2="item">
<div :class="[ objArr.value[ item.index ].cbValues.some( ( element ) => element == true ) ? 'BGRed' : '' ]">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]">
</v-checkbox-btn>
</span>
</div>
</template>
</VDataTable>
</template>
<style>
.dataTableStyle th {
background-color: #FFFFFF00 !important;
font-weight: bold !important;
color: #8CF786 !important;
}
.dataTableStyle td {
background-color: #FFFFFF00 !important;
padding-right: 0px !important;
}
.dataTableStyle thead {
background-color: #216E4B !important;
}
.dataTableStyle tbody tr:nth-child(odd) {
background-color: #FFFFFF;
}
.dataTableStyle tbody tr:nth-child(even) {
background-color: #f9ffd1;
}
.dataTableStyle .v-data-table-footer {
background-color: #FFFFFF;
color: #B53430;
font-weight: bold;
}
.BGRed{
background-color: #ffc5ba;
}
</style>
tr:nth-child(odd)はテーブルレコードの奇数を、tr:nth-child(even)はテーブルレコードの偶数を指定しています。
setup内で用意したテーブルに表示するデータ「objArr 」のプロパティ「cbValues」という配列のどれか一つでもtrueであれば、その行の「title2」列にスタイル「BGRed」が適用されます。
チェックボックスをすべてオフにすると下の画像のような表示になります。
tr:nth-child(odd)はテーブルレコードの奇数を、tr:nth-child(even)はテーブルレコードの偶数を指定しています。
setup内で用意したテーブルに表示するデータ「objArr 」のプロパティ「cbValues」という配列のどれか一つでもtrueであれば、その行の「title2」列にスタイル「BGRed」が適用されます。
チェックボックスをすべてオフにすると下の画像のような表示になります。
チェックボックスにチェックをいれると、チェックが入っている行のtitle2列の背景色にBGRedが適用されて、下の画像のような表示になります。
チェックボックスにチェックをいれると、チェックが入っている行のtitle2列の背景色にBGRedが適用されて、下の画像のような表示になります。
VuetifyのData Tableのスタイルを触る
Vuetify This article is about how to change the style of Vuetify's Data Table. The author tried various styles and provides the code and style.
by JanitorOct 06, 2023
VuetifyのData Table API「v-data-table」のスタイルを色々と触ってみました。ヘッダー背景色と文字色変更、フッター背景色と文字色の変更、奇数行・偶数行によって背景色の変更、テーブルに表示するデータによってクラスのバインディングを試しました。
VuetifyのData Table API「v-data-table」のスタイルを色々と触ってみました。ヘッダー背景色と文字色変更、フッター背景色と文字色の変更、奇数行・偶数行によって背景色の変更、テーブルに表示するデータによってクラスのバインディングを試しました。
Jump Links
1. スクリプトとスタイルを書く
1. スクリプトとスタイルを書く
1. スクリプトとスタイルを書く
この記事で使っているテーブルは下記URLの記事で作成したテーブルに、スタイルを加えたものです。
https://comytom.com/anarticle/ae02685e-46f7-4bab-bf1b-69270b0f0e8a
この記事で使っているテーブルは下記URLの記事で作成したテーブルに、スタイルを加えたものです。
https://comytom.com/anarticle/ae02685e-46f7-4bab-bf1b-69270b0f0e8a
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
class="elevation-1 dataTableStyle">
<template v-slot:item.key2="item">
<div :class="[ objArr.value[ item.index ].cbValues.some( ( element ) => element == true ) ? 'BGRed' : '' ]">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]">
</v-checkbox-btn>
</span>
</div>
</template>
</VDataTable>
</template>
<style>
.dataTableStyle th {
background-color: #FFFFFF00 !important;
font-weight: bold !important;
color: #8CF786 !important;
}
.dataTableStyle td {
background-color: #FFFFFF00 !important;
padding-right: 0px !important;
}
.dataTableStyle thead {
background-color: #216E4B !important;
}
.dataTableStyle tbody tr:nth-child(odd) {
background-color: #FFFFFF;
}
.dataTableStyle tbody tr:nth-child(even) {
background-color: #f9ffd1;
}
.dataTableStyle .v-data-table-footer {
background-color: #FFFFFF;
color: #B53430;
font-weight: bold;
}
.BGRed{
background-color: #ffc5ba;
}
</style>
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
class="elevation-1 dataTableStyle">
<template v-slot:item.key2="item">
<div :class="[ objArr.value[ item.index ].cbValues.some( ( element ) => element == true ) ? 'BGRed' : '' ]">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]">
</v-checkbox-btn>
</span>
</div>
</template>
</VDataTable>
</template>
<style>
.dataTableStyle th {
background-color: #FFFFFF00 !important;
font-weight: bold !important;
color: #8CF786 !important;
}
.dataTableStyle td {
background-color: #FFFFFF00 !important;
padding-right: 0px !important;
}
.dataTableStyle thead {
background-color: #216E4B !important;
}
.dataTableStyle tbody tr:nth-child(odd) {
background-color: #FFFFFF;
}
.dataTableStyle tbody tr:nth-child(even) {
background-color: #f9ffd1;
}
.dataTableStyle .v-data-table-footer {
background-color: #FFFFFF;
color: #B53430;
font-weight: bold;
}
.BGRed{
background-color: #ffc5ba;
}
</style>
tr:nth-child(odd)はテーブルレコードの奇数を、tr:nth-child(even)はテーブルレコードの偶数を指定しています。
setup内で用意したテーブルに表示するデータ「objArr 」のプロパティ「cbValues」という配列のどれか一つでもtrueであれば、その行の「title2」列にスタイル「BGRed」が適用されます。
チェックボックスをすべてオフにすると下の画像のような表示になります。
tr:nth-child(odd)はテーブルレコードの奇数を、tr:nth-child(even)はテーブルレコードの偶数を指定しています。
setup内で用意したテーブルに表示するデータ「objArr 」のプロパティ「cbValues」という配列のどれか一つでもtrueであれば、その行の「title2」列にスタイル「BGRed」が適用されます。
チェックボックスをすべてオフにすると下の画像のような表示になります。
チェックボックスにチェックをいれると、チェックが入っている行のtitle2列の背景色にBGRedが適用されて、下の画像のような表示になります。
チェックボックスにチェックをいれると、チェックが入っている行のtitle2列の背景色にBGRedが適用されて、下の画像のような表示になります。