DEV Community: Ravi surani

Understanding AG Grid Tree Data Mode in React

Ravi surani — Sun, 23 Mar 2025 09:10:13 +0000

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/

Setting Up Multiple Environments in React.js

Ravi surani — Sun, 16 Feb 2025 11:19:28 +0000

When working on a React project, you may need different setups for development, testing, and production. Each environment may require unique API links, features, or settings. Here’s how to set up multiple environments in a simple way.

Why Use Different Environments?

Testing: Ensure new features work before going live.
Security: Keep production data safe.
Performance: Identify issues in different setups.
Smooth Deployment: Update without breaking the live site.

*Steps to Set Up Multiple Environments
*

Create Environment Files

React allows you to use .env files for different setups:

.env (default)
.env.development
.env.staging
.env.production

Define Variables In each .env file, add variables prefixed with REACT_APP_: Example .env.development:

REACT_APP_API_URL=https://dev-api.example.com
REACT_APP_FEATURE=true

In each .env file, add variables prefixed with REACT_APP_:
Example .env.staging:

REACT_APP_API_URL=https://staging-api.example.com
REACT_APP_FEATURE=true

Example .env.production:

REACT_APP_API_URL=https://api.example.com
REACT_APP_FEATURE=false

Use Variables in Code Access them in your React app like this:

const apiUrl = process.env.REACT_APP_API_URL;
const featureEnabled = process.env.REACT_APP_FEATURE === "true";

console.log("API URL:", apiUrl);
console.log("Feature Enabled:", featureEnabled);

Set Up Environment-Based Commands Update package.json to specify environments:

"scripts": {
  "start": "react-scripts start",
  "start:development": "env-cmd -f .env.development npm-run-all -p start-js",
  "start:staging": "env-cmd -f .env.staging npm-run-all -p start-js",
  "start:.production": "env-cmd -f .env.production npm-run-all -p start-js",  
  "build:development": "env-cmd -f .env.development react-scripts build",
  "build:staging": "env-cmd -f .env.staging react-scripts build",
  "build:.production": "env-cmd -f .env.production react-scripts build",
}

Using env-cmd lets you load specific .env files.

Add Environment Variables in Deployment For hosting services like Netlify, Vercel, or AWS Amplify, set environment variables in their settings. If using Docker or Kubernetes, pass them through configuration files.
Debugging Environment Variables To check if variables are loaded, run:

echo $REACT_APP_API_URL

Or log them in your app:

console.log(process.env);

Conclusion
Using multiple environments in React makes development easier and safer. By setting up .env files and using specific scripts, you can seamlessly switch between different setups.

Why JSON is Super Important for JavaScript (Beginner Friendly!)

Ravi surani — Sat, 30 Nov 2024 08:19:13 +0000

So, you're learning JavaScript, and you've probably stumbled upon this weird-looking thing called JSON. Don't worry, it's not as scary as it looks! In fact, understanding JSON is crucial for building almost any kind of dynamic web application. Let's break down why.

What is JSON?

JSON stands for JavaScript Object Notation. Think of it as a simple way to store and exchange data. It's like a universal language that JavaScript (and many other programming languages) can easily understand. Instead of using complex XML files, JSON uses a much simpler, human-readable format.

How does it look?

JSON data looks like this:

{
  "name": "Alice",
  "age": 30,
  "city": "New York"
}

See? It's just key-value pairs enclosed in curly braces {}. The keys are strings (in quotes), and the values can be strings, numbers, booleans (true/false), or even other JSON objects or arrays. For example:

{
  "name": "Bob",
  "age": 25,
  "address": {
    "street": "123 Main St",
    "city": "Los Angeles"
  },
  "hobbies": ["coding", "hiking", "reading"]
}

Why is it important for JavaScript?

Talking to Servers: Most web applications need to communicate with servers to fetch or send data. JSON is the most common way to do this. Imagine you're building a to-do list app. Your JavaScript code needs to send requests to a server to save new tasks and retrieve existing ones. The server sends this data back to your JavaScript code in JSON format.
Storing Data: JSON is also great for storing data locally within your web application (using things like localStorage). This lets your app remember user preferences or other important information even when the user closes the browser.
Easy to Parse: JavaScript has built-in functions (JSON.parse()) to easily convert JSON strings into JavaScript objects. This makes it incredibly simple to work with the data received from a server or stored locally. And JSON.stringify() does the opposite, converting a JavaScript object back into a JSON string for sending to a server.

Simple Example:

Let's say you receive this JSON from a server:

let jsonData = `{"name":"Charlie","age":28}`;

// Parse the JSON string into a JavaScript object:
let user = JSON.parse(jsonData);

// Now you can access the data:
console.log(user.name); // Outputs "Charlie"
console.log(user.age);  // Outputs 28

In a Nutshell:

JSON is a lightweight, easy-to-use data format that acts as a bridge between your JavaScript code and the rest of the world (servers, databases, other applications). Mastering JSON is a fundamental step in becoming a proficient JavaScript developer. Don't be intimidated; with a little practice, you'll be a JSON ninja in no time!