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.