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 all commits
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
4 changes: 4 additions & 0 deletions packages/usa-table/src/styles/_usa-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@
}
}

.usa-table--sticky-header {
@include usa-table--sticky-header;
}

.usa-table-container--scrollable {
@include usa-table-container--scrollable;
}
199 changes: 199 additions & 0 deletions packages/usa-table/src/test/test-patterns/test-usa-table--multiple-sticky-headers.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
{% if sticky_header %}
{% set sticky_header_class = "usa-table--sticky-header" %}
{% endif %}

<div class="usa-prose measure-5 padding-2 border-1px border-gray-10 margin-bottom-4">
<p class="font-body-lg text-bold margin-top-0">Test if all rows of a sticky table header stick to the top of the page</p>
<p>To complete this test:</p>
<ol>
<li>Scroll down until the table header sticks to the top of the page.</li>
<li>Confirm that <b>both</b> table header rows stick to the top of the page.</li>
<li>Confirm that none of the table content shows between the borders of the table header cells.</li>
</ol>
</div>

<table class="usa-table {{ sticky_header ? sticky_header_class }}">
<col>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th rowspan="2">Federal Budget<br> Baseline Projections</th>
<th colspan="2" scope="colgroup" class="text-center">2017</th>
<th colspan="2" scope="colgroup" class="text-center">2018</th>
<th colspan="2" scope="colgroup" class="text-center">2019</th>
<th colspan="2" scope="colgroup" class="text-center">2020</th>
</tr>
<tr>
<th scope="col" class="text-right">%GDP</th>
<th scope="col" class="text-right">USD*</th>
<th scope="col" class="text-right">%GDP</th>
<th scope="col" class="text-right">USD*</th>
<th scope="col" class="text-right">%GDP</th>
<th scope="col" class="text-right">USD*</th>
<th scope="col" class="text-right">%GDP</th>
</tr>
</thead>
<tr>
<th scope="row">Revenue</th>
<td class="font-mono-sm text-tabular text-right">17.2%</td>
<td class="font-mono-sm text-tabular text-right">3,316</td>
<td class="font-mono-sm text-tabular text-right">16.4%</td>
<td class="font-mono-sm text-tabular text-right">3,338</td>
<td class="font-mono-sm text-tabular text-right">16.3%</td>
<td class="font-mono-sm text-tabular text-right">3,490</td>
<td class="font-mono-sm text-tabular text-right">16.7%</td>
</tr>
<tr>
<th scope="row">Outlays</th>
<td class="font-mono-sm text-tabular text-right">20.6%</td>
<td class="font-mono-sm text-tabular text-right">3,982</td>
<td class="font-mono-sm text-tabular text-right">20.2%</td>
<td class="font-mono-sm text-tabular text-right">4,142</td>
<td class="font-mono-sm text-tabular text-right">21.0%</td>
<td class="font-mono-sm text-tabular text-right">4,470</td>
<td class="font-mono-sm text-tabular text-right">21.3%</td>
</tr>
<tr>
<th scope="row">Budget Deficit</th>
<td class="font-mono-sm text-tabular text-right">-3.5%</td>
<td class="font-mono-sm text-tabular text-right">-665</td>
<td class="font-mono-sm text-tabular text-right">-3.8%</td>
<td class="font-mono-sm text-tabular text-right">-804</td>
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
<td class="font-mono-sm text-tabular text-right">-981</td>
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
</tr>
<tr>
<th scope="row">Debt Held by Public</th>
<td class="font-mono-sm text-tabular text-right">76.0%</td>
<td class="font-mono-sm text-tabular text-right">14,665</td>
<td class="font-mono-sm text-tabular text-right">77.4%</td>
<td class="font-mono-sm text-tabular text-right">15,688</td>
<td class="font-mono-sm text-tabular text-right">79.2%</td>
<td class="font-mono-sm text-tabular text-right">16,762</td>
<td class="font-mono-sm text-tabular text-right">80.9%</td>
</tr>
<tr>
<th scope="row">Revenue</th>
<td class="font-mono-sm text-tabular text-right">17.2%</td>
<td class="font-mono-sm text-tabular text-right">3,316</td>
<td class="font-mono-sm text-tabular text-right">16.4%</td>
<td class="font-mono-sm text-tabular text-right">3,338</td>
<td class="font-mono-sm text-tabular text-right">16.3%</td>
<td class="font-mono-sm text-tabular text-right">3,490</td>
<td class="font-mono-sm text-tabular text-right">16.7%</td>
</tr>
<tr>
<th scope="row">Outlays</th>
<td class="font-mono-sm text-tabular text-right">20.6%</td>
<td class="font-mono-sm text-tabular text-right">3,982</td>
<td class="font-mono-sm text-tabular text-right">20.2%</td>
<td class="font-mono-sm text-tabular text-right">4,142</td>
<td class="font-mono-sm text-tabular text-right">21.0%</td>
<td class="font-mono-sm text-tabular text-right">4,470</td>
<td class="font-mono-sm text-tabular text-right">21.3%</td>
</tr>
<tr>
<th scope="row">Budget Deficit</th>
<td class="font-mono-sm text-tabular text-right">-3.5%</td>
<td class="font-mono-sm text-tabular text-right">-665</td>
<td class="font-mono-sm text-tabular text-right">-3.8%</td>
<td class="font-mono-sm text-tabular text-right">-804</td>
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
<td class="font-mono-sm text-tabular text-right">-981</td>
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
</tr>
<tr>
<th scope="row">Debt Held by Public</th>
<td class="font-mono-sm text-tabular text-right">76.0%</td>
<td class="font-mono-sm text-tabular text-right">14,665</td>
<td class="font-mono-sm text-tabular text-right">77.4%</td>
<td class="font-mono-sm text-tabular text-right">15,688</td>
<td class="font-mono-sm text-tabular text-right">79.2%</td>
<td class="font-mono-sm text-tabular text-right">16,762</td>
<td class="font-mono-sm text-tabular text-right">80.9%</td>
</tr>
<tr>
<th scope="row">Revenue</th>
<td class="font-mono-sm text-tabular text-right">17.2%</td>
<td class="font-mono-sm text-tabular text-right">3,316</td>
<td class="font-mono-sm text-tabular text-right">16.4%</td>
<td class="font-mono-sm text-tabular text-right">3,338</td>
<td class="font-mono-sm text-tabular text-right">16.3%</td>
<td class="font-mono-sm text-tabular text-right">3,490</td>
<td class="font-mono-sm text-tabular text-right">16.7%</td>
</tr>
<tr>
<th scope="row">Outlays</th>
<td class="font-mono-sm text-tabular text-right">20.6%</td>
<td class="font-mono-sm text-tabular text-right">3,982</td>
<td class="font-mono-sm text-tabular text-right">20.2%</td>
<td class="font-mono-sm text-tabular text-right">4,142</td>
<td class="font-mono-sm text-tabular text-right">21.0%</td>
<td class="font-mono-sm text-tabular text-right">4,470</td>
<td class="font-mono-sm text-tabular text-right">21.3%</td>
</tr>
<tr>
<th scope="row">Budget Deficit</th>
<td class="font-mono-sm text-tabular text-right">-3.5%</td>
<td class="font-mono-sm text-tabular text-right">-665</td>
<td class="font-mono-sm text-tabular text-right">-3.8%</td>
<td class="font-mono-sm text-tabular text-right">-804</td>
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
<td class="font-mono-sm text-tabular text-right">-981</td>
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
</tr>
<tr>
<th scope="row">Debt Held by Public</th>
<td class="font-mono-sm text-tabular text-right">76.0%</td>
<td class="font-mono-sm text-tabular text-right">14,665</td>
<td class="font-mono-sm text-tabular text-right">77.4%</td>
<td class="font-mono-sm text-tabular text-right">15,688</td>
<td class="font-mono-sm text-tabular text-right">79.2%</td>
<td class="font-mono-sm text-tabular text-right">16,762</td>
<td class="font-mono-sm text-tabular text-right">80.9%</td>
</tr>
<tr>
<th scope="row">Revenue</th>
<td class="font-mono-sm text-tabular text-right">17.2%</td>
<td class="font-mono-sm text-tabular text-right">3,316</td>
<td class="font-mono-sm text-tabular text-right">16.4%</td>
<td class="font-mono-sm text-tabular text-right">3,338</td>
<td class="font-mono-sm text-tabular text-right">16.3%</td>
<td class="font-mono-sm text-tabular text-right">3,490</td>
<td class="font-mono-sm text-tabular text-right">16.7%</td>
</tr>
<tr>
<th scope="row">Outlays</th>
<td class="font-mono-sm text-tabular text-right">20.6%</td>
<td class="font-mono-sm text-tabular text-right">3,982</td>
<td class="font-mono-sm text-tabular text-right">20.2%</td>
<td class="font-mono-sm text-tabular text-right">4,142</td>
<td class="font-mono-sm text-tabular text-right">21.0%</td>
<td class="font-mono-sm text-tabular text-right">4,470</td>
<td class="font-mono-sm text-tabular text-right">21.3%</td>
</tr>
<tr>
<th scope="row">Budget Deficit</th>
<td class="font-mono-sm text-tabular text-right">-3.5%</td>
<td class="font-mono-sm text-tabular text-right">-665</td>
<td class="font-mono-sm text-tabular text-right">-3.8%</td>
<td class="font-mono-sm text-tabular text-right">-804</td>
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
<td class="font-mono-sm text-tabular text-right">-981</td>

