---
title: Overview
position: 1
seo_title: Overview of the TreeList Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  TreeList component and check out the extensive set of available options in its
  live demo.
---
## TreeList Overview

The TreeList component organizes hierarchical data in a tabular format, allowing users to navigate and interact with nested information efficiently. It represents parent-child relationships through expandable nodes that reveal or hide subordinate items. With features such as sorting, filtering, resizing, and pagination, TreeLists provide a user-friendly way to manage and visualize hierarchical data sets.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/treelist/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/treelist/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/treelist/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/treelist/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/treelist/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/treelist"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/treelist"}],"demo":"components/treelist/overview"}'></LiveDemo>

### Anatomy

The anatomy of the TreeList summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Toolbar"},{"text":"TreeList"},{"text":"Pager"},{"text":"Sorted column"},{"text":"Column menu"},{"text":"Grid header"},{"text":"Filter row"},{"text":"TreeList alternate row"},{"text":"TreeList row"},{"text":"Group aggregate footer"},{"text":"Checkbox row selection"}]}'>![A Telerik and Kendo UI TreeList component](images/components-treelist-overview-anatomy-v2.png "Anatomy and elements of a Telerik and Kendo UI TreeList")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular TreeList","description":"Find more information about the Kendo UI for Angular TreeList in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/treelist/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor TreeList","description":"Find more information about the Telerik UI for Blazor TreeList in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/treelist/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery TreeList","description":"Find more information about the Kendo UI for jQuery TreeList in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/treelist/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact TreeList","description":"Find more information about the KendoReact TreeList in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/treelist/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue TreeList","description":"Find more information about the Kendo UI for Vue TreeList in the official product documentation of the component.","url":"http://www.telerik.com/kendo-vue-ui/components/treelist/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core TreeList","description":"Find more information about the Telerik UI for ASP.NET Core TreeList component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/data-management/treelist/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC TreeList","description":"Find more information about the Telerik UI for ASP.NET MVC TreeList component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/treelist/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>