scale icon indicating copy to clipboard operation
scale copied to clipboard

Scale-Table: freezeHeader option to freeze header row when scrolling

Open Pho3njx opened this issue 1 year ago • 3 comments

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. scale-table_top

  • During scrolling down the header moves with the page. scale-table_middle

  • After reaching the table end the header stops moving. scale-table_end

Pho3njx avatar Aug 11 '23 10:08 Pho3njx

Have you had a chance to check the feature request? 🥺

Pho3njx avatar Sep 14 '23 14:09 Pho3njx

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;
}

georgwittberger avatar Sep 21 '23 21:09 georgwittberger

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.

Pho3njx avatar Sep 28 '23 08:09 Pho3njx