Removing thead breaks fixedColumns

Removing thead breaks fixedColumns

mwierengamwierenga Posts: 3Questions: 1Answers: 0

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?

Answers

  • colincolin Posts: 12,600Questions: 0Answers: 2,154

    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

  • colincolin Posts: 12,600Questions: 0Answers: 2,154

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

    Colin

  • mwierengamwierenga Posts: 3Questions: 1Answers: 0

    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.

  • allanallan Posts: 54,680Questions: 1Answers: 8,552 Site admin

    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

  • mwierengamwierenga Posts: 3Questions: 1Answers: 0

    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

Sign In or Register to comment.