is there any way to align the cell text values to centre/right? Thank you.
Here is a plnkr basic example.
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.
Assign a class to the cell as below: gridOptions = { ... columnDefs: [ ... { headerName: "field1", field: "field1", cellClass: "grid-cell-centered"} ... ] }
Just like Excel, each column can be 'auto resized' by double clicking the right side of the header rather than dragging it. When you do this, the grid will work out the best width to fit the contents of the cells in the column.
To configure the column to have a checkbox, set colDef. headerCheckboxSelection=true . headerCheckboxSelection can also be a function, if you want the checkbox to appear sometimes (e.g. if the column is ordered first in the grid).
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With