Data Table: sticky header

Questions
1

Hi, all.

I have an F7 Data Table in my app. I want to have sticky header for this table and use position: sticky; position: -webkit-sticky; CSS properties for that in the following way:

<table>
    <thead>
        <tr>
            <th style='position: sticky; position: -webkit-sticky; top: -1px; background: red'>HEad ghjgj f dhgjgh fhj dddd</th>
            <th>HEadddddmm  11111</th>
        </tr>
    </thead>
    <tbody>
        //my body
    </tbody>
</table>

If I put <table> element into page-content directly, sticky behaviour works fine. But if I put it into data-table, as it is required by F7, sticky behaviour is gone. Is there any way to combine sticky and F7 data table?

Testing devices:

  • Google Chrome 74
  • iOS 12.2 (iPhone 6 Plus)

F7 version: 3.6.5
Full sample code can be found here: https://github.com/contfedorov/f7-issues/tree/data_table_sticky_header

2

You can try to don’t use <div class="data-table"> wrapper for table and add this class for table:

<table class="data-table">...

And this to CSS:

table.data-table {
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    text-align: left;
}
3

That’s incredible! Saved tons of nerves for me!
Being in Rostov, I’ll definitely treat you a beer!

4

I managed to simplify this, follow the code:

<th class="label-cell bg-color-white th-sticky">Referência</th>

.th-sticky {
  position: sticky !important;
  top: 0px !important;
  z-index: 99 !important;
  box-shadow: 5px 1px #e0e0e0 !important;
}
2 Likes
5

Thank you. Worked perfectly for what I needed.