I am interested in using the v-simple-table UI component from Vuetify.js to create a table similar to the one shown below.
https://i.sstatic.net/QNdpJ.png
After creating the code in codesandbox and previewing the output, I noticed that the title is not aligned properly. HTML↓
<div id="app">
<v-app id="inspire">
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">
Name
</th>
<th class="text-left">
Calories
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.name"
>
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-app>
</div>
Vue.js↓
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
desserts: [
{
id:1,
name: 'Frozen Yogurt',
calories: 159,
},
{
id:2,
name: 'Ice cream sandwich',
calories: 237,
},
{
id:3,
name: 'Eclair',
calories: 262,
},
{
id:4,
name: 'Cupcake',
calories: 305,
},
{
id:5,
name: 'Gingerbread',
calories: 356,
},
],
}
},
})
Output Image↓ https://i.sstatic.net/Gr9qN.png
I would appreciate any advice on how to resolve this issue.