Sorting

Sorting configuration is added along with the each column config.

Example

columns.vue

...
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
    }
]
...

Attributes details

Attributes	Description
sort	Enable or disable sorting in column. Default value is false
initial_sort	Sort the column at the first time loading. Default value is false. This only works if sort is true
initial_sort_order	Sort the column at the first time loading based on given order. Default value is asc. This only works if initial_sort is true

Single column sorting

By default single column sort mode is enabled.

Multi column sorting

If you would like to enable the multi column sorting, set multi_column_sort to true in table config props.

Example

App.vue

<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>

Slot

Sort Icon

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.

Example

...
<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>
...