<td class="font-mono-sm text-tabular text-right">-4.6%</td>
</tr>
<tr>
<th scope="row">Debt Held by Public</th>
<td class="font-mono-sm text-tabular text-right">76.0%</td>
<td class="font-mono-sm text-tabular text-right">14,665</td>
<td class="font-mono-sm text-tabular text-right">77.4%</td>
<td class="font-mono-sm text-tabular text-right">15,688</td>
<td class="font-mono-sm text-tabular text-right">79.2%</td>
<td class="font-mono-sm text-tabular text-right">16,762</td>
<td class="font-mono-sm text-tabular text-right">80.9%</td>
</tr>
</table>
</div>
3 changes: 3 additions & 0 deletions packages/usa-table/src/usa-table--sortable/usa-table--sortable.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"scrollable": true
}
22 changes: 19 additions & 3 deletions packages/usa-table/src/usa-table--sortable/usa-table--sortable.twig
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

I see the class, but not seeing sticky headers work in any of these tables.

Example
image
From preview Table - Sortable ⋅ Storybook

Copy link
Contributor Author

@amyleadem amyleadem 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.

You have to first turn off the scrollable variant in the control since it is incompatible with sticky headers. I added a note to the scrollable control in 58d0a6a to help clarify.

Let me know if that helps.

