jQuery DataTables column.width option not working as expected

Question

I am using datatables

1. as per documentation, it says to use columns.width option to control column width
2. when I use columns.width

Answer 1

The width property is merely useful for overall relative widths. In your case you also have a word-wrap issue. Define a CSS class and apply it to the column:

.px200 {
  width: 200px;
  max-width: 200px;
  word-wrap: break-word;
}

columns: [{
  data: 'name',
  title: 'Long Name Issues',
  className: 'px200', //<----
  render: function(data) {
    return  '<span class="">'+ data + '</span>';
  }
}

updated fiddle -> https://jsfiddle.net/bvgu0cL3/30/

Since you are wrapping the content into a <span> you might consider adding a class to that <span> instead of the <th> and <td>'s which className does.

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

Answer 2

Based on answer from @davidkonrad Here is alternate approach.

UPDATE: I created a plugin which applies defined css in columns dataTables.colStyle.js

usage:

// init
$('#example').DataTable({
  columnStyle: true // init plugin
});
// use in columns like this
columns: [{
  data: 'name',
  title: 'Name',
  css: {
    'width': 200,
    'min-width': 200,
    'word-wrap': 'break-word',
    'max-width': 200,
  }
}]

Pros:

1. It uses column.width option and applies css instead of classes
2. No need to define ```classes
3. uses createdRow callback to do automation
4. Column titles are always in one line , meaning they will not stretch in height if table width is too small
5. Minimum width of column is always what is required to keep column titles in one line. If you provide width of 50px to a column , it will still stretch so that title is in one line even if it has to exceed given width of 50px

working Fiddle: https://jsfiddle.net/bababalcksheep/bvgu0cL3/42/

More suggestions are required to make it more elegant

CSS:

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

JS:

  var table = $('#example').DataTable({
     "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);
        var columnIndex = tableApi.column(this).index();
        //var columnIndex = tableApi.cell(this).index().column; 
        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'
          });
        }
      });
    },
  });