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()">

Last modified 1yr ago
Copy link