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
        sortCaseSensitive: false // "true" 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.
sortCaseSensitive	Enable or disable case sensitive sorting. Default value 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>
...