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 transitions and sorting.
Table Body Transition
We can add table body transitions to our table’s body.
To do that, we can add the tbody-transition-prois to add transition-group properties in an object.
The tbody-transition-handlers kets us add transition-groip event handlers from an object.
primary-lkey is a string that specifies the fields to use as a unique row key.
For instance, we can write:
<template>
<div id="app">
<b-table primary-key="id" :tbody-transition-props="transProps" :items="items" :fields="fields"></b-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
fields: [
{ key: "id", sortable: true },
{ key: "firstName", sortable: true },
{ key: "lastName", sortable: true }
],
transProps: {
name: "flip-list"
},
items: [
{ id: 1, firstName: "alex", lastName: "green" },
{
id: 2,
firstName: "may",
lastName: "smith"
},
{ id: 3, firstName: "james", lastName: "jones" }
]
};
}
};
</script>
<style>
table .flip-list-move {
transition: transform 1s;
}
</style>
We added transition effects when we sort the table rows.
To do that, we added the tbody-transition-props prop which is set to the transProps object.
The object has a name for the transition.
The name should match the prefix class of the CSS transition.
Therefore, in the style tag, we have the flip-list-move class, which starts with flip-list .
primary-key is also set to the unique key column in our table, which is id .
We make the sortable with the sortable property in each fields array entry.
Now when we click the sort button on each field, we’ll see a fade effect displayed.
Sorting
BootstrapVue tables are sortable.
We can specify the props for sorting the tables.
To specify the columns to be sorted, we can use the sort-by prop.
The direction can be set by sort-desc set to true or false .
This way, we can sort the value from highest to lowest or vice versa respectively.
When foot-clone is set, the footer headings will also allow sorting by clicking.
This is true even if we have custom footers.
For example, we can write:
<template>
<div id="app">
<b-table sort-by="id" sortDesc :items="items" :fields="fields"></b-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
fields: [
{ key: "id", sortable: true },
{ key: "firstName", sortable: true },
{ key: "lastName", sortable: true }
],
items: [
{ id: 1, firstName: "alex", lastName: "green" },
{
id: 2,
firstName: "may",
lastName: "smith"
},
{ id: 3, firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We added the sort-by prop with the name of the field we want to sort.
It’s set to id to sort by id .
sortDesc lets us sort the column in descending order.
Therefore we have the rows sorted by the id column in descending order.
Customizing Sort Icons
We can customize the CSS to change the sort icon.
Sort Compare
We can change how the entries are compared with the sort-compare prop set to a function to let us customize sorting.
For instance, we can write:
<template>
<div id="app">
<b-table sort-compare='sortCompare' :items="items" :fields="fields"></b-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
fields: [
{ key: "id", sortable: true },
{ key: "firstName", sortable: true },
{ key: "lastName", sortable: true }
],
items: [
{ id: 1, firstName: "alex", lastName: "green" },
{
id: 2,
firstName: "may",
lastName: "smith"
},
{ id: 3, firstName: "james", lastName: "jones" }
]
};
},
methods: {
sortCompare(
aRow,
bRow,
key,
sortDesc,
formatter,
compareOptions,
compareLocale
) {
return aRow[key].localeCompare(bRow[key], compareLocale, compareOptions);
}
}
};
</script>
We gave the sortCompare which we set as the value of sort-compare .
In the method, we can pass in compareLocale and compareOptions to the localeCompare method of a string to sort them.
Conclusion
We can add table body transitions to add effects when manipulating rows.
Also, we can sort columns our way with the built-in props or a custom sorting function.
