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

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/

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

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>