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;