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 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.
- SMART COMPONENTSDATA VISUALIZATIONDROPDOWNSFILE VIEWERS & EDITORSBUTTONSINTERACTIVE CHATINPUTSNAVIGATIONNOTIFICATIONS