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'.

Answer 2

This is similar to Latovic's answer, but using .d-none

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

The reason you want to use .d-none is because it is already built into Bootstrap 4.

See: https://getbootstrap.com/docs/4.1/utilities/display/

Answer 3

All you need to do is not include it in the fields definition. The item row data will still be there, and accessible via scoped slots from other fields.

No need to use CSS classes to hide the column.

To access the value via another fields scoped slot (say the LastName slot):

<b-table :fields-"fields" :items="items" ... >
  <template slot="LastName" slot-scope="{ value, item }">
    <!-- value is the field value -->
    {{ value }}
    <!-- item is the entire row object -->
    <!--you can use it for actions on buttons, etc -->
    <b-button @click="doSomthing(item.Id)">{{ item.Id }}</b-button>
  </template>
</b-table>