AngularJS ngGrid text alignment

oblivion19 picture oblivion19 · Jul 23, 2013 · Viewed 36k times · Source

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

Here is a plnkr basic example.

Answer

bunting picture bunting · Jul 8, 2014

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.