Sorting in TreeView Component

IntegralUI TreeView component comes with built-in support for sorting that allows you to sort items in ascending or descending order based on item's text or value field. In some cases you may need to sort items in different way based on some custom value, for this purpose you can only a sort value to the item's value field. In other cases with more specific scenarios, you can create custom sort operations with your own comparer function.

In this article, you will learn about basic sorting operations in TreeView component. The sample code is available in each JavaScript framework: Angular, React and Vue.

In this example, you can sort the tree hierarchy in whole in ascending or descending order using options from control panel on the right side.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Sort Items in TreeView

The sort order by which items in TreeView directive are sorted is determined by sorting property. Only one of the following values is acceptable:

• None - sorting is disabled
• Ascending - items are sorted in ascending order
• Descending- items are sorted in descending order

By default, sorting is disabled, to enable it change the sorting property value either to Ascending or to Descending. The other way to change the sort order is by setting it directly in the sort method.

sort(order, comparer)

The order parameter determines whether items are sorted in ascending or descending order. The comparer function points to a custom function in your code that overrides default sorting.

When sort order is applied, and new item is added to the TreeView, it is automatically placed on correct position within the tree hierarchy. Same with removal, the tree data is sorted whenever tree view layout updates.

• JavaScript
• Angular
• React
• Vue

During sorting, the priority has the item value fields. If this field is not set, then the item's text is used to determine the position of the item within the tree hierarchy. The value field is of type any, which means you can set numeric, string, date, object or any other value to it.

When you use objects, dates or other values for sorting, you may need to create your own comparer function that will sort items based on your own operations.

With custom sorting, for example when you want to sort tree hierarchy by a Date when item is added to the tree hierarchy, you need to use the value field and set the Date object for each item. If you use the numeric or ISO string value for the date, then you don't need a custom comparer function. For complex scenarios, you may need to create one.

Conclusion

You can sort tree items in TreeView component using built-in sorting. All items in tree hierarchy are sorted based on provided sort order: ascending or descending. There is an option also to create your own comparer function that will sort items based on your own operation set in your code.

IntegralUI Web is an UI library of native web components that includes the TreeView. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.