Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Comments

USWDS - Table: Add sticky headers#5420

Merged
thisisdano merged 44 commits intodevelopfrom
al-sticky-table-header
Feb 26, 2024
Merged

USWDS - Table: Add sticky headers#5420
thisisdano merged 44 commits intodevelopfrom
al-sticky-table-header

Conversation

@amyleadem
Copy link
Contributor

@amyleadem amyleadem commented Aug 2, 2023 •
edited by mejiaj
Loading

Summary

New table variant. Created the .usa-table--sticky-header variant to allow sticky positioning on table headers.

Caution

Sticky headers are not compatible with the scrollable and stacked table variants.

Thanks to @etanb for originating this work in PR #5074.

Breaking change

This is not a breaking change.

Related issue

Closes #5077

Related pull requests

Changelog and documentation PR

Preview link

Problem statement

For very long tables, it can be difficult to remember the associated header content. Creating the option to have table headers stick to the top of the page as the user scrolls would help keep tabular data in context.

Solution

This change creates a .usa-table--sticky-header variant that gives the table header sticky positioning.

Note
At this time, sticky headers are not compatible with the scrollable and stacked table variants. For the scrollable variant, this incompatibility is related to a known issue (on W3C CSS repo) with sticky positioning and scrolling overflow. If we want to pursue a sticky header that is compatible with scrollable tables, I recommend we open a separate issue because it will require a decent lift to find a workaround.

New variant

Variant name Description
.usa-table--sticky-header Allows the table header element to stick to the top of the page as the user scrolls. Preferred for long tables with many rows. This variant is not compatible with the scrollable and stacked table variants.

New settings

Setting name Description
$theme-table-background-color Defines the table background color. A value of default uses the body background color.
$theme-table-sticky-top-offset Defines the top offset for sticky headers.

Testing and review

  • Confirm that sticky positioning works with the default, borderless, striped, and sortable table variants.
  • Test on a variety of browsers
  • Confirm that sticky headers are compatible with multiple header rows
  • Confirm that the new settings work as expected
  • Confirm no visual regressions

To test in Storybook:

  1. In a variety of browsers, open each table variant story from the list of preview links
  2. In each story, turn on the sticky header control
  3. Confirm that the table header sticks to the top of the page when you scroll down

    Note
    Sticky headers will not stick in scrollable and stacked variants. If the header is not sticking, confirm that the scrollable control is turned off.

  4. Turn on the control for multiple header rows
  5. Confirm that both header rows stick to the top of the page when you scroll down and confirm that there are no visual irregularities (like table content showing behind the header on scroll)

etanb and others added 16 commits December 20, 2022 11:58
@etanb
add the ability to sticky the header of the table component
9a8a13a
@etanb
prettier
567876c
@etanb
Merge branch 'develop' into eb-sticky-table-header
93269e5
@etanb
fixes to implementation
630eadc
Add sticky header control
4c9a177
Override position:relative on sortable sticky th cells
ab1e642
Remove stickyheader control
455296b
Add sortable JSON file
db6c5f7
Add demo for multi-row headers
3b03d79 
Add sample styles to show what would be required for border-collapse: separate
Add multipleHeaderRows control for testing
8dae8db
Remove background color and extra borders from sticky table thead
a060c6a
Disable multipleHeaderRows for sortable tables
37d56a8
Remove text-right from table header
63f925b
Merge branch 'develop' of https://github.com/uswds/uswds into al-stic…
08024a6 
…ky-table-header
Run prettier
81c43dd
Add settings for table background color and sticky table top offset
40dac7c
@amyleadem amyleadem mentioned this pull request Aug 2, 2023
Closed
@amyleadem amyleadem mentioned this pull request Aug 4, 2023
Merged
amyleadem
amyleadem commented Jan 11, 2024
View reviewed changes
Copy link
Contributor Author

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mejiaj I believe I have addressed all your comments related to USWDS code. I am going to look into the guidance in USWDS-Site - Changelog: add entry and doc updates for sticky table headers to make sure it addresses this comment. Let me know if you need anything else.

packages/usa-table/src/usa-table.twig Outdated
Comment on lines 7 to 11
{% if stickyHeader %}
{% set bodyLoopCount = 0..6 %}
{% else %}
{% set bodyLoopCount = 0..0 %}
{% endif %}
Copy link
Contributor Author

@amyleadem amyleadem Jan 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in 02034a7

@amyleadem amyleadem requested a review from mejiaj January 18, 2024 17:57
mejiaj
mejiaj suggested changes Jan 19, 2024
View reviewed changes
Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @amyleadem, two more minor comments. One for improving clarity in settings and another for making the template class easier to update.

packages/uswds-core/src/styles/settings/_settings-components.scss
$theme-table-sorted-background-color: "accent-cool-lighter" !default;
$theme-table-sorted-stripe-background-color: "blue-cool-10v" !default;
$theme-table-sorted-icon-color: default !default;
$theme-table-sticky-top-offset: -1px !default;
Copy link
Contributor

@mejiaj mejiaj Jan 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small concern here is this is similar to the current hero setting where it's not very flexible or re-usable.

Not a blocker for this work.

Copy link
Contributor Author

@amyleadem amyleadem Jan 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, the setting is fairly limited, but I am not sure if there is a way around it. I would imagine a lot of projects will need to write some custom style rules for the top offset.

Copy link
Contributor

@mejiaj mejiaj Feb 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@amyleadem does this setting accept units too or only pixels? Do we have any guidance for this?

@amyleadem
Copy link
Contributor Author

amyleadem commented Jan 23, 2024

@mejiaj I believe I've addressed your concerns. Let me know if you have any questions.

@amyleadem amyleadem requested a review from mejiaj January 23, 2024 22:32
@mahoneycm mahoneycm mentioned this pull request Feb 1, 2024
Closed
5 tasks
mejiaj
mejiaj approved these changes Feb 1, 2024
View reviewed changes
Copy link
Contributor

@mejiaj mejiaj left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question on new offset setting. Code looks good, thank you.

@mejiaj mejiaj requested review from thisisdano and removed request for alex-hull and amycole501 February 1, 2024 20:10
@amyleadem amyleadem mentioned this pull request Feb 23, 2024
Merged
3 tasks
thisisdano
thisisdano approved these changes Feb 26, 2024
View reviewed changes
Copy link
Contributor

@thisisdano thisisdano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NICE

@thisisdano thisisdano merged commit 090a9ee into develop Feb 26, 2024
@thisisdano thisisdano deleted the al-sticky-table-header branch February 26, 2024 23:36
This was referenced Feb 28, 2024
Merged
Closed
@thisisdano thisisdano mentioned this pull request Mar 11, 2024
Merged
@SherfeyInv SherfeyInv mentioned this pull request Jun 7, 2024
Closed
@lane-formio lane-formio mentioned this pull request Jun 22, 2024
Closed
@mejiaj mejiaj mentioned this pull request Jul 8, 2024
Merged
10 tasks
@sennhann29 sennhann29 mentioned this pull request Jul 26, 2024
Open
@lane-formio lane-formio mentioned this pull request Aug 31, 2024
Merged
@FuhuXia FuhuXia mentioned this pull request Sep 26, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

3 more reviewers

@mejiaj mejiaj mejiaj approved these changes

@thisisdano thisisdano thisisdano approved these changes

@mahoneycm mahoneycm mahoneycm approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@mejiaj mejiaj

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

6 participants

@amyleadem @alex-hull @mejiaj @thisisdano @mahoneycm @etanb