3

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?

Boussadjra Brahim
  • 42,672
  • 10
  • 53
  • 86
farahm
  • 1,042
  • 3
  • 17
  • 55

2 Answers2

9

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.

niccord
  • 680
  • 3
  • 12
4

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>
Boussadjra Brahim
  • 42,672
  • 10
  • 53
  • 86