Sorting configuration is added along with the each column config.
Copy ...
columns : [
{
label : "First Name" ,
name : "name.first_name" , // access nested objects properties with "."
sort : true , // "false" by default
initial_sort : true , // "false" by default
initial_sort_order : "desc" , // "asc" by default
sortCaseSensitive : false // "true" by default
}
]
...
By default single column sort mode is enabled.
Copy < template >
< div id = "app" >
< vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
</vue-bootstrap4-table>
</div>
</template>
<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'
export default {
name: 'App' ,
data: function () {
return {
rows : [
...
] ,
columns : [
...
] ,
config : {
...
multi_column_sort: true , // default false
...
}
}
} ,
components: {
VueBootstrap4Table
}
}
</script>
You can change the sort icons based on your choice, For example if you're using font-awesome or glyphicon in your application, you can still use them for vue-bootstrap4-table.
You can inject your favorite sort icons via slots.
Copy ...
< vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
<template slot = "sort-asc-icon" >
< i class = "fas fa-sort-up" ></ i >
</ template >
< template slot = "sort-desc-icon" >
< i class = "fas fa-sort-down" ></ i >
</ template >
< template slot = "no-sort-icon" >
< i class = "fas fa-sort" ></ i >
</ template >
</ vue - bootstrap4 - table >
...