How to right align text in ag-grid for number

Question

If any cell in ag-grid has numeric value like decimal, int or numeric i want that cell to be right aligned.

this.defaultColumnDefs = {
      width: 75,
      exportColumn: true,
      type: 'numericColumn',
      cellClass(params) {
        return params.colDef.type === 'numericColumn' ? 'ag-numeric-cell' : '';
      },
      filterParams: {
        buttons: ['clear'],
      },
      menuTabs: ['filterMenuTab'],
      filter: 'agTextColumnFilter',
      resizable: true,
      sortable: true
    };

It used to work before now i have to go to each column and specify the type. Why doesn't it take the default type?

Muimuir

what have you tried so far ? – Tit

@Muimuir which agGrid version are you using? – Yorke

@Muimuir I have a project that is doing the same thing, using type and cellClass in the default column definition, and it is still working. Using version 23. – Grit

Answer 1

There is an easy solution provided by Ag-grid documentation:

columnDefs: [
        { headerName: 'Column A', field: 'a' },
        { headerName: 'Column B', field: 'b', type: 'rightAligned' },
    ]

Just add type: 'rightAligned' property.

Coffin

For me did not work. Had to use cellStyle. Solution founded here: github.com/ag-grid/ag-grid/issues/1334#issuecomment-339816232 – Collegium

@LukasCoorek what ag-grid version do you use? It should work because it's from the official documentation – Coffin

For me its working fine. – Patrilineal

@Coffin version 24 😀 – Collegium

@LukasCoorek I guess you need to update – Coffin

This doesn't work if you are using a custom theme – Unlatch

Answer 2

If you just want both the column header and cells to be right-aligned, you can use NicuVlad's answer:

columnDefs: [
        { headerName: 'Column A', field: 'a' },
        { headerName: 'Column B', field: 'b', type: 'rightAligned' },
    ]

However, if you just want the cells right-aligned and not the header:

columnDefs: [
        { headerName: 'Column A', field: 'a' },
        { headerName: 'Column B', field: 'b', cellClass: 'ag-right-aligned-cell' },
    ]

And if you want the header right-aligned and not the cells:

columnDefs: [
        { headerName: 'Column A', field: 'a' },
        { headerName: 'Column B', field: 'b', headerClass: 'ag-right-aligned-header' },
    ]

Brochure

Answer 3

Fairly straightforward...

var colDef = {
    name: 'No. Field',
    field: 'noField',
    cellStyle: function(params) {
        if (typeof params.value === 'number') {
            return {text-align: 'right'};
        } else {
            return null;
        }
    }
}

You can go through your entire set of your ColumDefinitions (ColDef) any apply that cellstyle to all your columns programmatically.

By the by, this comes from the official documentation of ag-grid (albeit somewhat changed)

Awe

I actually have code pasted in desc which used to work before i updated then it is not taking this style, I have updated my question – Muimuir

Answer 4

The above solutions didn't work for me. (In AG Grid 27)

What did work was using:

cellStyle: {justifyContent: "flex-end"},

Service

This is the only solution that worked in AG Grid 27 for me as well. – Mariahmariam

Answer 5

        cellStyle: { "direction": "rtl" }

Insert this in needed column definitions

Firstly

Answer 6

Combination of 2 answers above

Column definition

 <...>      
 {
    headerName: 'Foo',
    field: 'bar',
    type: 'rightAligned', // <----- that one
  },
 <...>      

Css

.ag-right-aligned-cell.ag-cell-value {
    justify-content: flex-end;
 }

Aquileia