# Vue Grid Sorting

The Kendo UI for Vue Data Grid provides powerful sorting capabilities that allow users to organize and analyze data effectively. Sorting can be applied to a single column or multiple columns simultaneously, depending on the application's requirements.

## Basics of Sorting in the Vue Data Grid

Sorting in the Grid is enabled through the sortable property. When sorting is enabled, users can click on column headers to sort data in ascending or descending order. Additional customization options allow for multi-column sorting and custom sorting logic in either one of the following modes:

* [Built-in State Management](https://www.telerik.com/kendo-vue-ui-develop/components/grid/sorting#using-the-built-in-state-management-for-sorting): The Grid manages its own sorting state internally.

* [Controlled Mode](https://www.telerik.com/kendo-vue-ui-develop/components/grid/sorting#using-the-sorting-in-controlled-mode): The sorting state is externally managed by handling events and updating the state accordingly.

### Features of Sorting

* [Single-column Sorting](https://www.telerik.com/kendo-vue-ui-develop/components/grid/sorting#single-column-sorting)—Users can sort data by one column at a time, with an option to unsort.
* [Multiple-column Sorting](https://www.telerik.com/kendo-vue-ui-develop/components/grid/sorting#multiple-column-sorting)—Allows sorting by multiple columns, defining sorting priorities.
* [Custom Sorting Logic](https://www.telerik.com/kendo-vue-ui-develop/components/grid/sorting#customizing-the-sort-compare-function)—Developers can implement custom compare functions.
* [Reversing Sorting Order](https://www.telerik.com/kendo-vue-ui-develop/components/grid/sorting#reversing-sorting-order)—Allows you to prioritize the last sorted column.
* **Client-side and Server-side Sorting**—allows you to handle the sorting on the client for fast updates or processed on the server for larger datasets.

You can also enable the unsorting of columns by utilizing the `sortable.allowUnsort` option.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/sorting/basic/source.txt)

## Using the Built-in State Management for Sorting

To enable sorting in the Kendo UI for Vue Grid and utilize its built-in state management, follow these steps:

1. Enable the [`autoProcessData`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#autoprocessdata) prop to allow the Grid to handle the updated state automatically.
2. Set the [`sortable`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#sortable) prop of the Grid to enable sorting.
3. Set the [`defaultSort`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#defaultsort) prop to define the initial sorting.

The following example demonstrates how to use sorting handled by the built-in state management of the Kendo UI for Vue Grid.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/sorting-basic/built-in/source.txt)

## Using the Sorting in Controlled Mode

To enable sorting in the Kendo UI for Vue Grid and use it in controlled mode, follow these steps:

1. Set the [`sortable`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#sortable) option of the Grid and set its `mode` prop to `single`.
2. Set the [`field`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#field) option of the Grid column.
3. Utilize the [`sort`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#sort) option to apply the sorting styles and buttons to the affected columns.
4. Handle the [`onSortChange`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#onsortchange) or the [`onDataStateChange`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#ondatastatechange) event of the Grid. The `onDataStateChange` event is recommended when the Grid will have other data operations as it provides the complete [`dataState`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/state) in a single event.
5. Sort the data on the client by using our built-in methods [`orderBy`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/orderby) or [`process`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/process). The data can also be sorted on the server by making a request using the event parameters.

> The [`orderBy`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/orderby) method is recommended when using the `onSortChange` event and the [`process`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/process) method is recommended when using the `onDataStateChange` event.

The following example demonstrates the minimum required configuration for single column sorting the Grid records.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/sorting-basic/controlled/source.txt)

## Single-column Sorting

Single-column sorting allows users to sort records by clicking on a column header. Clicking repeatedly cycles through ascending, descending, and unsorted states if enabled.

Learn more about enabling and customizing single-column sorting: [Single-column Sorting Guide](https://www.telerik.com/kendo-vue-ui-develop/components/grid/sorting/single-sorting)

## Multiple-column Sorting

Multiple-column sorting lets users define a sorting hierarchy by sorting several columns at once. The order of sorting can be adjusted to prioritize certain columns.

Explore multiple-column sorting options: [Multiple-column Sorting Guide](https://www.telerik.com/kendo-vue-ui-develop/components/grid/sorting/multi-sorting)

## Customizing the Sort Compare Function

The `SortDescriptor` allows setting custom `compare` function for providing custom sorting logic. In the context of the Grid, the `onSortChange` or `onDataStateChange` events can be handled for finding the SortDescriptor for specific field and adding the custom sort compare function.

The following example demonstrates how to add custom compare function to `version` field within the `onDataStateChange` event of the Grid:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/sorting-custom-compare/source.txt)

## Reversing Sorting Order

The Grid allows you to reverse the sorting order of its columns. To apply higher priority to the last sorted column, place it at the beginning of the sorting array before setting the new state. When a column is removed from the sorting state, you do not have to reverse the items.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import type { GridSortChangeEvent } from '@progress/kendo-vue-grid';

const sort = ref<SortDescriptor[]>([]);
const products = ref([]);

const sortChange = (event: GridSortChangeEvent) => {
  const newSort = event.sort;
  if (newSort.length >= sort.value.length) {
    newSort.unshift(newSort.pop());
  }
  sort.value = newSort;
  products.value = GetProducts(newSort);
};
</script>
```

## Customize Sorting

The sorting feature of the Grid allows you to clear the sorting on columns and sort the records by multiple columns.

* To enable the unsorting of columns, use the `sortable.allowUnsort` option which determines if the columns can be unsorted.
* To enable the sorting of multiple columns, set the `sortable.mode` option which accepts a `single` or `multiple` value.

The following example demonstrates both the unsorting of columns and the sorting of multiple columns in the Grid.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/sorting/custom/source.txt)

## Suggested Links

* [Vue Data Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid)
* [Data Query Overview](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery)
* [Vue Data Grid High-Level Overview](https://www.telerik.com/kendo-vue-ui/grid)