How to have superscript in column header of this BootstrapVue table?-CodePudding

I have a bootstrapvue table that looks like this;

Here's the code;

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger'
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

I want to change the 3rd column header Person age to have a superscript such that it becomes Person age¹

Unfortunately, this is not as easy as using HTML inside the label for the 3rd column header.

I am using vue v2.6 and BootstrapVue.

CodePudding user response：

The easiest and most obvious solution for your narrow case: Use Unicode character U 00B9, SUPERSCRIPT ONE: ¹. In many cases this looks comparable to the HTML equivalent ¹, and will often appear more accurate when copied via the clipboard. Unicode offers all digits and several useful mathematical symbols, at least as many as you'll need for footnotes and endnotes.

Aside from that, Bootstrap Vue allows you to override particular cells with HTML via table-specific scoped slots, which are an application of Vue's general concept of scoped slots (also available in Vue 3).

<b-table :items="items" :fields="fields">
  <template #head(age)>
    Person age<sup>1</sup>
  </template>
</b-table>

To avoid the duplication of "Person age" in both the field definition and custom slot, or to make better use of the general head() and foot() fallbacks to apply to all header and footer cells, you can specify an identifier that will take the field definition itself. Here I've used field, but you can name it whatever you'd like.

<b-table :items="items" :fields="fields">
  <template #head(age)="field">
    {{ field.label }}<sup>1</sup>
  </template>
</b-table>

The fields documentation notes that "Any additional properties added to the field definition objects will be left intact", so I imagine that if this case is common for you, you could even add a custom fields object property (say, note or superscript) that you then render as {{ field.label }}<sup v-if="field.note">{{ field.note }}</sup>.

CodePudding user response：

You can customize the markup (html) of a table header using the provided #head({key}) slot:

<b-table>
  <template #head(age)="{ label }">
    {{ label }} <sup>1</sup>
  </template>
</b-table>

Obviously, you can place anything in there, including a filter search on that column, etc... It's all dynamic, connected to your component.

A few examples here: Header and Footer custom rendering via scoped slots.