Angular datatables with filter column width

Question

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

I try following

   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 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 Value column another zise rather I setted.

I'v found, that if there is not filter - all fine.

How can I set table width and preserve filters?

Try adding .withOption('autoWidth', false).

Gyrocode.com
– Gyrocode.com

2015-09-08 20:08:57 +00:00
Commented Sep 8, 2015 at 20:08 — Gyrocode.com
– Gyrocode.com, Commented Sep 8, 2015 at 20:08
I'v tryed it, it still not working.

Michael Lin
– Michael Lin

2015-09-09 03:14:41 +00:00
Commented Sep 9, 2015 at 3:14 — Michael Lin
– Michael Lin, Commented Sep 9, 2015 at 3:14
For me neither, is there a bug in the new version?

K.C.
– K.C.

2016-01-22 08:28:28 +00:00
Commented Jan 22, 2016 at 8:28 — K.C.
– K.C., Commented Jan 22, 2016 at 8:28

Haseena P A · Accepted Answer · 2016-05-26 13:44:46Z

9

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

edited May 26, 2016 at 13:44

answered May 26, 2016 at 13:43

Haseena P A

17.4k5 gold badges21 silver badges35 bronze badges

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

Comments

l-lin · Accepted Answer · 2015-09-09 15:27:24Z

0

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

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

See this example.

answered Sep 9, 2015 at 15:27

l-lin

1,0751 gold badge11 silver badges20 bronze badges

Comments

Ignacio Ara · Accepted Answer · 2018-01-18 09:29:30Z

0

Finally I've found the solution for avoiding datatables overwrite bootstrap columns width definitions:

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

It was as easy as put that name and set to false... but it in the API doesn't appear to be available :(

answered Jan 18, 2018 at 9:29

Ignacio Ara

2,5702 gold badges28 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular datatables with filter column width

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related