Skip to content

USWDS - Table: Add sticky headers #5420

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.

Sign up for GitHub

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

Merged
merged 44 commits into from
Feb 26, 2024
Merged

USWDS - Table: Add sticky headers #5420

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
9a8a13a
add the ability to sticky the header of the table component
etanb Dec 20, 2022
567876c
prettier
etanb Dec 20, 2022
93269e5
Merge branch 'develop' into eb-sticky-table-header
etanb Apr 17, 2023
630eadc
fixes to implementation
etanb Apr 18, 2023
4c9a177
Add sticky header control
May 16, 2023
ab1e642
Override position:relative on sortable sticky th cells
May 16, 2023
455296b
Remove stickyheader control
May 16, 2023
db6c5f7
Add sortable JSON file
May 16, 2023
3b03d79
Add demo for multi-row headers
May 16, 2023
8dae8db
Add multipleHeaderRows control for testing
May 17, 2023
a060c6a
Remove background color and extra borders from sticky table thead
May 17, 2023
37d56a8
Disable multipleHeaderRows for sortable tables
May 17, 2023
63f925b
Remove text-right from table header
May 17, 2023
08024a6
Merge branch 'develop' of https://github.com/uswds/uswds into al-stic…
May 19, 2023
81c43dd
Run prettier
May 19, 2023
40dac7c
Add settings for table background color and sticky table top offset
May 23, 2023
a477cd0
Move stickyheader from json to a storybook control
Aug 2, 2023
ab585ae
Remove stickyheader check on scrollable variant
Aug 2, 2023
da2a9e7
Format code
Aug 2, 2023
6bd2f54
Move scrollable setting from json to storybook
Aug 2, 2023
fd01eb4
Let $theme-table-background-color accept default
Aug 2, 2023
54debdc
Run prettier
Aug 2, 2023
121762b
Fix default for $theme-table-background-color
Aug 2, 2023
65c03b6
Clean up multiple header rows code
Aug 2, 2023
feaaecd
Add scrollable conditional to sortable twig
Aug 3, 2023
ba30313
Create loops for header and body rows
Aug 4, 2023
17b90e5
Remove background color on table button default
Aug 4, 2023
d02ebdc
Merge branch 'develop' of https://github.com/uswds/uswds into al-stic…
Aug 9, 2023
bef2f1e
Restore scrollable default on sortable tables
Aug 9, 2023
d3162cf
Clean up sticky header style rules
Aug 9, 2023
a9e17ac
Reorganize sticky header controls
Aug 9, 2023
7ca071b
Move scrollable: true to json file
Aug 11, 2023
d6c4ffb
Run prettier
Aug 11, 2023
21cec70
Add !default to $theme-table-sticky-top-offset
Aug 21, 2023
0d8a54d
Move 'stickyheader:true' to JSON
Sep 6, 2023
c809938
Merge branch 'develop' of github.com:uswds/uswds into al-sticky-table…
Jan 9, 2024
7ef482c
Add note about sticky header to scrollable control
Jan 10, 2024
02034a7
Use underscores for twig variables
Jan 10, 2024
58d0a6a
Add note to sticky header + mult header controls
Jan 11, 2024
c4d13e7
Add underscore to stickheader json + twig
Jan 11, 2024
b79fdf2
Remove "Note:" from scrollable control
Jan 11, 2024
1e447af
Create test: multiple header rows + sticky header
Jan 23, 2024
cae00e5
Assign sticky_header_class on sortable twig
Jan 23, 2024
b10cae4
Run prettier
Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add settings for table background color and sticky table top offset
  • Loading branch information
Amy Leadem committed May 23, 2023
commit 40dac7c6cdf5acfef9b470953941391f1d04ddf0
13 changes: 7 additions & 6 deletions packages/uswds-core/src/styles/mixins/general/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@use "../typography/typeset" as *;

$table-text-color: get-color-token-from-bg(
$bg-color: $theme-body-background-color,
$bg-color: $theme-table-background-color,
$preferred-text-token: $theme-table-text-color,
$context: "Table text",
);
Expand Down Expand Up @@ -84,6 +84,7 @@ $table-unsorted-icon-color: get-color-token-from-bg(
@mixin table-button-default-styles {
@include button-unstyled;
@include u-square(4);
background-color: color($theme-table-background-color);
background-position: center center;
background-size: units(3);
color: color($theme-table-unsorted-icon-color);
Expand Down Expand Up @@ -236,7 +237,7 @@ $table-unsorted-icon-color: get-color-token-from-bg(
}
th,
td {
background-color: color($theme-body-background-color);
background-color: color($theme-table-background-color);
border: 1px solid color($theme-table-border-color);
font-weight: fw("normal");
padding: units(1) units(2);
Expand Down Expand Up @@ -296,7 +297,7 @@ $table-unsorted-icon-color: get-color-token-from-bg(
@mixin usa-table--borderless {
thead {
th {
background-color: transparent;
background-color: color($theme-table-background-color);
border-top: 0;
color: color($table-text-color);

Expand Down Expand Up @@ -381,7 +382,7 @@ $table-unsorted-icon-color: get-color-token-from-bg(

thead {
position: sticky;
top: -1px;
top: $theme-table-sticky-top-offset;
Copy link
Contributor Author

@amyleadem amyleadem Aug 9, 2023 •
edited by mejiaj
Loading

Choose a reason for hiding this comment

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

Warning

Offset is useful for when there is another element that already sticks to the top of the page, like a sticky header navigation.

I suspect that most users will need to write custom rules if their sticky elements change at different breakpoints (For example, the sticky header navigation on uswds-site goes away in the mobile view). Do we want to keep this setting with the understanding that additional style overrides might often be necessary

Copy link
Contributor

Choose a reason for hiding this comment

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

I feel like we should keep it. Like most of our work, we provide the tools, but it's up to the users to implement them in a way that works for them.

Copy link
Contributor

@mejiaj mejiaj Jan 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Noting this in the guidance would be useful. As well as recommending users limit the number of sticky/fixed items on the page.

For example, a sticky sidenav, header, and table header might be too much. For now a general note might be good enough.


th {
background-color: color($theme-table-header-background-color);
Expand All @@ -391,8 +392,8 @@ $table-unsorted-icon-color: get-color-token-from-bg(
&.usa-table--borderless {
border: none;

th {
background-color: color($theme-body-background-color);
thead th {
background-color: color($theme-table-background-color);
}

td,
Expand Down
2 changes: 2 additions & 0 deletions packages/uswds-core/src/styles/settings/_settings-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ $theme-summary-box-link-color: default !default;
$theme-summary-box-text-color: default !default;

// Table
$theme-table-background-color: "white";
$theme-table-border-color: "ink" !default;
$theme-table-header-background-color: "base-lighter" !default;
$theme-table-header-text-color: default !default;
Expand All @@ -211,6 +212,7 @@ $theme-table-sorted-header-background-color: "accent-cool-light" !default;
$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;
$theme-table-unsorted-icon-color: "base" !default;

// Tooltips
Expand Down