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>
Related
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;
}
I want to create a data table that has a column that contains a sparkline for each item in the data table. Is that possible?
Here's a mock-up of what I'm aiming for:
You have the option to use the item.name slot. Create a separate column for chart, then use its slot to put the sparkline:
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" },
{ text: "Chart", value: "chart" },
],
<template v-slot:item.chart={item}>
<v-sparkline
:value="value"
:gradient="gradient"
:smooth="radius || false"
:padding="padding"
:line-width="width"
:stroke-linecap="lineCap"
:gradient-direction="gradientDirection"
:fill="fill"
:type="type"
:auto-line-width="autoLineWidth"
auto-draw
></v-sparkline>
</template>
Here is the full example: https://codesandbox.io/s/white-hill-spwzs?file=/src/components/HelloWorld.vue:1174-1618
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
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?