> For the complete documentation index, see [llms.txt](https://rubanraj54.gitbook.io/vue-bootstrap4-table/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rubanraj54.gitbook.io/vue-bootstrap4-table/1.0.22/sorting.md).

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

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

## 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.0.22/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.