Data Table with hidden columns dont render properly

getalex

I saw some posts complaining about this but couldn't find an answer.
I have a data table that shows 3 out of 5 columns for example:

var dt = $('#dataTable').DataTable({
    columns: [
        { data: null, defaultContent: '', orderable: false, className: 'details-control' },
        { data: 'Id', title: Item ID' },
        { data: 'BarcodeId', title: 'Barcode ID' },
        { data: 'Title', visible: false },
        { data: 'Label', visible: false }
    ],
    order: [1, 'asc']
});

So when this table draws I see the rows are a bit wider than the header and footer - and worst, if I resize the window, the table stays fixed at whatever width it was set to on initial render (imagine going to smaller screen gives you a wide table, and larger window leaves a tiny table). This appears to be reproducible anywhere I have 'visible: false' in a column.

How to handle this?! Thanks in advance.

kthorngren

Having visible false for a couple columns seems to work here:
http://live.datatables.net/docobaqo/1/edit

First I would check to see if style="width:100%" is configured on the table tag. If the table is hidden when Datatables is initialized you might need to use columns.adjust() to recalc the column widths when displaying the table.

If neither of those help please build a test case showing the issue.

Kevin

colin

And here it works too, so as Kevin says, if this persists, please link to a test case so we can take a nose, CSS is always tricky to diagnose without seeing.

Cheers,

Colin

getalex

The table isn't hidden at any point, and width isn't set up in the table tag but it is set up in the parent div as follows:

<div style="width:85%">
    <table id="theTable" class="display order-column row-border hover stripe" cellspacing="0"></table>
</div>

I haven't had any luck with the columns.adjust() API … no change with/without - the instance is 'dt' and even wiring a button to call 'dt.columns.adjust()' doesn't fix it. I'll try to put together a live demo, this is an ajax table by the way, if that's the issue.

kthorngren

Using style="width:100%" on the table tag helps Datatables calculate column width. I suggest trying it to see if it helps.

Kevin

getalex

Kevin - that did it for me, I set the width to 100% on the table w/ hidden columns and all the resizing magically started happening. thanks!

markskayff

Yeah, I had this issue today 2019/12/10. Looks like it gets fixed by adding style="width:100%" to the <table> element.