Slots

Slots allow you to insert you own custom HTML in predefined positions within the component:

• beforeTable: Before the table wrapper. After the controls row

• afterTable: After the table wrapper.

• beforeFilter: Before the global filter (filterByColumn: false)

• afterFilter: After the global filter

• afterFilterWrapper: After the global filter wrapper

• beforeLimit: Before the per page control

• afterLimit: After the per page control

• beforeFilters: Before the filters row (filterByColumn: true)

• afterFilters: After the filters row

• prependHead: After the <thead> tag

• beforeBody: Before the <tbody> tag

• afterBody: After the <tbody> tag

• prependBody: Prepend to the <tbody> tag

• appendBody: Append to the <tbody> tag

In addition to these slots you can insert your own filter HTML in the filters row, or add content to the existing filter, e.g a button (When filterByColumn is set to true):

A. If you just want your own content make sure that the column is not filterable by omitting it from the filterable array. Otherwise the slot content will be appended to the native filter.

B. Create a slot whose name is formatted filter__{column} (double underscore).

For example, to insert a checkbox on the id column instead of the normal input filter:

{
  filterable:["name","age"] // omit the `id` column
}

<div slot="filter__id">
    <input type="checkbox" class="form-control" v-model="allMarked" @change="markAll()">
</div>