FixedHeader: How to "fixed/freeze" just the first tr in multiple rows inside thead?

bgastaldi

Hi everyone,

I'm using the DataTables library along with the FixedHeader plugin to make my tables more user-friendly. However, I'm facing an issue with FixedHeader, and I'm hoping someone can help me find a solution.

I have a table with two <tr> elements in the <thead>, but I want to fix only the first <tr> at the top when scrolling. I've tried various configurations, but I couldn't find a straightforward way to achieve this.

<table id="example" class="display dataTable" style="width:100%">
    <thead>
        <tr class="fixed-header-row">
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <th>Subheader 1</th>
            <th>Subheader 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

Could someone please provide guidance on how to configure the FixedHeader plugin to make it fix only the first <tr class="fixed-header-row"> within the <thead>?

In the second <tr>, I have filters. However, when scrolling the page, I don't want to keep them fixed.

I would like to show the following:

Any help or suggestions would be greatly appreciated.

Thank you in advance for your assistance!

kthorngren

According to this thread from March FixedHeader does not support multiple headers. Looking at the Release notes I don't see anything about this being added since March. Sounds like support will be available with Datatables 2.

Kevin

bgastaldi

Hi @kthorngren

Actually, it's working but I want to keep only one row, not two.
Does anyone have any suggestions?

allan

I'm sorry no, that isn't possible in FixedHeader. I don't recall coming across that requirement before I'm afraid. It would require changes in FixedHeader to add something like this.

Allan

bgastaldi

Ok @allan .

Thank you