Ag-grid align row group to right

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>