datatables.net column.width

https://stackoverflow.com/questions/48320337/jquery-datatables-column-width-option-not-working-as-expected

by Martin Murciego

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.4.1/js/dataTables.colReorder.min.js"></script>

<table id="example" class="table table-striped table-bordered" cellspacing="0"></table>

CSS

body {
  font-size: 140%;
  padding: 1em;
}

/* keep the damn titles in one line*/
.dataTable thead td,
.dataTable thead th {
  white-space: pre;
}

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({
    'autoWidth': false,
    'scrollX': true,
    'scrollY': 300,
    'scrollCollapse': true,
    colReorder: {
      order: [0, 1, 2, 3, 4]
    },
    "createdRow": function(row, data, index) {
      var tableApi = this.api();
      var columns = tableApi.settings().init().columns;
      var tds = $(row).find('td');
      tds.each(function(index) {
        var $td = $(this);
        // question:
        // which is better way to get columnIndex
        // considering oredring pluign is active and 
        // some cols are hidden and ordered as well
        var columnIndex = tableApi.column(this).index();
        //var columnIndex = tableApi.cell(this).index().column; 
        //var columnIndex  = tableApi.column($(this).index() + ':visIdx').index();
        //
        var hasWidth = columns[columnIndex].width;
        if (hasWidth) {
          $td.css({
            'width': hasWidth,
            'max-width': hasWidth,
            'min-width': hasWidth,//will enforce fixed width, skip if not required
            'word-wrap': 'break-word'
          });
        }
        //
      });
    },
    columns: [{
      data: 'name',
      title: 'Long Name Issues',
      width: 200,
      render: function(data) {
        return '<span class="">' + data + '</span>';
      }
    }, {
      data: 'position',
      title: 'Position',
      visible: false
    }, {
      data: 'description',
      width: 300,
      title: 'Long Description Issues',
      render: function(data) {
        return data;
      }
    }, {
      data: 'salary',
      title: 'salary May have Big Title',
       width: 150, // wont work , since titles have to be in one line so minimum width is always the title width
    }, {
      data: 'age',
      title: 'age'
    }],
    data: [{
      name: 'DavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavid',
      position: 'CTO',
      description: 'CTO',
     ...