Tables with sticky header

Questions
1

Good evening! I want to know is it possible to make tables with sticky header in framework7?

2

hi do you got the solutions? i have same problems

3

It does. Check the contacts list example here: Contacts List (Table View) | Framework7 Documentation

4

To make F7 Data Table with Sticky Header, you will need following CSS:

.data-table-sticky-header {
    max-height: 100vh;
}

.data-table-sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 100;
}

Now apply data-table-sticky-header class to your data-table such as <div class="data-table data-table-init data-table-sticky-header card"></div>

That’s all you need to make the table header sticky.