4

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 and render table, it ignores this width and uses its own width

JSFIDDLE: https://jsfiddle.net/bababalcksheep/bvgu0cL3/28/

  1. I am using 2 columns with long strings to test if i an apply width to it
  2. column name has long string without spaces
  3. column description has long string with spaces
  4. I am trying to apply width 200px to name column

Question:

  1. what is the point of this columns.width if table will still enforce its own width

  2. how can I apply width 200px to name column and see it in action ?

JS:

$(document).ready(function() {
  var table = $('#example').DataTable({
    'autoWidth': false,
    'scrollX': 'true',
    'scrollY': 300,
    'scrollCollapse': true,
    columns: [{
      data: 'name',
      title: 'Long Name Issues',
      width:'200px',     
      render: function(data) {
        return  '<span class="">'+ data + '</span>';
      }
    }, {
      data: 'position',
      title: 'Position'
    }, {
      data: 'description',
      title: 'Long Description Issues',
      width:450,
      render: function(data) {
        return data;
      }
    }, {
      data: 'salary',
      title: 'salary May have Big Title'
    }, {
      data: 'age',
      title: 'age'
    }],
    data: [{
      name: 'DavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavid',
      position: 'CTO',
      description: 'CTO',
      salary: '1000',
      age: '44'
    }, {
      name: 'John',
      position: 'tech',
      description: 'description',
      salary: '1000',
      age: '22'
    }, {
      name: 'Amber',
      position: 'CEO',
      description: 'SOME long description with spaces SOME long description with spaces',
      salary: '1000',
      age: '45'
    }],
  });

});
Improve this question

2 Answers 2

Reset to default
7

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?

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

4 Comments

thank you for the detailed answer. As it seems witdth option is useless.
However in my case , I want widths to applied by user preference. User wants to define a column width. In this case , i cant use className , so i was thinking perhaps I could use createdRow and for given width I could apply css to td with { width: 200px; max-width: 200px; word-wrap: break-word;}
jsfiddle.net/bababalcksheep/bvgu0cL3/39/show i added min-width: 200px; to class and applied class to all columns. with bigger screen , table violates max-width:200 px can you please explain for this behavior
@django, DT also tend to set a calculated width on the entire table, based on the container width. To control the overall width set the *_wrapper width, i.e #example_wrapper { width: 800px; } or similar jsfiddle.net/bvgu0cL3/48/show. Also notice you are using bootstrap, that injects classes like col-sm-12 etc, so the table is actually designed to fit the entire container. But yes, tables is in general somehow annoying, not just DT, does not behave like all the other block elements. And I agree, autoWidth and columns.width in DT is more or less useless.
4

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'
          });
        }
      });
    },
  });
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.