How to dynamically add a column to Bootstrap Vue Table

Question

I am using Bootstrap Vue and would like to add a column dynamically or only show the column if some condition is met in the data. I'm trying to understand scoped slots and whether this is the direction I should take with a formatter callback function. Ideally I would like to add a column "Version 2" only if it is available in the data. I'm not sure where to start.

Code

    <b-table striped responsive hover :items="episodes" :fields="fields" :filter="filter">
           <template v-slot:cell(version_1)="data">
        <a :href="`${data.value.replace(/[^a-z]-/i,'-').toLowerCase()}`">Definition</a>
      </template>

    </b-table>
</template>
<script>
data() {

    return {
      fields: [{
          key: 'category',
          sortable: true
        },
        {
          key: 'episode_name',
          sortable: true
        },
        {
          key: 'episode_acronym',
          sortable: true
        },
        {
          key: 'version_1',
          sortable: true
        }
      ],
      episodes: [],
      versions: [],
    }

  },   
mounted() {
    return Promise.all([
        // fetch the owner of the blog
        client.getEntries({
          content_type: 'entryEpisodeDefinitions',
          select: 'fields.title,fields.category,fields.slug,fields.episodeAcronym,fields.version,sys.id'
        })

      ])
        .then(response => {
        // console.info(response[0].items);
        return response[0].items
      })
      .then((response) => {

        this.episodes = response.reduce(function( result, item){
          if ( item.fields.version === 1 ) {
          return result.concat({
            category: item.fields.category,
            episode_name: item.fields.title,
            episode_acronym: item.fields.episodeAcronym,
            version_1: 'episodes/' + item.fields.slug + '/' + item.sys.id,
          })
          }
          return result
        }, [])

        this.versions = response.reduce(function( result, item){
          if ( item.fields.version === 2 ) {
          return result.concat({
            version_2: 'episodes/' + item.fields.slug + '/' + item.sys.id,
          })
          }
          return result
        }, [])

        console.info(response);
      })
      .catch(console.error)


  },
</script>

just to clarify. for example if not a single data have version_2. you want to hide column version_2 — Evan
– Evan, Commented Jan 15, 2020 at 23:38
use a computed prop to filter out the fields in your fields definition array passed to <b-table>. Fields that do not appear in the fields array will not be shown, — Troy Morehouse
– Troy Morehouse, Commented Jan 16, 2020 at 1:21

ulou · Accepted Answer · 2020-02-10 16:17:33Z

11

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: 'Dynamic Label'})

answered Feb 10, 2020 at 16:17

ulou

5,9326 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shawn Over a year ago

Yes, this is what I was looking for, I was able to implement something along these lines. Thanks.

Collectives™ on Stack Overflow

How to dynamically add a column to Bootstrap Vue Table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related