Angular datatables with filter column width

Question

I tried to set the column width in angular datatables with filters. But the column width has not changed.

I try to follow

var columnsSpecification = [ { type: 'text', bRegex: true, bSmart: true }, { type: 'text', bRegex: true, sWidth:"90px"}]; $scope.dtOptions = DTOptionsBuilder.newOptions() .withBootstrap() .withOption('scrollX', '700%') .withOption('scrollY', height + 'px') .withOption('oLanguage', { "sEmptyTable": " " }) .withOption('lengthMenu', [[-1, 1000, 100, 50, 25, 10], ['All', 1000, 100, 50, 25, 10]]) .withOption('paging', false) .withOption('bInfo',false) .withColumnFilter({ aoColumns:columnsSpecification }) .withTableTools('/Content/DataTables/swf/copy_csv_xls.swf') .withTableToolsButtons(['xls']); 

In the html file, I tried this:

  <table id="table-machines" datatable="ng" class="table table-striped" dt-options="dtOptions"> <thead> <tr> <th>Name</th> <th style="width: 90px !important">Value</th> </tr> </thead> <tbody> <tr ng-repeat="m in records> <td>{{m.name}}</td> <td style="width: 90px !important">{{m.Value}}</td> </tr> </tbody> 

But the value of the column is different zise, ​​and I am configured.

I found that if there is no filter, everything is fine.

How to set table width and save filters?

Answer 1

 vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID').withOption('width', '5%') ]; 

Answer 2

You need to define the width option in your columnDefs option:

 vm.dtColumnDefs = [ DTColumnBuilder.newColumn(1).withOption('width', '90px') ]; 

See an example .

Answer 3

Finally, I found a solution that avoids matching the column names of the datatables bootstrap columns:

 $scope.dtOptions = DTOptionsBuilder.newOptions() .withOption('autoWidth', false) 

It was as simple as setting this name and setting it to false ... but it does not seem to be available in the API :(