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.
How to change ag-grid row group indent?
Viewed 1971
3 Answers
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;
}
}
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
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/
Related