Table Header Alignment

[ismet]

I want to make a specific column text (header + data) to align center.

I added class="has-text-centered" or style="text-align:center" to the <b-table-column>. This makes only data centered, not header.

How can I change the alignment of <b-table> header?

Note: The header scoped slot change all column headers, not one of them..

[jtommy]

@ismet Header slot allow to read all bColumn properties and it is applied to each header column.
In your case you might have something like to apply a custom style only for one column:

<template scope="props" slot="header">
   <div style="width: 100%" :class="{'has-text-centered': props.column.label === 'FN'}">
     {{ props.column.label }}
   </div>
</template>

[ismet]

@jtommy, :class property works however the header text is not aligned properly if has-text-centered or has-text-centered is applied.

has-text-right

has-text-centered

As you can see, there is an interesting and unnecessary space at the right of the header cell.