Removing thead breaks fixedColumns
Removing thead breaks fixedColumns
mwierenga
Posts: 3Questions: 1Answers: 0
in FixedColumns
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?
This discussion has been closed.
Answers
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
May be use this as a starting point : http://live.datatables.net/paquzicu/1/edit
Colin
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 thethead, 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.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: hiddenand having empty header cells: http://live.datatables.net/vabiyijo/3/editAllan
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