Currently, I am utilizing datatables for my project.
- According to the datatables documentation found here, it suggests using the
columns.widthoption to manage column width. - However, when I implement
columns.widthand render the table, it seems to disregard this specified width and uses its own default width instead.
For reference, here is the JSFIDDLE link: https://jsfiddle.net/bababalcksheep/bvgu0cL3/28/
- In order to test the functionality, I have created 2 columns with lengthy strings.
- The name column contains a long string without spaces.
- While the description column consists of a long string with spaces.
- I attempted to assign a width of 200px to the name column.
My Questions Are:
What purpose does specifying
columns.widthserve if the table still decides on its width?Is there a way to successfully apply a 200px width to the name column and observe the changes in action?
JS Script:
$(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'
}],
});
});