title: How to add a column at runtime in a grid using ui-grid
body: <p>Hello all fellow programmers,
   my requirement is to add a column in a grid at runtime or dynamically using ui-grid. I am able to achieve the same using a button, but what I want is to override the predefined functionality of the icon which in on the header of grid used for sorting and some predefined tasks(), I want add one more functionality there</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['ngAnimate', 'ui.grid']);
  
  app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
    $scope.columns = [{ field: 'name' }, { field: 'gender' }];
    $scope.gridOptions = {
      enableSorting: true,
      columnDefs: $scope.columns,
      onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
      }
    };
    
   
    
    $scope.add = function() {
      $scope.columns.push({ field: 'company', enableSorting: false });
    }
  
   
  
    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });
  }]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
    width: 500px;
    height: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;!doctype html&gt;
  &lt;html ng-app="app"&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/csv.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/release/ui-grid-unstable.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"&gt;
      &lt;link rel="stylesheet" href="main.css" type="text/css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="MainCtrl"&gt;
    Try clicking the Add button to add the company column.
    &lt;br&gt;
    &lt;br&gt;
    &lt;button id="button_add" class="btn" ng-click="add()"&gt;Add&lt;/button&gt;
    &lt;div id="grid1" ui-grid="gridOptions" class="grid"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>of adding a column there</p>