I am currently facing an issue with the alignment of header values and data values in Vuetify data tables. I have tried setting "align: 'left'" but it is still not aligned properly.
Below 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>
...
</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>
Current output:
https://i.sstatic.net/A8BxF.png
Can someone assist me with this issue? Also, how can I apply a background color (#E6E6E6) to the header?