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
Create test: multiple header rows + sticky header
  • Loading branch information
amyleadem committed Jan 23, 2024
commit 1e447afdeb30cc95a231c6c6831104fd0dcd6403
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>
19 changes: 11 additions & 8 deletions packages/usa-table/src/usa-table.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ 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",
Expand All @@ -19,16 +21,12 @@ export default {
control: { type: "boolean" },
defaultValue: false,
},
multiple_header_rows: {
name: "Multiple header rows (For sticky header tests: Confirm that both thead rows are visible when sticky)",
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 @@ -49,8 +47,13 @@ export const Sortable = SortableTemplate.bind({});
Sortable.args = {
...SortableContent,
};
Sortable.argTypes = {
multiple_header_rows: {

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