Set column (max) width
Set column (max) width
musium
Posts: 11Questions: 5Answers: 0
I'm looking for a way to set the max width or width of a single column in a DataTable.
I tried "columnDefs width" but this did not affect the width of the column.
This is the configuration of DataTables I'm using: https://datatables.net/download/#bs5/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/b-print-2.0.1/cr-1.5.4/r-2.2.9
Maybe "columnDefs " does not work with the Responsive plugin?
Is there another way to set the max-width or width of a column.
How my table currently looks (the last column is far too wide):
The code used to create the table:
{
"language": {
"aria": {
"sortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
},
"emptyTable": "Keine Daten vorhanden",
"info": "_START_ bis _END_ von _TOTAL_ Einträgen",
"infoEmpty": "0 bis 0 von 0 Einträgen",
"infoFiltered": "(gefiltert von _MAX_ Einträgen)",
"lengthMenu": "_MENU_ Einträge anzeigen",
"loadingRecords": "Wird geladen...",
"paginate": {
"first": "Erste",
"last": "Letzte",
"next": "Nächste",
"previous": "Zurück"
},
"processing": "<div class='processingWrapper hidden-print'><i class='far fa-spinner fa-spin'></i><p>Bitte warten...</p></div>",
"search": "Suchen",
"zeroRecords": "Keine Einträge vorhanden.",
"thousands": ".",
"infoPostFix": "",
"decimal": ""
},
"stateSave": true,
"stateDuration": 604800,
"lengthMenu": [
[
10,
20,
50,
100,
500
],
[
"10",
"20",
"50",
"100",
"500"
]
],
"pageLength": 10,
"processing": true,
"responsive": true,
"ajax": {
"url": "/AdvertisementCampaign/GetAtmGroupsOfCampaign?advertisementCampaignId=4",
"type": "POST"
},
"columns": [
{
"name": "Id",
"orderable": false,
"visible": true,
"responsivePriority": 10000,
"render":renderIdColumn,
"useAsGroupingColumn": false,
"data": "Id",
"searchable": false
},
{
"name": "Name",
"orderable": true,
"visible": true,
"responsivePriority": 10000,
"useAsGroupingColumn": false,
"data": "Name",
"searchable": true
},
{
"name": "Description",
"orderable": true,
"visible": true,
"responsivePriority": 10000,
"useAsGroupingColumn": false,
"data": "Description",
"searchable": true
}
],
"serverSide": true,
"order": [
[
1,
"asc"
]
],
"dom": "<'dt-toolbar'<'container-fluid'<'row'<'col-xs-12 col-sm-6 col-md-3 dataTableToolBarLeft hidden-print'l><'col-xs-12 col-sm-6 col-md-9 hidden-print dataTableToolBarRight'BT>>>>tr<'dt-toolbar-footer'<'container-fluid'<'row'<'col-md-4 col-lg-4 d-none d-md-block'i><'col-sm-12 col-md-8 col-lg-8 hidden-print pull-right'p>>>>",
"buttons": {
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"buttons": [
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "Drucken",
"extend": "print",
"className": "btn-outline-primary dt-btn-action d-none d-md-block",
"autoClose": true,
"exportOptions": {
"columns": ":visible.export",
"format": {
"header":window.LsDataTables.getColumnTitle
}
},
"orientation": "landscape",
"pageSize": "LEGAL"
},
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "Kopieren",
"extend": "copyHtml5",
"className": "btn-outline-primary dt-btn-action",
"autoClose": true,
"exportOptions": {
"columns": ":visible.export",
"format": {
"header":window.LsDataTables.getColumnTitle
}
},
"orientation": "landscape",
"pageSize": "LEGAL"
},
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "Exportieren",
"extend": "collection",
"className": "btn-outline-primary dt-btn-action",
"autoClose": true,
"orientation": "landscape",
"pageSize": "LEGAL",
"buttons": [
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "CSV",
"extend": "csvHtml5",
"className": "btn-outline-primary",
"autoClose": true,
"exportOptions": {
"columns": ":visible.export",
"format": {
"header":window.LsDataTables.getColumnTitle
}
},
"orientation": "landscape",
"pageSize": "LEGAL"
},
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "Excel",
"extend": "excelHtml5",
"className": "btn-outline-primary",
"autoClose": true,
"exportOptions": {
"columns": ":visible.export",
"format": {
"header":window.LsDataTables.getColumnTitle
}
},
"orientation": "landscape",
"pageSize": "LEGAL"
}
]
},
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"extend": "reload",
"className": "btn-outline-primary dt-btn-action",
"autoClose": true,
"orientation": "landscape",
"pageSize": "LEGAL"
}
]
}
}
This question has an accepted answers - jump to answer
Answers
Yep,
columns.widthis the way to go - it should be fine with Responsive. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.Cheers,
Colin
THanks for your response.
I did some more testing. While columnDefs was not working column.width works.
Similar issue here, but also columns.width not working with DT 1.13.8. I've also disabled the responsive flag, but nothing changes.
If you post a link to a test case I can take a look. I should note though that DataTables 1.x is considered legacy now and generally is no longer supported (you have an Editor license though, so I'm happy to take a look and see if there is something obvious going on!)
Allan
You are rigth, but moving to v2 will be done later
For now I was able to add a class to the column via the API columns.className and then add this CSS rules to that class:
This solved the issue for me!
Awesome - good to hear you found a solution
Allan