Data Table with hidden columns dont render properly

Data Table with hidden columns dont render properly

getalexgetalex Posts: 39Questions: 11Answers: 1

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • getalexgetalex Posts: 39Questions: 11Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

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

    Kevin

  • getalexgetalex Posts: 39Questions: 11Answers: 1

    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!

  • markskayffmarkskayff Posts: 1Questions: 0Answers: 0
    edited December 2019

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

This discussion has been closed.