Removing thead breaks fixedColumns

mwierenga

Link to test case:
Tried to create an example, but the fixedColumn CDN wasn't being applied.

Debugger code (debug.datatables.net):

$('#example').DataTable( {
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: {
        heightMatch: 'auto'
    },
    order: [],
    searching: false,
    info: false,
    targets: 'no-sort',
    bSort: false,
    drawCallback: function( settings ) {
        $('.example thead').remove();
    }
} );

Error messages shown:
No errors

Description of problem:
I have a fixed left column, but I also want to remove the thead. If I do that using drawCallback or even preDrawCallback, the the left column is no longer fixed. Any ideas or suggestions?

colin

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

colin

May be use this as a starting point : http://live.datatables.net/paquzicu/1/edit

Colin

mwierenga

Colin,
Thanks for the starting point. Not sure why I wasn't able to get it working in JS Fiddle or Codepen, but JS Bin worked.

Here's my example: http://live.datatables.net/vabiyijo/1/edit

In my drawCallback, I remove the thead, which is successful. But once that happens, the left column is no longer fixed. I'd like to both remove the header row and maintain the fixed column.

You can see I also tried setting the header row to display: none; but that also breaks the fixed column.

allan

I don't think there is going to be a good way to remove the header completely I'm afraid - it just wasn't designed for that. However, there is a way to visually remove it - but setting the CSS for the header to visibility: hidden and having empty header cells: http://live.datatables.net/vabiyijo/3/edit

Allan

mwierenga

Allan,
I really appreciate that answer. I've tried so many things, but using CSS was the only thing that worked, though it obviously seems hacky.

Yes, you're solution definitely works, thank you!

Micah