USWDS - Table component: add ability to make headers sticky as user scrolls #5074

etanb · 2022-12-20T20:10:29Z

Summary

For very long tables, it's difficult to remember what the header content was. This change allows a developer to have the the table header content follow a user on scroll.

Breaking change

This is not a breaking change.

Related issue

N/A

Preview link

FixedHeaderTable.mp4

Solution

Added an optional class called usa-table--sticky-header that invokes the following CSS rule:

thead {
    th {
      position: sticky;
      top: 0;
    }
  }

(NOTE: you can not position: sticky; a <thead> element so the preferred solution is to just target the <th> data.)

Testing and review

There's a Storybook story called Sticky Header where you can review the results

amyleadem · 2023-01-27T16:49:46Z

@etanb Thank you for this submission! I like the possibilities this variant offers.

I've added some notes on a few items I discovered. Would you be able to take a look and resolve these items?

I noticed that there is a small amount of content that is visible between the sticky header and the browser edge. I believe it is related to the border added to the th element. The sticky positioning should account for this border. One possible avenue to pursue is using border-collapse: separate on the table element.
I added usa-table--sticky-header to the other table variants and achieved mixed results. For example, when added to the usa-table--borderless variant, the header had a transparent background:
Can you fix how `usa-table--sticky-header` interacts with the other table variants?
How might this interact with other sticky components?
It might improve the Storybook experience to add sticky as a boolean control for each table variant, like we do with scrollable (Reference). What do you think?

Please let me know if you have any questions or comments!

amyleadem · 2023-01-27T18:18:55Z

@etanb I have added the Needs: Discussion label to this PR so that the team can discuss any risks or accessibility implications that might pop up with a feature like this. Before doing more work, let's pause and make sure this is a good fit for the system. We'll cycle back when we have an answer.

mejiaj · 2023-04-07T00:54:10Z

Thanks for the contribution @etanb! No issues found on mobile and browser support looks pretty good.

https://caniuse.com/css-sticky

Are you able to address Amy's comments? If you're unable to that's okay. We can create another issue for the comments and create a separate feature branch for all this work. What do you think @amyleadem?

etanb · 2023-04-17T23:41:10Z

Hi all, I'm just rebuilding my local now and will have an update soon! Will try and incorporate all of @amyleadem requests.

etanb · 2023-04-18T02:40:08Z

My latest commit #630eadc6913a3efa5a08e90049074add4a8f11a6 adds usage for all the other USWDS stylings except for stackable and scrollable.

Two remaining issues / items for y'all/us to decide on:

stickyheader doesn't work on scrollable because overflow-y: hidden; is applied to the <div> container. Is that something we want to remedy or should scrollable and stickyheader be mutually exclusive?
stickeyheader works great in all instances EXCEPT when the header is colspan="2" or greater. Here are examples of what it looks like:

You can see that the row that are doubled up get squashed together since all <th> tags have top: -1px;. Solutions to this are:
a) wrap the entire <thead> in some sort of <div> so that we can sticky the entire element. not sure what ramifications this has to the <table>.
b) set a fixed height for the <th> elements so that we can know how much to offset each row by.
c) use Javascript to fix the header to the top of the <table>.
d) make a note that stickeyheader and non-single line headers are incompatible.

Let me know what y'all think! cc @amyleadem @mejiaj

mejiaj

@etanb thanks for updating!

I think it's worth trying to find workarounds. Especially ones with minimal impact on the markup.
Option D for colspan greater than 1 seems good to me, but I'd like the team to weigh in.

etanb · 2023-04-21T00:17:41Z

Unfortunately, after digging deeper, having a horizontal scroll + a sticky header for a table has been a known issue for a while (2017!) and there's still an open issue on W3C CSS repo: w3c/csswg-drafts#865

The only workaround I see is removing overflow-x: hidden; from here:

uswds/packages/uswds-elements/src/styles/_body.scss

Line 5 in 29eebc4

overflow-x: hidden;

and removing overflow-y: hidden; from here:

uswds/packages/uswds-core/src/styles/mixins/general/table.scss

Line 361 in 14d9b41

overflow-y: hidden;

Example of it working:

scrollAndSticky.mp4

However, that's a lot of modifications to get this feature working. Let me know what y'all think and what is worthwhile!

DorianCoding · 2023-04-24T05:46:39Z

Unfortunately, after digging deeper, having a horizontal scroll + a sticky header for a table has been a known issue for a while (2017!) and there's still an open issue on W3C CSS repo: w3c/csswg-drafts#865

The only workaround I see is removing overflow-x: hidden; from here:

uswds/packages/uswds-elements/src/styles/_body.scss

Line 5 in 29eebc4

overflow-x: hidden;

and removing overflow-y: hidden; from here:

