I am using Vue and Vuetify to generate a table which I do.
I want to make the headers of the table bold. Hence, I am thinking of passing a class to the headers and customize the headers from the CSS. Despite the fact that when I inspect the page(F12-> inspector) on the header my custom class has been passed but it don't do what I want it to do I feel like the code is overridden somehow. Can you please help ?
HTML:
<v-data-table
:headers="headers"
:items="myDataPSUTwo"
:search="search"
></v-data-table>
the script:
data() {
return {
search: "",
headers: [
{
text: "Name",
align: "center",
filterable: true,
value: "name",
class:"header-of-chart"
},
{ text: "Value", value: "value" },
{ text: "Unit", value: "units" },
],
};
},
the CSS:
<style scoped>
.header-of-chart {
font-weight: bold;
}
</style
v-data-table have a header slot. You can use it to modify header style.
<template>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:sort-by="['calories', 'fat']"
:sort-desc="[false, true]"
multi-sort
hide-default-header
class="elevation-1"
>
<template v-slot:header="{ props }">
<th v-for="head in props.headers">{{ head.text.toUpperCase() }}
</template>
</v-data-table>
</v-app>
</div>
</template>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 200,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
}
],
}
},
})
v-data-table already have header text in bold that's the reason it is not impact anything. You want to increase the font size ? You can use it like this :
.header-of-chart {
font-size: 25px !important;
}
Related
i'm working with https://vuetifyjs.com/en/components/data-tables/ and i set prop
:options.sync="filter_values"
#update:options="updateFilterValues()"
the problem i have, is that i want to disable the sorting for some columns, so i set the headers as this, with prop sortable: false:
headers: [
{
value: "checkbox",
sortable: false,
width: '10%'
},
{
value: "userId",
sortable: true,
width: '30%'
},
{
value: "clientId",
sortable: true,
width: '30%'
},
{
value: "clientInformation",
sortable: false,
width: '30%',
},
],
I don't know exactly why this is not getting my prop sortable: false and all the columns are sortable, i'm trying to find documentation but there is nothing related to this.
Ideally it should work, Here is the working demo. Kindly have a look and please try to find out the root cause of the issue you are facing by referencing the below demo.
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({
headers: [ { text: 'Bool', sortable: false, value: 'status' }, { text: 'String', sortable: true, value: 'val' } ],
items: [ { status: "True", val: "Alpha" }, { status: "False", val: "Beta" }, { status: "True", val: "Gamma" } ],
})
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<v-app id="app">
<v-data-table
:headers="headers"
:items="items"
>
</v-data-table>
</v-app>
Check this codepen I made: https://codepen.io/cmfc31/pen/zYjKOjx?editors=1010
<v-data-table
dense
:headers="headers"
:items="desserts"
:options.sync="filter_values"
item-key="name"
class="elevation-1"
></v-data-table>
If you use the .sync modifier in your options prop, theres no need to listen for the #update:options event. Your variable filter_values will automatically be in sync with the component and update on changes.
How can I get access to a specific header column in Vuetify data-table to customize it? Let's say I would like to hide it by using a css class-name.
In Vuetify docs suggested to use header.<name> to get acess to. But I don't have a clear understanding how to this due to the lack of an example.
As mentioned in official docs :
You can use the dynamic slots header.<name> to customize only certain columns. <name> is the name of the value property in the corresponding header item sent to headers.
You could do :
<template>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:header.name="{ header }">
{{ header.text.toUpperCase() }}
</template>
</v-data-table>
</template>
<script>
export default {
data: () => ({
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
...
],
}),
}
</script>
For example <template v-slot:header.<name>="{ header }"> gives you an access to the correspondant item in headers config { text: 'Calories', value: 'calories' }, where you could use the text and the value in order to customize them like :
<template v-slot:header.name="{ header }">
<i>{{ header.text.toUpperCase() }}</i>
</template
If you want to customize rows check this answer
i have:
<v-data-table :headers="headers" :items="tableData" :items-per-page="5" class="elevation-1">
<template v-slot:item.id="{ item }">
{{item.id}}
</template>
How can I align the content of that column vertically center?
You can specify the alignment of each column setting align equal to center in your headers definition. E.g.:
headers: [
{
text: 'Dessert (100g serving)',
align: 'center',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
If that doesn't work in your configuration, try also removing the slot template.
Try to wrap that content by a div with class name d-flex justify-center as follows :
<template v-slot:item.id="{ item }">
<div class="d-flex justify-center">{{item.id}}</div>
</template>
Basically I need to pass an object in as the value for all columns in my v-data-table.
For example instead of:
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37
}
I need to set this as an example item in "items":
{
name: 'Ice cream sandwich',
calories: {value: 237, code: x},
fat: {value: 9.0, code: y},
carbs: {value: 37, code: z}
}
I know by using template I can still display just the value since I only want to display the value and not the code :
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
#page-count="pageCount = $event"
>
<template #item.calories="{item}">
{{item.calories.value}}
</template>
<template #item.fat="{item}">
{{item.fat.value}}
</template>
<template #item.carbs="{item}">
{{item.carbs.value}}
</template>
<template #item.iron="{item}">
{{item.iron.value}}
</template>
</v-data-table>
</v-app>
</div>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
page: 1,
pageCount: 0,
itemsPerPage: 10,
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories'},
{ text: 'Fat', value: 'fat'},
{ text: 'Carb', value: 'carbs'},
],
desserts: [
{
name: 'Frozen Yogurt',
calories: {value: 159, score: 'x' },
fat: {value: 80, score: 'y' },
carbs: {value: 22, score: 'z' },
}
]
}
},
})
</script>
My problem is that I will have many columns in my table and they are dynamic. (The "headers" and "items" are generated dynamically from server.) I would rather to not also generate a large number (30+) of these template conditions but I can't really see any other solution right now.
You can use headers prop's value field for that. Vuetify accepts property path here:
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories.value'}, <-- HERE
{ text: 'Fat', value: 'fat.value'},
{ text: 'Carb', value: 'carbs.value'},
],
I have an strange behaviour when I try to detect changes in selected rows for v-data-table (vuetify).
Here is a example code:
<template>
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
item-key="name"
show-select
>
</v-data-table>
</template>
<script>
export default {
data () {
return {
selected: [],
headers: [
{ text: 'Dessert (100g serving)', value: 'name' },
{ text: 'Calories', value: 'calories' },
],
desserts: [
{ name: 'Frozen Yogurt', calories: 159 },
{ name: 'Ice cream sandwich', calories: 237 },
{ name: 'Eclair', calories: 262 },
],
}
},
watch: {
selected: function(newSelected, oldSelected) {
console.log("watch", this.selected.length);
}
},
computed: {
selectedSize() {
console.log("computed", this.selected.length);
return this.selected.length;
}
},
}
</script>
When I select a row in the table then console shows:
watch 1
But no shows "computed 1". Why no prints the computed property?