<b-table class="table"
show-empty
small
stacked="md"
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:filterIncludedFields="filterOn"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
@filtered="onFiltered"
>
<template v-slot:cell(name)="row">
{{ row.value.first }} {{ row.value.last }}
</template>
<template v-slot:row-details="row">
<b-card>
<ul>
<li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
</ul>
</b-card>
</template>
</b-table>
Displaying the array data :
data() {
return {
items: [
{ Store: 'alex', snapshot: 'missing'},
{ Store: 'jjj', snapshot: 'hadara', store: 'store 1', class: 'A', missing: 'missing'},
{ Store: 'tyui', retail: 'hadara', store: 'store 1', class: 'A', missing: 'missing'},
{ Store: 'ttt', retail: 'hadara', store: 'store 1', class: 'A', missing: 'missing'},
{ Store: 'mmm', retail: 'hadara', store: 'store 1', class: 'A', missing: 'missing'},
{ Store: 'zzz', retail: 'hadara', store: 'store 1', class: 'A', missing: 'missing'},
{ Store: 'aaaaa', retail: 'hadara', store: 'store 1', class: 'A', missing: 'missing'},
],
The table displays store and snapshot as headers to the data above. If you want to change this header with static data or customize it using an API, what steps should be taken?