# Tree Data Grid
URL: https://pro.rv-grid.com/guides/data-manage/tree/
Source: src/content/docs/guides/data-manage/tree.mdx
Description: Enhance your RevoGrid with hierarchical data visualization using the TreeData Plugin.
The **TreeData Plugin** transforms parent-child relationships data into a hierarchical tree structure and provides the ability to group rows by `parentId` and is optimized for the best performance, making it suitable for large datasets.
It enables features such as expandable rows, and level indicators, making it ideal for applications that handle nested data.

## Tree Plugin vs Key Grouping

RevoGrid has two different ways to show hierarchical rows, and they solve different problems:

- **Key grouping** uses the grid's built-in `grouping` configuration, for example `grid.grouping = { props: ['country', 'city'] }`. The grid reads one or more column values, creates synthetic group header rows for each matching key, and places source rows under those generated groups. Use it when the hierarchy should be calculated from repeated values such as category, region, status, or date.
- **TreeDataPlugin** uses explicit row relationships from your data, normally `id` and `parentId`. The plugin keeps your original rows as the tree nodes, computes tree metadata such as level, expanded state, and visibility, and trims collapsed descendants from the viewport. Use it when the hierarchy already exists in the data, such as folders, tasks and subtasks, organization charts, bill of materials, or nested records.

In short, key grouping answers "which rows share the same values?", while the tree plugin answers "which row is the parent of this row?". Key grouping is value-driven and creates group rows; tree data is relationship-driven and renders your existing rows as parent and child nodes.

It is an extremely **complex and advanced feature**, despite its seemingly simple nature.

1. **Group Rows by Parent ID**: build hierarchical structures without modifying the original data, ensuring smooth performance even with large datasets.

2. **Complicated Drag-and-Drop**: The plugin supports **drag-and-drop between parent nodes** and automatically updates the `parentId` of the moved rows.

3. **Advanced Proxy System**: The plugin uses an advanced **proxy system** to handle sorting and filtering while keeping track of hierarchical relationships. This ensures that **all other plugins** remain unaffected by tree view manipulations, allowing for seamless integration.

4. **Metadata Computation**: The plugin computes tree metadata (e.g., level, expanded state, visibility) without modifying the underlying data. It uses a **recursive approach** to compute tree levels and visibility based on the parent-child relationships, and it leverages **row trimming** to optimize performance without altering the source data.

5. **Crucial for Other Plugins**: Beyond its core functionality, the Tree View plugin plays a **crucial role** in supporting other RevoGrid plugins. It facilitates **data transfer** between different components, ensuring compatibility with features like filtering, sorting, and row selection.

- **Hierarchical Data Support**: Automatically organizes flat data into a tree structure based on customizable `id`, `parentId`, and `level` fields.
- **Expandable Rows**: Expand and collapse rows dynamically to reveal or hide child rows.
- **Customizable Templates**: Supports tree-specific cell templates for better customization.
- **Root Parent Support**: Define custom root parent identifiers for flexibility in tree structure.

## Data Structure

To build the hierarchical tree structure, each data item must include the following fields:

- **`id`**: A unique identifier for each row.
- **`parentId`**: Links the item to its parent row. Root-level rows should use the `rootParentId` value (default: `'root'`).

Without these fields, the plugin cannot establish the necessary parent-child relationships for the tree structure.

```javascript
const data = [
  { id: '1', parentId: 'root', name: 'Parent 1' },
  { id: '2', parentId: '1', name: 'Child 1.1' },
  { id: '3', parentId: '1', name: 'Child 1.2' },
  { id: '4', parentId: 'root', name: 'Parent 2' },
];
```

## Additional Configuration Options

The plugin supports the following options for customization:
- idField: Defines the field representing unique row identifiers. Default: 'id'.
- parentIdField: Specifies the field indicating parent row IDs. Default: 'parentId'.
- levelField: Sets the field to store hierarchy levels. Default: 'level'.
- rootParentId: Defines the identifier for root-level rows. Default: 'root'.
- expandedRowIds: A Set of row IDs to predefine expanded rows.

### Example Configuration

You can provide these options via revogrid.additionalData?.tree to customize the plugin’s behavior:
```javascript
grid.additionalData = {
  tree: {
    idField: 'customId',
    parentIdField: 'customParentId',
    levelField: 'depth',
    rootParentId: null,
    expandedRowIds: new Set(['row1', 'row2']), // Pre-expanded rows
  },
};
```
By setting these options, you can adapt the plugin to different data structures and define default states for the tree.

### Animated Collapse and Expand

Tree rows can animate while they are trimmed during collapse and restored during expand. Enable `tree.animation`; TreeDataPlugin registers `DimensionAnimationPlugin` automatically when it is not already present.

```javascript
import { TreeDataPlugin } from '@revolist/revogrid-pro';

grid.plugins = [TreeDataPlugin];
grid.tree = {
  animation: true,
};
grid.dimensionAnimation = {
  duration: 180,
};
```

When `tree.animation` is not enabled, tree collapse and expand use the existing immediate trim behavior.
