Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Pho3njx opened this issue Aug 11, 2023 · 3 comments
Open

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

Pho3njx opened this issue Aug 11, 2023 · 3 comments
Labels
feature New component features and enhancements

Comments

@Pho3njx
Copy link

Pho3njx commented Aug 11, 2023

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 Pho3njx added the feature New component features and enhancements label Aug 11, 2023
@Pho3njx Pho3njx changed the title Scale-Table: freezeHeader option to freeze row from scrolling Scale-Table: freezeHeader option to freeze row when scrolling Aug 11, 2023
@Pho3njx Pho3njx changed the title Scale-Table: freezeHeader option to freeze row when scrolling Scale-Table: freezeHeader option to freeze header row when scrolling Aug 11, 2023
@Pho3njx
Copy link
Author

Pho3njx commented Sep 14, 2023

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

@georgwittberger
Copy link

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

@Pho3njx
Copy link
Author

Pho3njx commented Sep 28, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New component features and enhancements
Projects
None yet
Development

No branches or pull requests

2 participants