AG Grid is a powerful React data table library that provides various features, including Tree Data mode for hierarchical data visualization. Tree Data mode allows users to display parent-child relationships in a structured grid.

In this blog, we will explore:

✅ What is Tree Data Mode?

✅ Important parameters and their values

✅ An implementation example

What is Tree Data Mode?

Tree Data mode enables AG Grid to display hierarchical data in a grid format, where some rows act as parents containing child rows.

Unlike the built-in row grouping feature, Tree Data mode is useful when data already has a structured hierarchy, such as:

  • A file system (folders containing files)
  • An organizational chart (departments with employees)

Key Parameters in Tree Data Mode

1️⃣ treeData

  • Type: boolean
  • Default: false
  • Description: Enables tree data mode in AG Grid.
  • Usage: Set to true to activate hierarchical data rendering. 
const gridOptions = {
  treeData: true,
};

2️⃣ getDataPath

  • Type: function
  • Description: Defines how AG Grid determines the hierarchy of the dataset by specifying the path of each row.
  • Usage: Returns an array representing the hierarchical path of a row. 
const getDataPath = (data) => data.hierarchy;

Example Data: 

[
  { "hierarchy": ["Electronics", "Laptops"], "name": "MacBook Pro" },
  { "hierarchy": ["Electronics", "Phones"], "name": "iPhone 13" }
]

3️⃣ autoGroupColumnDef

  • Type: object
  • Description: Configures the column used for displaying hierarchical data. 
const autoGroupColumnDef = {
  headerName: "Category",
  cellRendererParams: {
    suppressCount: true, // Hides child count next to group name
  },
};

4️⃣ groupDefaultExpanded

  • Type: number
  • Default: 0
  • Description: Determines how many levels should be expanded by default.
  • Usage:
    • 0 → Collapsed
    • 1 → Expand first level
    • -1 → Expand all levels 
const gridOptions = {
  groupDefaultExpanded: -1,
};

5️⃣ columnDefs

  • Type: array
  • Description: Defines the columns in the grid. 
const columnDefs = [
  { field: "name" },
];

Example Implementation in React

Here’s a full React example using AG Grid’s Tree Data mode:

import React, { useState } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";

const TreeDataExample = () => {
  const [rowData] = useState([
    { hierarchy: ["Electronics", "Laptops"], name: "MacBook Pro" },
    { hierarchy: ["Electronics", "Phones"], name: "iPhone 13" }
  ]);

  const columnDefs = [{ field: "name" }];

  const gridOptions = {
    treeData: true,
    getDataPath: (data) => data.hierarchy,
    autoGroupColumnDef: {
      headerName: "Category",
      cellRendererParams: { suppressCount: true }
    },
    groupDefaultExpanded: -1,
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 500, width: 600 }}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs} {...gridOptions} />
    div>
  );
};

export default TreeDataExample;

Conclusion

AG Grid’s Tree Data mode provides an efficient way to display hierarchical data in React applications.

By configuring parameters like:

✅ treeData → Enables hierarchy

✅ getDataPath → Defines data structure

✅ autoGroupColumnDef → Configures group column

✅ groupDefaultExpanded → Controls row expansion

You can easily create structured and dynamic tables. Try it in your React project and enhance your data presentation! 🚀

🔗 Want to Learn More?

📖 Check out the official AG Grid Docs: https://www.ag-grid.com/react-data-grid/tree-data/