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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rubanraj54.gitbook.io/vue-bootstrap4-table/1.1.2/sorting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.