Set column (max) width

musium

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"
            }
        ]
    }
}

colin

Yep, columns.width is 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

musium

THanks for your response.
I did some more testing. While columnDefs was not working column.width works.

unibocconi-ltcc

Similar issue here, but also columns.width not working with DT 1.13.8. I've also disabled the responsive flag, but nothing changes.

allan

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

unibocconi-ltcc

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:

    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;

This solved the issue for me!

allan

Awesome - good to hear you found a solution

Allan