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?

@Ekta 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. — Matt Nienow, Oct 08 '20 at 16:26

score 19 · Answer 1 · answered Dec 23 '20 at 09:29

19

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.

answered Dec 23 '20 at 09:29

NicuVlad

2,491
3
28
47

For me did not work. Had to use cellStyle. Solution founded here: https://github.com/ag-grid/ag-grid/issues/1334#issuecomment-339816232 – Lukas Coorek Jul 22 '22 at 09:14
@LukasCoorek what ag-grid version do you use? It should work because it's from the official documentation – NicuVlad Aug 07 '22 at 09:58
1

For me its working fine. – KARTHIKEYAN.A Aug 07 '22 at 10:07
@NicuVlad version 24 – Lukas Coorek Aug 22 '22 at 14:20
@LukasCoorek I guess you need to update – NicuVlad Aug 23 '22 at 05:07
This doesn't work if you are using a custom theme – dota2pro Sep 02 '22 at 15:59

score 13 · Answer 2 · answered Aug 10 '21 at 14:37

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' },
    ]

score 6 · Answer 3 · answered Sep 25 '20 at 09:47

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)

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 — Ekta, Sep 25 '20 at 09:53

score 4 · Answer 4 · answered Oct 10 '22 at 17:18

4

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

What did work was using:

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

answered Oct 10 '22 at 17:18

Ben in CA

688
8
22

This is the only solution that worked in AG Grid 27 for me as well. – walker2287 Oct 12 '22 at 13:57

score 0 · Answer 5 · answered Jul 10 '23 at 03:25

0

        cellStyle: { "direction": "rtl" }

Insert this in needed column definitions

answered Jul 10 '23 at 03:25

fazal chaudhari

1

score -1 · Answer 6 · answered Jan 17 '23 at 13:35

-1

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;
 }

answered Jan 17 '23 at 13:35

Pipo

4,653
38
47

How to right align text in ag-grid for number

6 Answers6

Combination of 2 answers above

Column definition

Css