0
561
VistasHow to have superscript in column header of this BootstrapVue table?
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 age1
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.
3 Respuestas
Responde la pregunta0
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 1, 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). As in the Vue documentation, I"m using the shorthand #head(age) instead of the equivalent full attribute v-slot as in v-slot:head(age).
<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 slot context, which is defined to contain both field and label. Here I've used context, but you can name it whatever you'd like; you can also use destructuring, as in tao's answer.
<b-table :items="items" :fields="fields">
<template #head(age)="context">
{{ context.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 field object property (say, note or superscript) that you then render as {{ context.label }}<sup v-if="context.field.note">{{ context.field.note }}</sup>.
0
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.
0
I would like to answer my own question, thanks to the answer from @tao and the link he provided. It is a slight modification to his answer.
https://bootstrap-vue.org/docs/components/table#header-and-footer-custom-rendering-via-scoped-slots
<b-table>
<template #head(age)="data">
{{ data.label }} <sup>1</sup>
</template>
</b-table>