feat(GlTable): Add option for sticky table headers
What does this MR do?
Adds the ability to set the table headers sticky:
- Adds a new prop
sticky-header
- Default is
false
Why this change?
Some list pages could benefit of having sticky table headers for better orientation.
Screenshots or screen recordings
Before | After |
---|---|
![]() |
![]() |
http://localhost:9001/?path=/story/base-table-table--with-sticky-header
Integration merge requests
-
GitLab: mr_url -
CustomersDot: mr_url -
Status Page: mr_url
Does this MR meet the acceptance criteria?
This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.
Toggle the acceptance checklist
Conformity
-
Code review guidelines. -
GitLab UI's contributing guidelines. -
If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer. -
If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer. -
If the MR changes a component's API, integration MR(s) have been opened (see integration merge requests above). -
Added the ~"component:*"
label(s) if applicable.
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec
-
Security reports checked/validated by a reviewer from the AppSec team
Accessibility
If this MR adds or modifies a component, take a few moments to review the following:
-
All actions and functionality can be done with a keyboard. -
Links, buttons, and controls have a visible focus state. -
All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label
for icons that have meaning or perform actions. -
Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false"
toaria-expanded="true"
when an accordion is expanded. -
Color combinations have sufficient contrast.
Merge request reports
Activity
changed milestone to %Backlog
assigned to @seggenberger
Minor release (conventional commits)This Merge Request will trigger a minor release of GitLab UI, triggered by commit: 68f814da
This will bump the second part of the version number, e.g.
v1.2.3
->v1.3.0
.Reviewer roulette
Changes that require review have been detected! A merge request is normally reviewed by both a reviewer and a maintainer in its primary category and by a maintainer in all other categories.
To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.
To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.
Once you've decided who will review this merge request, mention them as you normally would! Danger does not automatically notify them for you.
Category Reviewer Maintainer frontend Jacques Erasmus (
@jerasmus
) (UTC+2, same timezone as@seggenberger
)Simon Knox (
@psimyn
) (UTC+10, 8 hours ahead of@seggenberger
)UX Julia Miocene (
@jmiocene
) (UTC+2, same timezone as@seggenberger
)Maintainer review is optional If needed, you can retry the
danger-review
job that generated this comment.Generated by
Danger- Resolved by Jeremy Elder
added 1 commit
- 38542711 - feat(GlTable): Add option for sticky table headers
added 1 commit
- 52db19a7 - feat(GlTable): Add option for sticky table headers
added 36 commits
-
52db19a7...65930ced - 35 commits from branch
main
- 8234117b - feat(GlTable): Add option for sticky table headers
-
52db19a7...65930ced - 35 commits from branch
added UX label
- Resolved by Simon Knox
requested review from @danmh
- Resolved by Simon Knox
requested review from @jerasmus
changed milestone to %16.4
- Resolved by Jacques Erasmus
- Resolved by Dan MH
polish(non-blocking): In Chrome and Firefox it looks like the sticky isn't quite at the top of the area. I can see some of the text behind as it moves past. (Works as expected in Safari)
Chrome Firefox Kapture_2023-09-07_at_10.30.35 Kapture_2023-09-07_at_10.32.24 In Chrome the heading text is also 'jittery'.
added 1 commit
- 550b8b89 - feat(GlTable): Add option for sticky table headers
mentioned in issue gitlab-design#2350 (closed)
- Resolved by Sascha Eggenberger
- Resolved by Simon Knox
- Resolved by Simon Knox
- Resolved by Simon Knox
@seggenberger couple of questions
removed review request for @psimyn
mentioned in issue danmh/danmh#23 (closed)
changed milestone to %16.5
added 55 commits
-
6f8702b4...f446713e - 52 commits from branch
main
- ff873210 - feat(GlTable): Add option for sticky table headers
- 7d87c42b - chore: update snapshots
- 9a80cc8a - Update CSS
Toggle commit list-
6f8702b4...f446713e - 52 commits from branch
requested review from @psimyn
added 1 commit
- 68f814da - feat(GlTable): Add option for sticky table headers
enabled automatic add to merge train when the pipeline for 5a8a6731 succeeds
mentioned in commit 5ac01351
mentioned in issue gitlab#424403 (closed)