AG Grid TreeData 구현

https://www.ag-grid.com/react-data-grid/tree-data/

React Data Grid: Tree Data

React Data Grid: Tree Data

Use Tree Data to display data that has parent / child relationships where the parent / child relationships are provided as part of the data. For example, a folder can contain zero or more files and other folders.

This section introduces simple ways to work with Tree Data before covering more advanced use cases.

Tree Data Mode

In order to set the grid to work with Tree Data, simply enable Tree Data mode via the Grid Options using:

const treeData = true;

<AgGridReact treeData={treeData}></AgGridReact>

Supplying Tree Data

When providing tree data to the grid you implement the gridOptions.getDataPath(data) callback to tell the grid the hierarchy for each row. The callback returns back a string[] with each element specifying a level of the tree. Below follows two examples presenting the hierarchy in different ways.

getDataPath GetDataPath

Callback to be used when working with Tree Data when treeData = true.

// sample hierarchy, Malcolm is child or Erica
// + Erica
//   - Malcolm

// ############
// Example #1 - hierarchy in the data is already a string array
// ############
const rowData = [
    { orgHierarchy: ['Erica'], jobTitle: "CEO", employmentType: "Permanent" },
    { orgHierarchy: ['Erica', 'Malcolm'], jobTitle: "VP", employmentType: "Permanent" }
    ...
]
// just return the hierarchy, no conversion required
getDataPath: data => {
    return data.orgHierarchy;
}

// ############
// Example #2 - hierarchy is a path string, needs conversion
// ############
const rowData = [
    { path: "Erica", jobTitle: "CEO", employmentType: "Permanent" },
    { path: "Erica/Malcolm", jobTitle: "VP", employmentType: "Permanent" }
    ...
]
// callback converts eg "Erica/Malcolm" to ["Erica","Malcolm"]
getDataPath: data => {
    return data.path.split('/'); // path: "Erica/Malcolm"
}

Configuring Group Column

There are two ways to configure the Group Column:

• Auto Column Group - this is automatically selected by the grid when in Tree Data mode, however you can override the defaults.
• Custom Column Group - you can provide your own custom column group definition which gives allows more control over how the Group Column is displayed.

Auto Column Group

When the grid is working with Tree Data there is no need to explicitly specify a Group Column as the grid will use the Auto Group Column. However, you will probably want to override some defaults as shown below:

const autoGroupColumnDef = {
    headerName: "My Group",
    width: 300,
    cellRendererParams: {
        suppressCount: true
    }
};

<AgGridReact autoGroupColumnDef={autoGroupColumnDef}></AgGridReact>

Custom Column Group

As noted above, providing your own Custom Column Group has the advantage of giving you full control over the presentation of the Column Group, however it is not as convenient as using the default Auto Column Group.

One significant difference is that the entire dataPath array will be supplied as a value, rather than just the current node value.

For more details see Custom Group Columns

It is not possible to have multiple group display columns for tree data like you do for row grouping. When doing tree data, you should only have one column for display the group.