AngularJS ngGrid text alignment

Question

is there any way to align the cell text values to centre/right? Thank you.

Here is a plnkr basic example.

Kantianism

Answer 1

As per oblivion19's comment, here is an example solution (with a little more context) by setting the cellClass property of a columnDefs object in gridOptions:

HTML:

<div ng-grid="gridOptions"></div>

JS:

$scope.someData = [{ "name": "MB", "age": 20 }, { "name": "KY", "age": 22 }];
$scope.gridOptions = {
    data: 'someData',
    columnDefs: [{
        field: 'name',
        displayName: 'Name',
        cellClass: 'grid-align'
     }, {
        field: 'age',
        displayName: 'Age'
    }]
};

CSS:

.grid-align {
    text-align: center;
}

Note that this solution only makes some columns centered (i.e., the ones with cellClass specified). To make all columns centered, simply add class="grid-align" to the ng-grid div instead.

Outgoings

Much easier than templating just for alignment and powerful too – Damek

Answer 2

Yes there is. You want to use the row or cell template. It is defined on the columnDefs in the controller where you set up the ng-grid.

columnDefs: [{field: 'name', displayName: 'Name'},
                 {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{green: row.getProperty(col.field) > 30}"><div style="text-align:center;"  class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
    };

I have an update Plunker below that has the columns aligned to the center.

Plunker

Strahan

Thanks for your help mate. I found that I could add cellClass to the column, and style that class with text-align. But your method works as well. Cheers! – Kantianism

I really think oblivion's answer is the best solution here. No need to have a template just to set display properties. – Deli