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

enter image description here

l-lin · Accepted Answer · 2015-03-25 15:38:08Z

5

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;
}

answered Mar 25, 2015 at 15:38

l-lin

1,0751 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manish sharma Over a year ago

not working in angular datatable. so please add another option

Collectives™ on Stack Overflow

Not able to set column width in angular datatables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related