Angularjs angular datatables changing column width on DTColumnDef

Question

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

score 2 · Accepted Answer · answered Jan 05 '18 at 12:52

You must declare an explicit CSS class if you want to overrule the defaults and DT's assumptions. autoWidth is more or less useless, imho. Example :

.td-small {
  width: 40px;
  max-width: 40px;
}

DTColumnDefBuilder
 .newColumnDef(8)
 .notSortable()
 .withClass('td-small')

You can combine classes, i.e .withClass('classA classB classC')

Even though the documentation talk about percentages it only works in very narrow scenarios where you set all columns to have a specific percentage and set the containers to have fixed widths as well, like 900px. 20% of "undefined" does not compute. Another typical example I can find in my projects is long content you need shrink with an ellipsis :

.td-200-ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

If you want extreme control over the column widths, beyond DataTables scope see this answer -> jQuery DataTables fixed size for ONE of the columns?

Angularjs angular datatables changing column width on DTColumnDef

1 Answers1