uswds/packages/uswds-core/src/styles/mixins/general/table.scss

Line 361 in 14d9b41

overflow-y: hidden;

Example of it working:

scrollAndSticky.mp4

However, that's a lot of modifications to get this feature working. Let me know what y'all think and what is worthwhile!

Yes it is a really old issue and I hope one day it could be fixed.

We need a feature that allows overflow on height or width. But both overflows works and no one too. If we remove hidden overflow the table expands the viewport. It would be grate that setting an overflow hidden does not remove the sticky attribute so text outside the table stays on the view. It is especially good for mobile when the user can scroll inside the table without scrolling the whole page.

etanb · 2023-04-26T18:23:19Z

Ok, not sure what next steps are here are @DorianCoding @amyleadem @mejiaj . My gut instinct here is to just make stickyHeader and scrollable mutually exclusive.

DorianCoding · 2023-05-07T06:12:09Z

Ok, not sure what next steps are here are @DorianCoding @amyleadem @mejiaj . My gut instinct here is to just make stickyHeader and scrollable mutually exclusive.

It already works when setting both width and height or none using overflow visible.
But when setting overflow auto or hidden it does not work anymore so it is impossible to set the width but not the height for instance.

etanb · 2023-05-24T17:50:10Z

If we have a fixed table height, you can have BOTH side scrolling + sticky header.

amyleadem · 2023-05-30T20:46:19Z

@etanb
Apologies for the delayed response on this review and thank you for all your work on this. It's getting closer! I’ve added a few comments below with findings and suggestions for possible improvements.

I know some time has passed, so please let us know if your availability has changed and you need any help finishing this out.

I have tested the following items:

Works as expected with default variant
Works as expected on headers with multiple rows
- After doing a bit of digging, it looks like we actually can add position:sticky to the thead element instead of th. Support for sticky positioning on thead is now available in most browsers (Reference: caniuse - position sticky). I tested applying sticky positioning to the thead elementin USWDS in this PR, and results can be seen in this preview link. Everything appears to be working as expected.
- Benefits of applying sticky to thead:
  - We can have sticky headers with multiple rows!
- Costs of applying sticky to thead:
  - In Chrome, the background content is visible behind where the cell borders should be when using this technique. One possible path to resolve this is to use border-collapse: separate, but this would create a need to rework how our borders are applied to table cells in order to maintain current appearance. There are some examples of a possible alternative border pattern in this test PR. The style rules would need refinement, but I hope it conveys the intention.
Works as expected with borderless variant
- The table header background color changes when stickyheader is turned on. By default the background is set to transparent, but when stickyheader is turned on, it sets background color to $theme-table-header-background-color.
  One solution to this could be to create a setting for $theme-table-background-color that can be used to both set table background color and define the background color of the borderless table header.
Works as expected with striped variant
Works as expected with sortable variant
- Sticky headers do not currently work on the sortable variant because .usa-table th[data-sortable] overrides sticky positioning with position: relative. This should be resolved if we move sticky positioning to the thead element (See note above).
- Additionally, it would be helpful to be able to easily test sticky headers on this variant as well. Here are a couple of items that would help with that:
  - It would be great if we had the {{stickyheader ? 'usa-table--sticky-header' : ''}} check that you added in usa-table.twig in usa-table--sortable.twig
  - Additionally, could you add a JSON file for sortable tables with entries for stickyheader and scrollable?
  - Right now usa-table--sortable.twig has the usa-table-container--scrollable wrapper hard-coded in. Could you make this optional like we do in usa-table.twig
Works as expected on scrollable and stacked variants
- Note: I confirmed that it is a known problem that sticky positioning does not work with overflow:hidden ancestors. I could not find a semantic, non-JS workaround for this. I think it is fine if scrollable tables and sticky header are mutually exclusive for now - we can investigate options to repair this in a follow-up issue.
Test on Chrome, Firefox, Safari, iOS
Test at varying breakpoints

Other considerations

Improve Storybook controls: It would be helpful if there were controls in Storybook that allowed us to toggle stickyheader and multiple header rows for each table variant.
Customizable top offset: It would be good if there was a theme setting that allowed users to customize the top offset in case their site has additional elements that stick to the top (like a header). Could you add a $theme-table-sticky-top-offset setting?

cc: @mejiaj @mahoneycm

etanb · 2023-05-31T16:39:18Z

Thanks for the extensive checklist @amyleadem. We're currently implementing on our variation of this feature on our site, and as said previously, using a fixed height (we do max-height: 80vh) will allow sidescrolling + sticky header. Is this worth considering for y'all?

amyleadem · 2023-06-01T14:39:19Z

