Version: AngularJS 1.6.4, angular-datatables 0.5.6
Question: Not being able to change column width with
.withOption('width', '20%')
I have looked through most of the SO questions but still haven't found the answers for it.
Here is my sample code:
JS:
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('paging', false)
.withOption('bInfo', false)
.withOption('searching', false)
.withScroller().withOption('scrollY', 300)
.withOption('responsive', true)
.withOption('scrollX', true)
.withOption('scrollCollapse', true)
.withOption("rowCallback", rowCallback)
.withOption('autoWidth', true);
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).notSortable(),
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(2),
DTColumnDefBuilder.newColumnDef(3),
DTColumnDefBuilder.newColumnDef(4),
DTColumnDefBuilder.newColumnDef(5).notSortable(),
DTColumnDefBuilder.newColumnDef(6).notSortable(),
DTColumnDefBuilder.newColumnDef(7).notSortable(),
DTColumnDefBuilder.newColumnDef(8).notSortable().withOption('width', '20%'),
DTColumnDefBuilder.newColumnDef(9).notSortable(),
DTColumnDefBuilder.newColumnDef(10).notSortable(),
DTColumnDefBuilder.newColumnDef(11).notSortable(),
DTColumnDefBuilder.newColumnDef(12).notSortable(),
DTColumnDefBuilder.newColumnDef(13).notSortable()
];
HTML:
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="hover">
<thead>
<tr>
<th><!--14 headers here--></th>
</tr>
</thead>
<tbody>
<tr>
<td><!--14 data cells here--></td>
</tr>
</tbody>
</table>
I have confirmed that most of the dtOptions withOption are working fine except
.withOption('autoWidth', true);
In dtColumnDefBuilder,
.notSortable()
is working fine too but not the
.withOption('width','20%')
Things I have tried:
- Setting inline style width for the table header
- comment out dtOptions .withOption() to check
Thanks for helping