Bootstrap-Vue: How can I get dynamic table headers?

Question

Currently working with Bootstrap-vue. I need to generate b-table but with dynamic header values which I get from api, not sure how to go about doing this.

I have tried regular way to set fields in data which works fine but if I try to set computed fields I get no values in my table . `

computed: {
    fields () {
      return ['date', ...this.scheduler.times]
    }
  }

`

The this.scheduler.times is data received from api which contains array like below. Also this array can have more times added
(data from api) `

[
    {
        "id": 1,
        "start": "01:30:00",
        "end": "09:30:00"
    },
    {
        "id": 2,
        "start": "10:00:00",
        "end": "13:00:00"
    }
]

`

Expected result would be where I have columns headers with times from api and added column of dates.

I can generate series of dates using moment but not sure how will i map this to the b-table

Below is a screenshot of result I would like to get:

Any help would be greatly appreciated. Thanks

ulou ulou · Accepted Answer · 2020-02-10T16:19:42

I think this is something, you are looking for:

<b-table :items="items" :fields="fields">
    <template v-for="field in dynamicFields" v-slot:[`cell(${field.key})`]="{ item }">
</b-table>

in scripts:

this.dynamicFields.push({key: 'someTestKey', label: '1:30AM - 2:30AM'})

Bootstrap-Vue: How can I get dynamic table headers?

1 Answers