Change dynamic column width on column resizing

shubhgupta2

Hi, I am using datatable 1.10.24 version along with datatabe extensions ColReorder 1.5.3, RowGroup 1.1.2, Select 1.3.3

$('#example').DataTable( {
        "columnDefs": columnDefs,
        "serverSide": true,
        "autoWidth": false,
        "scrollX": true,
        "scrollY": true,
        "pageLength": 300,
        "colReorder": true,
        "order": [1],   
        "bLengthChange" : false,
        "destroy": true,
        "scrollCollapse": true,
        dom: 'l<"toolbar">frtip',
        initComplete: function(){
             $('#example_wrapper .dataTables_scrollHead thead th').resizable({
                    handles: "e",
                    alsoResize: '#example_wrapper .dataTables_scrollHead table',
                    stop: function () {     
                    }
                });
           },
         "ajax": {
            "contentType": "application/json; charset=utf-8",
            "type": "POST",
            "dataType": "json",
            "url": "xyz",
        "data": function ( d ) { ... },
             "dataSrc": function (json) { ... }
    },
    },
    columns:{ columns...}
    } );

So, On resizing I am tring to update the column Defs width and redrawing it. However, table is not taking the updated width.

colin

This example from this thread is using Resizable too, maybe that would help. If no joy, 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

shubhgupta2

I have tried with the suggested approach.So, I am able to update the header width but cell width is not getting updated as you can see in my attached screen shot.

tangerine

Please link to a test case as Colin requested.

shubhgupta2

Hi,
I have created one example live.datatables.net/coqiwimi/145/edit

Here, I have drawn the table keeping server-side as true. I have received dummy data from the API which I overrode with my dataSet. On Column resizing in stop event I simply get the column cell Index and header width of that column and set the width in my respective column " .dataTables_scrollBody thead th".
however, It is working fine cell width is getting updated and scrollX is also getting enable. But, the issue is after resizing the column my sorting event gets fired due to which my table is redrawn, and the column size changes to the previous one.
I wanted to stop the sorting event while resizing the column headers. so that my table column resizing works properly and also sorting should work properly once my column resizing is done.

colin

You've duplicated threads - please don't do that as it wastes people's time!

Column resizing isn't supported within the DataTables code, so we'd expect there would be issues there. The code is open-source, so it would require changes to make it behave as you'd expect.

Colin