Table

All tables in the application are using the BoostrapVue table component.

To use the component, include the <b-table> tag in the template. The component is registered globally so does not need to be imported in each SFC.

Basic table

There are a few required properties to maintain consistency across the application. The full list of options can be viewed on the Bootstrap-vue table component's documentation page.

Required properties

• items - renders table items
• fields - renders table header
• hover - enables table row hover state
• responsive or stacked - makes the table responsive (enables horizontal scrolling or stacked view) at the defined breakpoint
• show-empty (required if table data is generated dynamically) - shows an empty message if there are no items in the table
• empty-text (required if table data is generated dynamically) - the translated empty message

<template>
  <b-table
    hover
    show-empty
    responsive="md"
    :items="items"
    :fields="fields"
    :empty-text="$t('global.table.emptyMessage')"
  />
</template>

<script>
  export default {
    data() {
      items: [
        {
          name: 'Babe',
          age: '3 years',
          color: 'white, orange, grey'
        },
        {
          name: 'Grey Boy',
          age: '4 months',
          color: 'grey'
        },
      ],
      fields: [
        {
          key: 'name',
          label: this.$t('table.name') //translated label
        },
        {
          key: 'age',
          label: this.$t('table.age') //translated label
        },
        {
          key: 'color',
          label: this.$t('table.color') // translated label
        }
      ]
    }
  }
</script>

Sort

To enable table sort, include sortable: true in the fields array for sortable columns and add the following props to the <b-table> component:

• sort-by
• no-sort-reset
• sort-icon-left

<template>
  <b-table
    hover
    no-sort-reset
    sort-icon-left
    sort-by="rank"
    responsive="md"
    :items="items"
    :fields="fields"
  />
</template>
<script>
export default {
  data() {
    return {
      items: [...],
      fields: [
        {
          key: 'name',
          label: 'Name', //should be translated
          sortable: true
        },
        {
          key: 'rank',
          label: 'Rank', //should be translated
          sortable: true
        },
        {
          key: 'description',
          label: 'Description', //should be translated
          sortable: false
        }
      ]
    }
  }
}
</script>