Vue TreeList - Overview

DevExtreme TreeList is a UI component for displaying hierarchical data in a grid. It can handle a collection of linked plain objects and build a tree hierarchy. Key features include data editing and validation, sorting, filtering, searching, and adaptability.

In this overview, you can find a map of TreeList elements, information about key features, and what to explore next.

Elements

Click an element in the map below to navigate to the topic related to that element.

TreeList elements Toolbar items Column chooser Search panel Row reordering Expand  and collapse rows Filter row Editing Pager

Key Features

  • Data Binding
    TreeList can load and update data from different data source types. You can define data as plain or hierarchical. If you choose plain data, you can load it on demand. For large datasets, you can use server-side data processing.

  • Various Edit Modes
    Edit TreeList data in multiple modes, including form and popup modes.

  • Filtering, Sorting, and Searching
    Set up a filter row and a header filter to filter data by column values. You can sort TreeList by single or multiple columns initially or at runtime. Enable search panel to allow users searching values in multiple columns at once.

  • Rich Customization
    TreeList offers extensive appearance customization for cells, edit buttons, and so on.

  • Nodes Drag and Drop
    You can drag and drop rows to reorder them or change their hierarchy. You can also enable column reordering.

  • State Persistence
    TreeList can persist user changes to sorting, filtering, grouping, and column settings. It restores these changes when the page reloads.