To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
We look at how to customize table contents, including filtering.
Filtering
BootstrapVue table contents can be filtered.
To add built-in filtering features, we can add the filter prop.
For example, we can write:
<template>
<div id="app">
<b-table :items="items" filter="may"></b-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
items: [
{ id: 1, firstName: "alex", lastName: "green" },
{
id: 2,
firstName: "may",
lastName: "smith"
},
{ id: 3, firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We just pass in a string into the filter prop and it’ll find the rows with the word 'may' in it by searching all properties.
Also, we can pass in a regex to filter by a pattern.
Pagination
We can use the b-pagination component with b-table to control pagination.
For example, we can write:
<template>
<div id="app">
<b-table :items="items" :per-page="perPage" :current-page="currentPage"></b-table>
<b-pagination v-model="currentPage" :total-rows="items.length" :per-page="perPage"></b-pagination>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
currentPage: 1,
perPage: 2,
items: [
{ id: 1, firstName: "alex", lastName: "green" },
{
id: 2,
firstName: "may",
lastName: "smith"
},
{ id: 3, firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We set the per-page and current-page props to perPage and currentPage respectively.
perPage is fixed to 2.
currentPage is updated when we click on the button rendered by b-pagination .
b-pagination also has the total-rows prop so that it can render the right number of buttons.
v-model is bound to currentPage so that it’s updated when we click the buttons.
Now we get pagination in our table.
Items Provider Functions
We can add an items provider function to provide items.
It can be synchronous or async.
For example, we can make a synchronous one by writing:
function provider() {
let items = [];
return items || [];
}
To make an async provider function, we can write:
function provider(ctx, callback) {
this.fetchData(`/some/url?page=${ctx.currentPage}`)
.then(data => {
const items = data.items;
callback(items)
})
.catch(() => {
callback([])
})
return null
}
We return null or undefined to tell b-table that a callback is being used.
The data that we use to fetch the data is in the ctx parameter.
ctx comes from the props.
callback is called with the fetched items to display it with b-table .
We can also use an async function:
async function provider(ctx) {
try {
const response = await axios.get(`/some/url?page=${ctx.currentPage}`)
return response.items;
} catch (error) {
return []
}
}
They can be set as the value of the items prop:
<template>
<div id="app">
<b-table :items="provider"></b-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
};
},
methods: {
provider(){
return [
{ id: 1, firstName: "alex", lastName: "green" },
{
id: 2,
firstName: "may",
lastName: "smith"
},
{ id: 3, firstName: "james", lastName: "jones" }
]
}
}
};
</script>
Refresh Table Data
We can force the refresh of data table by emitting the bv::refresh::table event.
For example, we can write:
this.$root.$emit('bv::refresh::table', 'table')
to refresh the table with ref table .
Also, we can write:
this.$refs.table.refresh()
Detection of Sorting Change
The b-table component can handle the sort-changed event if we set an event handler for it.
For example, we can write:
<b-table @sort-changed="sortingChanged" ... ></b-table>
Then we can write:
export default {
methods: {
sortingChanged(ctx) {
// ...
}
}
}
The ctx parameter is an object with the sortBy with the key that the rows are sorted by.
It also has the sortDesc boolean property which is true if we sort in descending order.
Light Weight Tables
b-table-lite is a light version of the b-table component.
It’s great for creating a simple table.
It doesn’t have most of the features of b-table like filtering, sorting, pagination, and other dynamic features.
Conclusion
We can add filtering to our table with the filter prop.
Also, we can force refresh a table and add provider functions to load data instead of assigning the data directly to it.
