autoWidth not working as expected

holidaybows

I have a data table with 62 columns. These columns are grouped by applying a class to the header cells. Subsequent to initializing the DataTable and setting autoWidth to 'false' I hide all but one group by changing the class property

Unfortunately the table is sizing like all 62 columns are visible and it is calculating table widths and column widths as fixed values that are larger than the enclosing div and view port. If I specify all but one column width, the first n-1 will size properly, but the last one will size to the table extents which is quite large.

What am I doing wrong?

This is an internal application so I don't have a link. Debug link is here https://debug.datatables.net/akebov

Clips of the datatable code is here..

                var table = $('#products').DataTable( {
                    autoWidth: false,
                    scrollY:        "660px",
                    serverSide: true,
                    dom: '<"#example_header"fB<"top"<"newline clear">i<"newline clear">l>>rtip',
                    lengthMenu: [ [25,5, 10, 25, 50,100,-1], [25, 5, 10, 25, 50, 100, "All"] ],
                    ajax: {url: "product_editor.php", type: "POST"},
                    columns: [
                        { data: "products.products_model", type: "html"},
            ...
            ...
                        { data: "products_details.group_name"}
                    ],
                    columnDefs: [
                        { "width": "100px", "targets": 0 },
                        { "width": "150px", "targets": 1 },
                        { "className": "j-right", width: "75px", "targets": 2 },
                        { "className": "j-right", width: "75px", "targets": 3 },
                        { "className": "j-right", width: "75px", "targets": 4 },
                        { "className": "j-center", width: "75px","targets": 5 },
                        { "className": "j-center", "targets": 6 }
                    ],
                    order: [ 0, 'asc' ],
                    select: true,
                    buttons: [
                        { extend: "create", editor: editor },
                        { extend: "edit",   editor: editor },
                        { extend: "selected", text: 'Duplicate', action: function ( e, dt, node, config ) {
                            // Start in edit mode, and then change to create
                            editor
                                .edit( table.rows( {selected: true} ).indexes(), { title: 'Duplicate record', buttons: 'Create from existing'} )
                                .mode( 'create' );
                            }
                        },
                        { extend: "remove", editor: editor },
                        { extend: 'collection', text: 'Export', buttons: ['copy','excel','csv','pdf','print']}
                    ]
                    
                } );
                table.columns( '.DGtwo' ).visible( false );
                table.columns( '.DGdesc' ).visible( false );
                table.columns( '.DGpack' ).visible( false );
                table.columns( '.DGprod' ).visible( false );
                table.columns( '.DGpurch' ).visible( false );
                table.columns( '.DGattr1' ).visible( false );
                table.columns( '.DGattr2' ).visible( false );
                table.columns( '.DGattr3' ).visible( false );
                table.columns( '.DGattr4' ).visible( false );
                table.columns( '.DGother' ).visible( false );
                $("input[name='groupDisplay']").click(function() {
                    if ($("#DGone").is(":checked")) table.columns( '.DGone' ).visible( true );
                    else table.columns( '.DGone' ).visible( false );
                    if ($("#DGtwo").is(":checked")) table.columns( '.DGtwo' ).visible( true );
                    else table.columns( '.DGtwo' ).visible( false );
                    if ($("#DGdesc").is(":checked")) table.columns( '.DGdesc' ).visible( true );
                    else table.columns( '.DGdesc' ).visible( false );
                    if ($("#DGpack").is(":checked")) table.columns( '.DGpack' ).visible( true );
                    else table.columns( '.DGpack' ).visible( false );
                    if ($("#DGprod").is(":checked")) table.columns( '.DGprod' ).visible( true );
                    else table.columns( '.DGprod' ).visible( false );
                    if ($("#DGpurch").is(":checked")) table.columns( '.DGpurch' ).visible( true );
                    else table.columns( '.DGpurch' ).visible( false );
                    if ($("#DGattr1").is(":checked")) table.columns( '.DGattr1' ).visible( true );
                    else table.columns( '.DGattr1' ).visible( false );
                    if ($("#DGattr2").is(":checked")) table.columns( '.DGattr2' ).visible( true );
                    else table.columns( '.DGattr2' ).visible( false );
                    if ($("#DGattr3").is(":checked")) table.columns( '.DGattr3' ).visible( true );
                    else table.columns( '.DGattr3' ).visible( false );
                    if ($("#DGattr4").is(":checked")) table.columns( '.DGattr4' ).visible( true );
                    else table.columns( '.DGattr4' ).visible( false );
                    if ($("#DGother").is(":checked")) table.columns( '.DGother' ).visible( true );
                    else table.columns( '.DGother' ).visible( false );
                });
            } );```

HTML here...

```        <table cellspacing="0" style="width:1000px; margin:5px"><tr><td>
        <table id="products" class="display" cellspacing="0" style="width:100%; table-layout:fixed; word-wrap:break-word;">
        <thead><tr>
            <th>SKU</th>
            <th>OLD SKU</th>
        
            <th class="DGone">Field</th>    ...
            <th class="DGone">Field</th>
            
            <th class="DGtwo">Field</th>...
            <th class="DGtwo">Field</th>
                    
            <th class="DGdesc">Field</th>...
            <th class="DGdesc">Field</th>
            
            <th class="DGpack">Field</th>...
            <th class="DGpack">Field</th>
                    
            <th class="DGprod">Field</th>...
            <th class="DGprod">Field</th>
        
            <th class="DGpurch">Field</th>...
            <th class="DGpurch">Field</th>
        
            <th class="DGattr1">Field</th>...
            <th class="DGattr1">Field</th>
        
            <th class="DGattr2">Field</th>...
            <th class="DGattr2">Field</th>
        
            <th class="DGattr3">Field</th>...
            <th class="DGattr3">Field</th>
        
            <th class="DGattr4">Field</th>...
            <th class="DGattr4">Field</th>
        
            <th class="DGother">Field</th>...
            <th class="DGother">Field</th>
        
        </tr></thead>
        <tbody>
        </tbody></table>
        
        </td></tr></table>

allan

Column widths are a bit of a nightmare! Its not going to be easy to debug without seeing a test case I'm afraid. Generally I would not recommend disabling the autoWidth option, particularly with scrolling enabled.

Given that you initialise the table and then immediately hide columns using the API, could you instead hide them during initialisation using columns.visible?

Allan

holidaybows

Thanks Allan! Excellent tool and excellent advice! Using columns.visible worked like a charm.

Window resizing does not seem to work properly when shrinking a window, but when increasing a window, the columns do resize to fit the view port. This is not a problem for my application, I just figured I would note it here.

After hiding or making visible I also tested using

table.columns.adjust().draw();

...which seems to have no effect.

I also do not notice any difference in autoWidth as true or false.