| `formatter` | String or Function | A formatter callback function, can be used instead of (or in conjunction with) slots for real table fields (i.e. fields, that have corresponding data at items array).

| `variant` | String | Apply contextual class to the `<th>` **and** `<td>` in the column - `active`, `success`, `info`, `warning`, `danger` (these variants map to classes `thead-${variant}`, `table-${variant}`, or `bg-${variant}` accordingly)

**Notes:**

- _Field properties, if not present, default to `null` unless otherwise stated above._

- _`thClass` and `tdClass` will not work with classes that are defined in scoped CSS_

- _For information on the syntax supported by `thStyle`, see

- _Any additional properties added to the field objects will be left intact - so you can access

| `item` | Object | The entire raw record data (i.e. `items[index]`) for this row (before any formatter is applied)

| `value` | Any | The value for this key in the record (`null` or `undefined` if a virtual column), or the output of thr field's `formatter` function (see below for for information on field `formatter` callback functions)

| `unformatted` | Any | The raw value for this key in the item record (`null` or `undefined` if a virtual column), before being passed to the field's `formtter` function

**Notes:**

- *`index` will not always be the actual row's index number, as it is

- When placing inputs, buttons, selects or links within a data cell scoped slot,

String or function reference. In case of a String value, function must be defined at

parent component's methods. Providing formatter as `Function`, it must be declared at

global scope (window or as global mixin at Vue).

Callback function accepts three arguments - `value`, `key`, and `item`, and should

return the formatted value as a string (basic HTML is supported)

<template slot="name" scope="data">

<a :href="`#${data.value.replace(/[^a-z]+/i,'-').toLowerCase()}`">

{{data.value}}

</a>

| `label` | String | The fields label value (also available as `data.field.label`)

<input type="checkbox" :value="foo.column" v-model="selected" @click.stop>

**Note:** *Do not bind any value directly to the `value` prop. Use the `v-model` binding.*

Filtering, when used, is applied to the original items array data, and hence it is not

As mentioned above in the [**Fields**](#fields-column-definitions-) section above,

you can make columns sortable. Clicking on a sortable column header will sort the

column in ascending direction, while clicking on it again will switch the direction

of sorting. Clicking on a non-sortable column will clear the sorting.

on the data in the underlying record object (not by the formatted value). The field

value is first stringified if it is an object, and then sorted.

on the custom rendering of the field data (formatter functions and/or scoped slots

are used only for presentation). For this reason, you can provide your own

custom sort compare routine by passing a function reference to the prop `sort-compare`.

argument is the field `key` being sorted on (`sortBy`). The routine should return

If the routine returns `null`, then the default sort-compare rouine will be used.

You can use this feature (returning `null`) to have your custom sort-compare routine

handle only certain fields (keys).

**Note:** _in order to allow `<b-table>` fully track it's `busy` state, custom items

<b-table id="my-table" :busy.sync="isBusy" :items="myProvider" :fields="fields" ...></b-table>

isBusy: false

**Notes:**

- _If you manually place the table in the `busy` state, the items provider will

- _All click related and hover events, and sort-changed events will __not__ be

**Note** _`<b-table>` needs reference to your pagination and filtering values in order to

<b-table ref="table" ... ></b-table>

<b-table @sort-changed="sortingChanged" ...></b-table>