Copy link
Contributor

@mejiaj mejiaj Jan 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@amyleadem is it worth making these controls conditional1? For example, only show these controls if sticky headers are disabled.

Example

  argTypes: {
    scrollable: {
      name: "Scrollable (Turning this on will disable sticky headers)",
      control: { type: "boolean" },
      defaultValue: false,
      if: { arg: "sticky_header", truthy: false } // Hide this control if sticky
    },
  },

Footnotes

  1. https://storybook.js.org/docs/essentials/controls#conditional-controls ↩

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I played with this a bit but lean away from adding it in this instance since neither is actually the dependency of the other. Instead they are just incompatible. I ended up feeling like I would be confused about which options are available for the component, so I left it as is.

Let me know if you object.

Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
{% if sticky_header %}
{% set sticky_header_class = "usa-table--sticky-header" %}
{% endif %}

{% if scrollable %}
<div class="usa-table-container--scrollable" tabindex="0">
<table class="usa-table">
{% endif %}
<table class="usa-table {{ sticky_header ? sticky_header_class }}">
<caption>Recently admitted US states (sortable table example)</caption>
<thead>
<tr>
Expand Down Expand Up @@ -87,10 +93,14 @@
<!-- this content will change when sort changes -->
</div>
<p class="margin-bottom-3">Data for illustration purposes only.</p>
{% if scrollable %}
</div>
{% endif %}

