Showing all columns in AG-Grid group rows

Question

I want to display a grid which looks like this:

code	description	from	to
▼ 100	Group row 1	0	10
101	Child row 1	1	2
102	Child row 2	2	4
▶ 200	Group row 2	10	20
▶ 300	Group row 3	20	30
▶ 400	Group row 4	30	40

But so far, all I have managed to do is create a grid which looks like this:

code	description	from	to
▼ 100 (3)
100	Group row 1	1	2
101	Child row 1	1	2
102	Child row 2	2	4
▶ 200 (4)
▶ 300 (0)
▶ 400 (0)

How do I configure AG-Grid to do what I want with the group rows?

My current configuration:

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [gridOptions]="gridOptions" />

  gridOptions: GridOptions = {
    columnDefs: [
      { field: 'group', rowGroup: true, hide: true},
      { field: 'code', width: 100 },
      { field: 'description', flex: 1, minWidth: 300 },
      { field: 'from', width: 120 },
      { field: 'to', width: 120},
    ],
  };
  rowData = [
    { group: 100, code: 100, description: 'Group row 1', from: 0, to: 10 },
    { group: 100, code: 101, description: 'Child row 1', from: 1, to: 2 },
    { group: 100, code: 102, description: 'Child row 2', from: 2, to: 4 },
    { group: 200, code: 200, description: 'Group row 2', from: 10, to: 20 },
    { group: 200, code: 201, description: 'Child row 3', from: 12, to: 14 },
    { group: 200, code: 202, description: 'Child row 4', from: 14, to: 15 },
    { group: 200, code: 203, description: 'Child row 5', from: 15, to: 18 },
    { group: 300, code: 300, description: 'Group row 3', from: 20, to: 30 },
    { group: 400, code: 400, description: 'Group row 4', from: 30, to: 40 },
  ];

I've tried to use a groupDisplayType: 'custom' and define a custom groupRowRenderer component, but AG-Grid does some positioning magic to how the columns are laid out and I can't seem to replicate it.

Anybody have any tips on how to do this? Is it at all possible?

Answer 1

Figured it out. Took me a while though, but I guess that's the learning curve of a library.

This is a tree. Not row grouping. The secret here, is identifying the hierarchy, which is done in getDataPath.

  gridOptions: GridOptions = {
    treeData: true,
    getDataPath: (data: any) => [
      data.group,
      ...(data.group === data.code ? [] : [data.code]),
    ],
    autoGroupColumnDef: {
      headerName: 'Code',
      width: 100,
      sort: 'asc',
      cellRenderer: 'agGroupCellRenderer',
      cellRendererParams: { suppressCount: true },
    },
    columnDefs: [
      { field: 'description', flex: 1, minWidth: 300 },
      { field: 'from', width: 120 },
      { field: 'to', width: 120},
    ],
  };
  rowData = [
    { group: 100, code: 100, description: 'Group row 1', from: 0, to: 10 },
    { group: 100, code: 101, description: 'Child row 1', from: 1, to: 2 },
    { group: 100, code: 102, description: 'Child row 2', from: 2, to: 4 },
    { group: 200, code: 200, description: 'Group row 2', from: 10, to: 20 },
    { group: 200, code: 201, description: 'Child row 3', from: 12, to: 14 },
    { group: 200, code: 202, description: 'Child row 4', from: 14, to: 15 },
    { group: 200, code: 203, description: 'Child row 5', from: 15, to: 18 },
    { group: 300, code: 300, description: 'Group row 3', from: 20, to: 30 },
    { group: 400, code: 400, description: 'Group row 4', from: 30, to: 40 },
  ];