How to use the fixed header javascript extension
How to use the fixed header javascript extension
Ivy13
Posts: 3Questions: 2Answers: 0
Hi, and thank you for the awesome plugin.
I am stuck on something that I am sure is really simple but I cannot find the answer in the documentation or any online posts.
I can't figure out to use a DataTables extension to Tablepress?
TablePress is installed and working on my site.
I have installed and activated TablePress Extension: DataTables FixedHeader.
But I can't see how to activate the fixed header.
I have tried entering code in the Custom Commands box, but I don't know what form it should take because I cannot find any examples for the Custom Commands box, all I can find is this documentation linked to from the edit table page. I have tried this:
$('#tablepress-1').DataTable( {
fixedHeader: true
} )
That gives me an error 'unexpected string'.
I have tried this:
"fixedHeader": "true"
There is no error but my table is not changed.
And this, which also generates an error:
$(document).ready(function() {
$('#tablepress-1').DataTable( {
fixedHeader: true
} );
} );
I have tried adding a shortcode on my actual page:
[table id=1 datatables_fixedheader=top /]
as per the documentation.
When I inspect the table, I don't see any new classes on the table or the thead element.
There is no error in the console: other javascript library features such as sort are working.
Horizontal scrolling is not checked in the javascript library options.
Can you tell me what I am missing - how can I use an extension? Thank you!
Answers
The "TablePress Extension: DataTables FixedHeader" documentation is what you should follow, not DataTables' own "fixedHeader: true".
I notice your table has the id '#tablepress-1', but your TablePress shortcode says "[table id=1....". Could that be the problem?
Otherwise you need to raise the issue with TablePress, as their handling of DataTables extensions differs from what you will see here.
Thanks @tangerine, it's useful to know which documentation to follow.
The id is correct, I checked that tablepress-1 is the correct id in the HTML.
I found the problem: the fixed header was working but it is the same size as the navbar, so the header was hidden underneath the navbar!
I have added this css in plugin options, to push the fixed header down, and now everything works as expected:
Ideally one would use position: sticky on the th elements but the plugin probably handles old browsers better.