title: Not able to set column width in angular datatables
body: <pre><code>var app = angular.module('tableTest', ['datatables']);
  app.controller('TableCtrl',function ($scope,$compile,DTOptionsBuilder, DTColumnBuilder) {
  $scope.showUpdateForm = function(code,reason,startTime,endTime,transactionGroup,geoGroup,transactionGroup) {
      $scope.$parent.code = code;
      $scope.$parent.reason = reason;
      $scope.$parent.startTime = startTime.split(' ')[1].substring(0,startTime.split(' ')[1].lastIndexOf(':'));
      $scope.$parent.endTime = endTime.split(' ')[1].substring(0,endTime.split(' ')[1].lastIndexOf(':'));
      $scope.$parent.startDate = startTime.split(' ')[0];
      $scope.$parent.endDate = endTime.split(' ')[0];
      $scope.$parent.transactionGroup = transactionGroup;
      $scope.$parent.geoGroup = geoGroup;
      $scope.$parent.group = transactionGroup;
      $scope.$parent.getGeographyList();
      $scope.$parent.getTransactionsList();
  
  }
  var vm = this;
  vm.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('ajax', {
       url: '&lt;some url&gt;',
       type: 'GET'
   })
   .withDataProp('data')
      .withOption('serverSide', true)
      .withOption('createdRow', function(row, data, dataIndex) {
          $compile(angular.element(row).contents())($scope);
      })
      .withOption('responsive', true).withOption('bAutoWidth', false)
      .withPaginationType('full_numbers');
  vm.dtColumns = [
      DTColumnBuilder.newColumn('group').withTitle('Group').withOption('bSortable',true),
      DTColumnBuilder.newColumn('startTime').withTitle('Start').withOption('bSortable',true),
      DTColumnBuilder.newColumn('endTime').withTitle('End').withOption('bSortable',true),
      DTColumnBuilder.newColumn('status').withTitle('Status').withOption('bSortable',true),
      DTColumnBuilder.newColumn('reason').withTitle('Reason').withOption('bSortable',true).withOption('sWidth', '20%'),
      DTColumnBuilder.newColumn('transactionGroup').withTitle('Transaction Group').withOption('bSortable',true),
      DTColumnBuilder.newColumn('geoGroup').withTitle('Geo Group').withOption('bSortable',true),
      DTColumnBuilder.newColumn('group').withTitle('Current Status').renderWith(function(data, type, full, meta) {
          var arr = full.endTime.split(/-|\s|:/);
          var endTime = new Date(arr[0], parseInt(arr[1])-1, arr[2], arr[3], arr[4], arr[5]);
          arr = full.startTime.split(/-|\s|:/);
          var startTime = new Date(arr[0], parseInt(arr[1])-1, arr[2], arr[3], arr[4], arr[5]);
          var currentTime = new Date();
          var color = ['#2196F3','#009688'];
          var currentStatus = ['INACTIVE','ACTIVE']
          var index;
          if(startTime.getTime() &lt;= currentTime.getTime() &amp;&amp; currentTime.getTime() &lt;= endTime.getTime()) {
              index = 1;
          } else {
              index = 0;
          }
          return '&lt;span style="background : '+color[index]+';color: #FFF;font-weight: 500;" class="currentStatus"&gt; &amp;nbsp;&amp;nbsp;'+currentStatus[index]+'&amp;nbsp;&amp;nbsp; &lt;/span&gt;';
      }).notSortable(),
      DTColumnBuilder.newColumn('code').withTitle('').notSortable().renderWith(function(data, type, full, meta) {
          return '&lt;div class="btn-group" &gt; &lt;label class="btn btn-primary"&gt;&lt;input type="radio" name="blockedTransaction" ng-click="showUpdateForm(\''+full.code+'\',\''+full.reason+'\',\''+full.startTime+'\',\''+full.endTime+'\',\''+full.transactionGroup+'\',\''+full.geoGroup+'\',\''+full.transactionGroup+'\')" ng-model="blockedTransaction" data-toggle="modal" data-target="#updateForm" data-whatever="@getbootstrap" &gt;EDIT&lt;/label&gt;&lt;/div&gt;';
      })
  ];});
  </code></pre>
  
  <p>The above code is my table controller. The problem is that I am not able to set the column width. When there is a lot of data for a column, the table resizes and it goes out of its page. What is wrong in the code. What is right key value pair to be put in "withOption" so that it sets the width of the column properly. 
  <a href="https://datatables.net/" rel="nofollow noreferrer">Link to Datatables plugin</a> and
  <a href="http://l-lin.github.io/angular-datatables/" rel="nofollow noreferrer">Link to Datatables + Angular plugin</a></p>
  
  <p><img src="https://i.stack.imgur.com/zkLK8.png" alt="enter image description here"> </p>