Vuetify v-data-table align center only one column
15,909
Solution 1
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.
Solution 2
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>
Author by
farahm
Updated on June 21, 2022Comments
-
farahm almost 2 years
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?