Available options
Property |
Description |
width |
Set width of column (default: auto ) |
minWidth |
Set minimum with of column (default: auto ) |
textAlign |
Set text align (default: left ) |
visible |
Set visiblility of column (default: true ). We need to call gridOptions.refresh() on change visiblility. |
Code
<div ng-app="app" ng-controller="appCtrl">
<m-grid grid-options="gridOptions"></m-grid>
</div>
<script>
var app = angular.module('app', ['ui.bootstrap', 'm-grid']);
app.controller('appCtrl', function($scope) {
$scope.emailVisible = true;
$scope.gridOptions = {
columns: [{
name: '#',
field: 'id',
style: {
width: '10px',
textAlign: 'center'
}
}, {
name: 'Full name',
field: 'fullName',
style: {
minWidth: '200px'
}
}, {
name: 'Email',
field: 'email',
style: {
visible: true
}
}]
};
$scope.toggleEmailVisibility = function() {
$scope.emailVisible = $scope.gridOptions.columns[2].style.visible = !$scope.gridOptions.columns[2].style.visible;
$scope.gridOptions.refresh();
}
var data = [];
for (var i = 0; i < 10; i++) {
data.push({
id: (i + 1),
fullName: 'Name ' + (i + 1),
email: 'email' + (i + 1) + '@test.com'
})
}
$scope.gridOptions.data = data;