Overview

Rows in Tree Grid represent each task or data object from the data source. Expand or collapse child rows, reorder rows, and indent or outdent rows to change hierarchy levels, with much more functionality available.


Expand and collapse parent rows

Expand or collapse parent rows interactively or programmatically, including selected or all rows during initial rendering. Expand and collapse controls are suitable for hierarchical datasets that require child records to be shown or hidden as required.

Row expand or collapse in React Tree Grid.


Row drag and drop in React Tree Grid.

Row drag and drop

Reorder rows through drag-and-drop interaction to change their position or hierarchy level. Row reordering is suitable for moving records between parent nodes or changing sibling and child relationships.


Row template and detail template

Create custom row layouts or display additional information beneath individual data rows. Row customization is suitable for Tree Grids that require application-specific row presentation or supplementary record details.


Explore all Syncfusion React components

Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.

Scroll up icon
Syncfusion Feedback