Ag-grid align row group to right - ag-grid

Question

Is it possible to align row group to align right?
I tried headerClass: 'ag-right-aligned-header' but it doesn't seem to work.
{headerName: 'Name', headerClass: 'ag-right-aligned-header', field: 'name', rowGroup: true, enableRowGroup: true }

Answer 1

Just reverse the flex-direction on the element. You could even add a position indicator for this if required, or add a headerClass in this specific column header.
.ag-header-row-column-group .ag-header-group-cell-with-group:last-child .ag-header-group-cell-label {
flex-direction: row-reverse;
}
OR
/* add headerClass: 'simple-right-aligned' to columnDef */
.simple-right-aligned .ag-header-group-cell-label {
flex-direction: row-reverse;
}
Note: This also changes the < open / closed item position, which is probably an unwanted but not significant side effect, as really the reading order is essentially reversed and would behave as expected.
const columnDefs = [{
headerName: 'Athlete Details',
children: [{
field: 'athlete',
width: 180,
filter: 'agTextColumnFilter',
},
{
field: 'age',
width: 90,
filter: 'agNumberColumnFilter',
},
{
headerName: 'Country',
field: 'country',
width: 140
},
],
}, {
headerName: 'Athlete Details Duplicated',
children: [{
field: 'athlete',
width: 180,
filter: 'agTextColumnFilter',
},
{
field: 'age',
width: 90,
filter: 'agNumberColumnFilter',
},
{
headerName: 'Country',
field: 'country',
width: 140
},
],
},
{
headerName: 'Sports Results',
headerClass: 'simple-right-aligned',
children: [{
field: 'sport',
width: 140
},
{
columnGroupShow: 'closed',
field: 'total',
width: 100,
filter: 'agNumberColumnFilter',
},
{
columnGroupShow: 'open',
field: 'gold',
width: 100,
filter: 'agNumberColumnFilter',
},
{
columnGroupShow: 'open',
field: 'silver',
width: 100,
filter: 'agNumberColumnFilter',
},
{
columnGroupShow: 'open',
field: 'bronze',
width: 100,
filter: 'agNumberColumnFilter',
},
],
},
];
const gridOptions = {
defaultColDef: {
sortable: true,
resizable: true,
filter: true,
},
// debug: true,
columnDefs: columnDefs,
rowData: null,
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((response) => response.json())
.then((data) => gridOptions.api.setRowData(data));
});
html,
body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
/*
.ag-header-row-column-group .ag-header-group-cell-with-group:last-child .ag-header-group-cell-label,
*/
.simple-right-aligned .ag-header-group-cell-label {
flex-direction: row-reverse;
}
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<div id="myGrid" style="height: 100%" class="ag-theme-alpine">
</div>