Not able to set column width in angular datatables

Question

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: '<some url>',
     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() <= currentTime.getTime() && currentTime.getTime() <= endTime.getTime()) {
            index = 1;
        } else {
            index = 0;
        }
        return '<span style="background : '+color[index]+';color: #FFF;font-weight: 500;" class="currentStatus"> &nbsp;&nbsp;'+currentStatus[index]+'&nbsp;&nbsp; </span>';
    }).notSortable(),
    DTColumnBuilder.newColumn('code').withTitle('').notSortable().renderWith(function(data, type, full, meta) {
        return '<div class="btn-group" > <label class="btn btn-primary"><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" >EDIT</label></div>';
    })
];});

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. Link to Datatables plugin and Link to Datatables + Angular plugin

Answer 1

Since your test is using a long word without any space, you will need to use the word-break. See this pen for example:

.dataTable td {
    word-break: break-all;
}