How to pin the top header row showing column names in this bootstrap-vue table?

I have a bootstrap-vue table that looks like this;

Here is the code;

<template>
  <div>
    <b-table hover :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          {
            age: 89,
            first_name: 'Geneva',
            last_name: 'Wilson',
            _rowVariant: 'danger'
          },
          {
            age: 40,
            first_name: 'Thor',
            last_name: 'MacDonald',
            _cellVariants: { age: 'info', first_name: 'warning' }
          },
          { age: 29, first_name: 'Dick', last_name: 'Dunlap' }
        ]
      }
    }
  }
</script>

Suppose the table has many rows. I would like to pin the top header row such that when I scroll down the table, the header row showing the column names remains at the top. This makes the table more readable.

The table code was provided in bootstrap-vue documentation.

https://bootstrap-vue.org/docs/components/table

I am using Vue v2.6 and BootstrapVue.