{% if scrollable %}
<div class="usa-table-container--scrollable" tabindex="0">
<table class="usa-table usa-table--striped">
{% endif %}
<table class="usa-table usa-table--striped {{sticky_header ? 'usa-table--sticky-header' : ''}}">
<caption>Sortable striped table with various content types</caption>
<thead>
<tr>
Expand Down Expand Up @@ -158,10 +168,14 @@
</tbody>
</table>
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
{% if scrollable %}
</div>
{% endif %}

{% if scrollable %}
<div class="usa-table-container--scrollable" tabindex="0">
<table class="usa-table usa-table--borderless">
{% endif %}
<table class="usa-table usa-table--borderless {{sticky_header ? 'usa-table--sticky-header' : ''}}">
<caption>Sortable borderless table with various content types</caption>
<thead>
<tr>
Expand Down Expand Up @@ -228,4 +242,6 @@
</tbody>
</table>
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
{% if scrollable %}
</div>
{% endif %}
1 change: 0 additions & 1 deletion packages/usa-table/src/usa-table--stacked/usa-table--stacked.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"scrollable": false,
"modifier": "",
"caption": "Bordered table",
"thead": [
Expand Down
1 change: 0 additions & 1 deletion packages/usa-table/src/usa-table.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"scrollable": false,
"modifier": "",
"caption": "Bordered table",
"thead": [
Expand Down
38 changes: 38 additions & 0 deletions packages/usa-table/src/usa-table.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,32 @@
import Component from "./usa-table.twig";
import SortableComponent from "./usa-table--sortable/usa-table--sortable.twig";
import SortableContent from "./usa-table--sortable/usa-table--sortable.json";
import DefaultContent from "./usa-table.json";
import BorderlessContent from "./usa-table~borderless.json";
import StripedContent from "./usa-table~striped.json";
import StickyHeaderContent from "./usa-table~stickyheader.json";
import TestMultipleStickyRowsComponent from "./test/test-patterns/test-usa-table--multiple-sticky-headers.twig";

export default {
title: "Components/Table",
argTypes: {
scrollable: {
name: "Scrollable (Turning this on will disable sticky headers)",
control: { type: "boolean" },
defaultValue: false,
},
sticky_header: {
name: "Sticky header",
control: { type: "boolean" },
defaultValue: false,
},
},
};

const Template = (args) => Component(args);
const SortableTemplate = (args) => SortableComponent(args);
const TestMultipleStickyRowsTemplate = (args) =>
TestMultipleStickyRowsComponent(args);

export const Default = Template.bind({});
Default.args = DefaultContent;
Expand All @@ -20,4 +37,25 @@ Borderless.args = BorderlessContent;
export const Striped = Template.bind({});
Striped.args = StripedContent;

export const StickyHeader = Template.bind({});
StickyHeader.args = {
...DefaultContent,
...StickyHeaderContent,
};

export const Sortable = SortableTemplate.bind({});
Sortable.args = {
...SortableContent,
};

export const TestStickyHeaderMultipleRows = TestMultipleStickyRowsTemplate.bind(
{}
);
TestStickyHeaderMultipleRows.argTypes = {
sticky_header: {
defaultValue: true,
},
scrollable: {
table: { disable: true },
},
};
Loading