How to change ag-grid row group indent?

Question

I want to change (increase/decrease) the magnitude of indent (current default is 28px) for each inner group in my Tree Data. However, I could not find any configuration options for the same in the documentation. The closest thing I could find was suppressPadding, which disables padding altogether. I tried using DOM piercing CSS but found that every level has a different CSS class (ex. ag-row-group-indent-2), which makes writing a general CSS rule in my container component difficult.

Answer 1

Currently, I'm overriding the style in a loop, which seems to be working

// Taken from https://github.com/ag-grid/ag-grid/blob/master/dist/styles/ag-theme-base/sass/parts/_grid-layout.scss
// support 20 levels here because row group indentation is used for tree data which can be quite deep
@for $i from 1 to 20 {
    .ag-row-group-indent-#{$i} {
        padding-left: $i * 8px;
    }

    .ag-row-level-#{$i} .ag-row-group-leaf-indent {
        margin-left: 40px;
    }
}

Answer 2

You can add a cellStyle callback that computes the padding-left value for each cell based on its current group level.

defaultColDef: {
  cellStyle: (params) => {
    const { level } = params.node;
    const groupCell = params.value === params.node.key;
    const indent = 28; // change this value to your liking

    if (groupCell) {
      return {
        paddingLeft: (level + 1) * indent + "px"
      };
    }
  }
},

If you use this approach, remember to suppress the initial css padding value from agGrid or both agGrid and your padding values will add up.

::ng-deep .ag-cell-wrapper.ag-row-group[class*="ag-row-group-indent"],
::ng-deep .ag-cell-wrapper.ag-row-group-leaf-indent[class*="ag-row-group-indent"] {
  padding-left: 0;
}

Live Demo

Answer 3

If you're using SCSS and theming, you can change the indent by setting the value of row-group-indent-size, like this:

:root {
    @include ag-theme-balham(( 
        row-height: 20px,
        cell-horizontal-padding: 8px,
        row-group-indent-size: 18px
    ));
}

Reference: https://www.ag-grid.com/javascript-data-grid/global-style-customisation-variables/