Make bootstrap-vue b-table 'Id' column invisible

Question

I have a bootstrap-vue table (b-table) in the data for which which I want to make an 'Id' value accessible to an event later but which I want to hide from the table render.

I thought I saw a way to do this by binding the 'Id' to a row.key or row.index or some such b-table properties but I cannot find that anywhere.

So I include the column value in the fields definition but there is no way I can find to make the column hidden.

The table looks like this:

                <b-table show-empty responsive striped hover small outlined :stacked="stack"
                     :items="DisplayViewData"
                     :fields="fields"
                     :sort-by.sync="sortBy"
                     :sort-desc.sync="sortDesc">
                <template slot="select" slot-scope="data">
                    <b-form-checkbox v-model="data.item.IsSelected"/>
                </template>
            </b-table>

and the fields are defined as follows:

       fields: Array<any> = [
        {key: 'Id',},
        {key: 'LastName', sortable: true},
        {key: 'FirstName', sortable: true},
        etc.....
    ];

but this means the Id column is rendered.

Is there a way to do what I want by making the 'Id' column not visible or by assigning the data.Id value to some other b-table row-data context?

Answer 1

My quick solution for this would be like this:

fields: Array<any> = [
        {key: 'Id', thClass: 'd-none', tdClass: 'd-none' },
        {key: 'LastName', sortable: true},
        {key: 'FirstName', sortable: true},
        etc.....
    ];

So for Id use thClass: 'd-none', tdClass: 'd-none'.