headers and data are not not aligned in vuetify data table

Question

I am working on vuetify data tables.Header value and data value are not aligned properly.I have set "align: 'left'" but still it is not aligned properly.

here is my vue component

    <template>
  <v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="8"
    :hide-default-footer="true"
    hide-actions
    item-key="name"
    class="elevation-1"
    >
   <template slot="items" slot-scope="props">
      <td v-for="(header, index) in headers" :key="index">
          <span v-if="(header.template !== 'undefined' && header.template === 'aId')">
            <span>
                {{ props.item[header.value] }}
            </span>
          </span>
          <span v-else-if="(header.template !== 'undefined' && header.template === 'aName')">
            <span>
                {{ props.item[header.value] }}
            </span>
          </span>
          <span v-else-if="(header.template !== 'undefined' && header.template === 'aType')">
            <span>
                {{ props.item[header.value] }}
            </span>
          </span>
          <span v-else-if="(header.template !== 'undefined' && header.template === 'aStatus')">
            <span>
                {{ props.item[header.value] }}
            </span>
          </span>
          <span v-else-if="(header.template !== 'undefined' && header.template === 'aLocation')">
            <span>
                {{ props.item[header.value] }}
            </span>
          </span>
          <span v-else-if="(header.template !== 'undefined' && header.template === 'aZone')">
            <span>
                {{ props.item[header.value] }}
            </span>
          </span>
          <span v-else>
                {{ props.item[header.value] }}
          </span>
      </td>
   </template>
</v-data-table>
</template>
<script>
 export default {
    name: 'TestDataTable',
    props: {
        headers: {
            required: true,
            type: Array,
            default: () => {
                return [];
            }
        },
        items: {
            required: true,
            type: Array,
            default: () => {
                return [];
            }
        }
    }
 }
</script>

It is looking like this.

Can anyone help me with that? One more thing how can add this background color(#E6E6E6) to the header?

Answer 1

I suggest to not use span or p tag when you are add condition in displaying data,

try to change the span to template tag

Example:

<v-data-table
:headers="headers"
:items="items"
:items-per-page="8"
:hide-default-footer="true"
hide-actions
item-key="name"
class="elevation-1"
>
<template slot="items" slot-scope="props">
  <td v-for="(header, index) in headers" :key="index">
      <template v-if="(header.template !== 'undefined' && header.template === 'aId')">
            {{ props.item[header.value] }}
      </template>
      <template v-else-if="(header.template !== 'undefined' && header.template === 'aName')">
            {{ props.item[header.value] }}
      </template >
      <template v-else-if="(header.template !== 'undefined' && header.template === 'aType')">
            {{ props.item[header.value] }}
      </template>
      <template v-else-if="(header.template !== 'undefined' && header.template === 'aStatus')">
            {{ props.item[header.value] }}
      <template v-else-if="(header.template !== 'undefined' && header.template === 'aLocation')">
            {{ props.item[header.value] }}
      </template>
      <template v-else-if="(header.template !== 'undefined' && header.template === 'aZone')">
            {{ props.item[header.value] }}
      </template>
      <template v-else>
            {{ props.item[header.value] }}
      </template>
  </td>
 </template>
 </v-data-table>