scale
scale copied to clipboard
Scale-Table: freezeHeader option to freeze header row when scrolling
Describe the feature request
I would like to ask if you could add the freezeHeader
option to the Table
component. You already did that for Data-Grid
.
- But in contrast to the
Data-Grid
I would like to have the option without defining a specific table height. So that the table is not in an embedded box with separate scrollbar. - The header shall move with the table when you scroll up/down on the page.
- The header shall stopp when the header reaches the top or the end of the table.
Describe the use case On a large table you loose the column header when you scroll down because the table header is fix. So, you need to scroll up again to remember the column names.
Describe alternatives you've considered It's not mandatory to have a gab between top screen and table header as shown in the screenshots below. This is only for visualization in the screenshots.
Additional context Short mock to visualize.
-
At the beginning of the table. Headers are on table top.
-
During scrolling down the header moves with the page.
-
After reaching the table end the header stops moving.
Have you had a chance to check the feature request? 🥺
You could achieve this with some style overrides until this may land as a feature.
scale-table {
overflow: unset;
}
scale-table thead {
position: sticky;
top: 0;
z-index: 1;
}
Hi @georgwittberger ,
many thanks for that hint! In general it's working great on a standalone <scale-table>
. 👍
It doesn't work on an embedded <scale-table>
. E.g. inside a <scale-card>
. But I will check if I can overwrite some <scale-card>
styles, too, to get a sticky table header.
I'll comment again when I got a solution.