How to use the fixed header javascript extension

Ivy13

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!

tangerine

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.

Ivy13

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:

.tablepress.fixedHeader-floating.no-footer {
    margin-top: 30px;
}

Ideally one would use position: sticky on the th elements but the plugin probably handles old browsers better.