Slots

Search…
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:
1
{
2
  filterable:["name","age"] // omit the `id` column
3
}
Copied!
1
<div slot="filter__id">
2
    <input type="checkbox" class="form-control" v-model="allMarked" @change="markAll()">
3
</div>
Copied!
​
Events
Options API
Last modified 2yr ago
Copy link
Contents
​
