4레벨로 AGGrid에서 그리드 트리 형태 표시

AGGrid에 테스트 마스터 1레벨, 시나리오 2레벨, 테스트 케이스 3레벨, 업체 마스터 4레벨로 AGGrid에서 그리드 트리 형태로 표시하고 싶습니다.
1레벨은 테스트 마스터 명, 미수행건수, 성공건수, 실패건수
2레벨은 시나리오 명, 미수행건수, 성공건수, 실패건수
3레벨은 테스트케이스 명, 미수행건수, 성공건수, 실패건수
4레벨은 업체 명, 미수행건수, 성공건수, 실패건수
각 레벨 앞에 +, - 항목이 있어서 접었다 펼칠 수 있는 기능도 추가

import React 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 App = () => {
  const columnDefs = [
    { headerName: '이름', field: 'name', cellRenderer: 'agGroupCellRenderer' },
    { headerName: '미수행건수', field: 'notExecuted' },
    { headerName: '성공건수', field: 'success' },
    { headerName: '실패건수', field: 'failure' },
  ];

  const rowData = [
    {
      name: '테스트 마스터 1',
      notExecuted: 5,
      success: 10,
      failure: 2,
      children: [
        {
          name: '시나리오 1',
          notExecuted: 3,
          success: 6,
          failure: 1,
          children: [
            {
              name: '테스트케이스 1',
              notExecuted: 1,
              success: 3,
              failure: 0,
              children: [
                {
                  name: '업체 A',
                  notExecuted: 0,
                  success: 2,
                  failure: 0,
                },
                {
                  name: '업체 B',
                  notExecuted: 1,
                  success: 1,
                  failure: 0,
                },
              ],
            },
          ],
        },
        {
          name: '시나리오 2',
          notExecuted: 2,
          success: 4,
          failure: 1,
          children: [
            {
              name: '테스트케이스 2',
              notExecuted: 0,
              success: 2,
              failure: 1,
              children: [
                {
                  name: '업체 C',
                  notExecuted: 0,
                  success: 1,
                  failure: 0,
                },
              ],
            },
          ],
        },
      ],
    },
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: '600px', width: '100%' }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        treeData={true}
        animateRows={true}
        groupDefaultExpanded={-1}
        getDataPath={data => data.children ? data.name.split(' ') : []}
        frameworkComponents={{
          agGroupCellRenderer: 'agGroupCellRenderer',
        }}
      />
    </div>
  );
};

export default App;

 

columnDefs: 각 열의 정의를 설정합니다. 이름 열은 그룹 셀 렌더러를 사용하여 트리 형태로 표시됩니다.
rowData: 트리 구조의 데이터를 정의합니다. 각 레벨의 데이터를 children 속성을 사용하여 중첩합니다.
AG Grid 설정:
treeData: 트리 데이터를 사용할 것임을 명시합니다.
groupDefaultExpanded: 모든 그룹을 기본적으로 확장할지 여부를 설정합니다. -1은 모든 그룹을 확장합니다.
getDataPath: 데이터를 트리 형태로 구성하는 데 필요한 경로를 반환하는 함수입니다.
이 예제를 사용하여 AG Grid에서 4레벨 트리 구조를 만들고, 각 레벨을 접고 펼칠 수 있는 기능을 구현할 수 있습니다.