Thanks for the extensive checklist @amyleadem. We're currently implementing on our variation of this feature on our site, and as said previously, using a fixed height (we do max-height: 80vh) will allow sidescrolling + sticky header. Is this worth considering for y'all?

@etanb Thanks for the suggestion. I will take a look and discuss with the team.

amyleadem

Hi @etanb,
Wanted to check in to see if you will be able to get to the items in the checklist in this comment.

I know a part of the conversation was left hanging on my part. Thanks for your patience with that. For now, lets move forward without including sticky tables on scrollable headers. We can always address that concern as a follow-on enhancement.

Just let us know if your availability has changed and you need us to finish this out.

amyleadem · 2023-08-02T21:13:24Z

Hello @etanb,
I wanted to let you know that I am going to pick up this work and will finish it over in PR #5420. To reduce confusion about where the current work lives, I am closing out this PR. Thank you for sharing this work and please reach out if you have any questions!

etanb · 2023-08-02T22:23:48Z

That's exciting news! Thanks for making this happen @amyleadem , let me know if I can be useful.

amyleadem · 2023-08-02T22:25:03Z

Absolutely! Thanks for your patience on this.

etanb added 2 commits December 20, 2022 11:58

add the ability to sticky the header of the table component

9a8a13a

prettier

567876c

etanb marked this pull request as ready for review December 20, 2022 20:11

etanb mentioned this pull request Dec 21, 2022

USWDS - Feature: Ability to have <Table/> headers sticky to the top #5077

Closed

2 tasks

mejiaj requested review from mejiaj, amyleadem and mahoneycm January 26, 2023 20:31

amyleadem added the Needs: Discussion We need to discuss an approach to this issue label Jan 27, 2023

amyleadem added the Type: Feature Request New functionality label Jan 27, 2023

brunerae linked an issue Jan 30, 2023 that may be closed by this pull request

USWDS - Feature: Ability to have <Table/> headers sticky to the top #5077

Closed

2 tasks

amyleadem mentioned this pull request Feb 13, 2023

USWDS - Component lifecycle: Test the proposed process by applying it to an existing component #5149

Closed

etanb mentioned this pull request Feb 16, 2023

Add sticky header feature to USWDS tables CDCgov/prime-reportstream#8369

Open

etanb mentioned this pull request Apr 7, 2023

One <table/> to rule them all CDCgov/prime-reportstream#8280

Closed

8 tasks

mejiaj removed the Needs: Discussion We need to discuss an approach to this issue label Apr 14, 2023

Merge branch 'develop' into eb-sticky-table-header

93269e5

fixes to implementation

630eadc

mejiaj reviewed Apr 19, 2023

View reviewed changes

amyleadem added the Package: Table label May 17, 2023

amyleadem mentioned this pull request May 17, 2023

[Test] Test sticky positioning on thead #5288

Closed

amyleadem added the Needs: Discussion We need to discuss an approach to this issue label Jun 30, 2023

amyleadem reviewed Jul 19, 2023

View reviewed changes

amyleadem added Needs: Author Response 🔴 We're waiting for more information from a participant and removed Needs: Discussion We need to discuss an approach to this issue labels Jul 19, 2023

amyleadem mentioned this pull request Aug 2, 2023

USWDS - Table: Add sticky headers #5420

Merged

amyleadem closed this Aug 2, 2023

USWDS - Table component: add ability to make headers sticky as user scrolls #5074

USWDS - Table component: add ability to make headers sticky as user scrolls #5074

Conversation

etanb commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Breaking change

Related issue

Preview link

Solution

Testing and review

Uh oh!

amyleadem commented Jan 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

amyleadem commented Jan 27, 2023

Uh oh!

mejiaj commented Apr 7, 2023

Uh oh!

etanb commented Apr 17, 2023

Uh oh!

etanb commented Apr 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

etanb commented Apr 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DorianCoding commented Apr 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etanb commented Apr 26, 2023

Uh oh!

DorianCoding commented May 7, 2023

Uh oh!

etanb commented May 24, 2023

Uh oh!

amyleadem commented May 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other considerations

Uh oh!

etanb commented May 31, 2023

Uh oh!

amyleadem commented Jun 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

amyleadem commented Aug 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etanb commented Aug 2, 2023

Uh oh!

amyleadem commented Aug 2, 2023

Uh oh!

Uh oh!

etanb commented Dec 20, 2022 •

edited

Loading

amyleadem commented Jan 27, 2023 •

edited

Loading

etanb commented Apr 18, 2023 •

edited

Loading

etanb commented Apr 21, 2023 •

edited

Loading

DorianCoding commented Apr 24, 2023 •

edited

Loading

amyleadem commented May 30, 2023 •

edited

Loading

amyleadem commented Jun 1, 2023 •

edited

Loading

amyleadem commented Aug 2, 2023 •

edited

Loading