My usage of BTable

StateLogBlock.vue

<script>
import axios from '@/libs/axios'
import { BTable } from 'bootstrap-vue-next/components'

// region FontAwesome
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'

library.add(faTriangleExclamation)
// endregion FontAwesome

export default {
  name: 'StateLogBlock',
  components: { BTable, FontAwesomeIcon },
  props: {
    debug: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'Logs'
    },
    apiUrl: {
      type: String,
      default: '/communication/api/state-logs/'
    },
    statesApiUrl: {
      type: String,
      default: '/communication/api/commrequest-states/'
    },
    displayUsers: {
      type: Boolean,
      default: false
    },
    objectId: {
      type: Number,
      required: true
    },
    contentTypeId: {
      type: Number,
      default: 8
    }
  },
  data() {
    return {
      stateLogData: null,
      stateTranslations: null,
      loading: false
    }
  },
  computed: {
    fields() {
      const _fields = [
        {
          key: 'timestamp',
          sortable: true,
          label: this.$gettext('Date'),
          formatter: (value) => {
            const created_at = new Date(value)
            return created_at ? created_at.toLocaleString('fr-FR', {
              hour12: false,
              formatMatcher: 'basic'
            }) : ''
          }
        },
        {
          key: 'source_state',
          label: this.$gettext('State from'),
          sortable: false,
          formatter: (value) => {
            if (!value) {
              return '–'
            }
            if (value in this.stateTranslations) {
              return this.stateTranslations[value].label
            } else {
              return value
            }
          }
        },
        {
          key: 'state',
          label: this.$gettext('State to'),
          sortable: false,
          formatter: (value) => {
            return this.stateTranslations[value].label
          }
        }
      ]
      if (this.displayUsers) {
        _fields.push(
          {
            key: 'by',
            label: this.$gettext('By'),
            sortable: true,
            formatter: (value) => {
              if (!value) {
                return '–'
              }
              if (value.last_name && value.first_name) {
                return `${value.last_name} ${value.first_name}`
              } else {
                return value.username
              }
            }
          }
        )
      }
      return _fields
    }
  },
  mounted() {
    this.debug && console.debug('StateLogBlock.vue component mounted !')
    this.$nextTick(() => {
      this.fetchStateTranslations()
      this.fetchStateData()
    })
  },
  methods: {
    fetchStateTranslations() {
      this.loading = true
      this.debug && console.debug(`StateLogBlock.vue::fetchStateTranslations()`)
      axios.get(this.statesApiUrl).then(
        resp => {
          if (resp.status >= 200 && resp.status < 300) {
            this.stateTranslations = resp.data
            this.debug && console.debug(`StateLogBlock.vue::fetchStateTranslations()::then() this.stateTranslations: ${JSON.stringify(this.stateTranslations)}`)
          } else {
            console.error(`StateLogBlock.vue::fetchStateTranslations()::then() Unable to get state logs: ${resp.statusText}`)
          }
          this.loading = false
        }
      ).catch(resp => {
        console.error(`StateLogBlock.vue::fetchStateTranslations()::catch() Unable to get state logs: ${resp.response.status}:${resp.response.statusText}`)
        this.loading = false
      })
    },
    fetchStateData() {
      this.debug && console.debug(`StateLogBlock.vue::fetchStateData() this.contentType = "${this.contentTypeId}" / this.this.commrequestId = "${this.objectId}"`)
      this.loading = true
      const params = new URLSearchParams({
        content_type_id: this.contentTypeId,
        object_id: this.objectId
      })
      axios.get(this.apiUrl, { params }).then(resp => {
        if (resp.status >= 200 && resp.status < 300) {
          this.stateLogData = resp.data.results
          this.debug && console.debug(`StateLogBlock.vue::fetchStateData()::then() this.stateLogData: ${JSON.stringify(this.stateLogData)}`)
        } else {
          console.warn(`StateLogBlock.vue::fetchStateData()::then() Unable to get state logs: ${resp.statusText}`)
        }
        this.loading = false
      }).catch(resp => {
        console.error(`StateLogBlock.vue::fetchStateData()::catch() Unable to get state logs: ${resp.response.status}:${resp.response.statusText}`)
        this.loading = false
      })
    }
  }
}
</script>

<template>
  <div class="state-log-block">
    <div v-if="stateLogData"
         class="card">
      <div class="card-header">
        <h3 class="card-title">
          {{ title }}
        </h3>
      </div>
      <div class="card-body">
        <b-table :items="stateLogData"
                 :fields="fields"
                 :caption="title"
                 :per-page="50"
                 :busy="loading"
                 hover
                 outlined
                 responsive
                 small
                 striped></b-table>
      </div>
    </div>
    <div v-else
         class="alert alert-warning d-flex">
      <div class="flex-shrink-1 p-2">
        <font-awesome-icon icon="triangle-exclamation"
                           prefix="fas"
                           fixed-width
                           :title="$gettext('Warning')"></font-awesome-icon>
      </div>
      <div class="flex-grow-1 p-2">
        {{ $gettext("No state logs yet.") }}
      </div>
    </div>
  </div>
</template>