# TreeList Sorting

The Kendo UI for Vue `TreeList` enables you to sort its data by a single or multiple columns.

## Getting Started

To enable sorting:

1. Set the [`sortable`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#sortable) option of the TreeList.
2. Set the [`field`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistcellprops#field) option of the TreeList column.
3. Utilize the [`sort`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#sort) option to apply the sorting styles and buttons to the affected columns.
4. When [`sortable`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#sortable) is configured and the user tries to sort a column, the [`onSortChange`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#onsortchange) event is emitted. Handle the `onSortChange` event where you have the option to sort the data programmatically, to make a request to the server for server sorting, or to use the [`orderBy`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/orderby) function which automatically processes the data.

The following example demonstrates the minimum required configuration for sorting the TreeList records.

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

## Customizing the Sorting

The default sorting functionality of the TreeList allows you to upgrade it with the following features:

1. Unsort the columns - To enable the unsorting of columns, set the `sortable.allowUnsort` property to `true`. With this configuration, when you click on a column header multiple times, one of the columns states will be an "unsorted" column.
2. Sort the records by multiple columns - To enable the multiple columns sorting, set the `sortable.mode` option to `multiple` (the property accepts a `single` or `multiple` value) .

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

## Suggested Links

* [Data Query Overview](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery)
* [API Reference of the TreeList](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops)
* [API Index of the TreeList](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api)