# Sorting

Sorting configuration is added along with the each column config.

## Example

{% code title="columns.vue" %}

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

{% endcode %}

## Attributes details

| Attributes           | Description                                                                                                                                                                                                                         |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| sort                 | Enable or disable sorting in column. Default value is **`false`**.                                                                                                                                                                  |
| initial\_sort        | <p>Sort the column at the first time loading. Default value is <strong><code>false</code></strong>.<br>This only works if <strong><code>sort</code></strong> is <strong><code>true</code></strong>.</p>                             |
| initial\_sort\_order | <p>Sort the column at the first time loading based on given order. Default value is <strong><code>asc</code></strong>.<br>This only works if <strong><code>initial\_sort</code></strong> is <strong><code>true</code></strong>.</p> |
| 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

{% code title="App.vue" %}

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

{% endcode %}

## 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.&#x20;

You can inject your favorite sort icons via slots.

#### Example

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