Skip to content

Commit 090a9ee

Browse files
thisisdanothisisdano
authored
Merge pull request #5420 from uswds/al-sticky-table-header
USWDS - Table: Add sticky headers
2 parents baaf7f9 + b10cae4 commit 090a9ee

File tree

13 files changed

+349
-25
lines changed

13 files changed

+349
-25
lines changed

‎packages/usa-table/src/styles/_usa-table.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@
3939
}
4040
}
4141

42+
.usa-table--sticky-header {
43+
@include usa-table--sticky-header;
44+
}
45+
4246
.usa-table-container--scrollable {
4347
@include usa-table-container--scrollable;
4448
}

‎packages/usa-table/src/test/test-patterns/test-usa-table--multiple-sticky-headers.twig

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
{% if sticky_header %}
2+
{% set sticky_header_class = "usa-table--sticky-header" %}
3+
{% endif %}
4+
5+
<div class="usa-prose measure-5 padding-2 border-1px border-gray-10 margin-bottom-4">
6+
<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>
7+
<p>To complete this test:</p>
8+
<ol>
9+
<li>Scroll down until the table header sticks to the top of the page.</li>
10+
<li>Confirm that <b>both</b> table header rows stick to the top of the page.</li>
11+
<li>Confirm that none of the table content shows between the borders of the table header cells.</li>
12+
</ol>
13+
</div>
14+
15+
<table class="usa-table {{ sticky_header ? sticky_header_class }}">
16+
<col>
17+
<colgroup span="2"></colgroup>
18+
<colgroup span="2"></colgroup>
19+
<thead>
20+
<tr>
21+
<th rowspan="2">Federal Budget<br> Baseline Projections</th>
22+
<th colspan="2" scope="colgroup" class="text-center">2017</th>
23+
<th colspan="2" scope="colgroup" class="text-center">2018</th>
24+
<th colspan="2" scope="colgroup" class="text-center">2019</th>
25+
<th colspan="2" scope="colgroup" class="text-center">2020</th>
26+
</tr>
27+
<tr>
28+
<th scope="col" class="text-right">%GDP</th>
29+
<th scope="col" class="text-right">USD*</th>
30+
<th scope="col" class="text-right">%GDP</th>
31+
<th scope="col" class="text-right">USD*</th>
32+
<th scope="col" class="text-right">%GDP</th>
33+
<th scope="col" class="text-right">USD*</th>
34+
<th scope="col" class="text-right">%GDP</th>
35+
</tr>
36+
</thead>
37+
<tr>
38+
<th scope="row">Revenue</th>
39+
<td class="font-mono-sm text-tabular text-right">17.2%</td>
40+
<td class="font-mono-sm text-tabular text-right">3,316</td>
41+
<td class="font-mono-sm text-tabular text-right">16.4%</td>
42+
<td class="font-mono-sm text-tabular text-right">3,338</td>
43+
<td class="font-mono-sm text-tabular text-right">16.3%</td>
44+
<td class="font-mono-sm text-tabular text-right">3,490</td>
45+
<td class="font-mono-sm text-tabular text-right">16.7%</td>
46+
</tr>
47+
<tr>
48+
<th scope="row">Outlays</th>
49+
<td class="font-mono-sm text-tabular text-right">20.6%</td>
50+
<td class="font-mono-sm text-tabular text-right">3,982</td>
51+
<td class="font-mono-sm text-tabular text-right">20.2%</td>
52+
<td class="font-mono-sm text-tabular text-right">4,142</td>
53+
<td class="font-mono-sm text-tabular text-right">21.0%</td>
54+
<td class="font-mono-sm text-tabular text-right">4,470</td>
55+
<td class="font-mono-sm text-tabular text-right">21.3%</td>
56+
</tr>
57+
<tr>
58+
<th scope="row">Budget Deficit</th>
59+
<td class="font-mono-sm text-tabular text-right">-3.5%</td>
60+
<td class="font-mono-sm text-tabular text-right">-665</td>
61+
<td class="font-mono-sm text-tabular text-right">-3.8%</td>
62+
<td class="font-mono-sm text-tabular text-right">-804</td>
63+
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
64+
<td class="font-mono-sm text-tabular text-right">-981</td>
65+
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
66+
</tr>
67+
<tr>
68+
<th scope="row">Debt Held by Public</th>
69+
<td class="font-mono-sm text-tabular text-right">76.0%</td>
70+
<td class="font-mono-sm text-tabular text-right">14,665</td>
71+
<td class="font-mono-sm text-tabular text-right">77.4%</td>
72+
<td class="font-mono-sm text-tabular text-right">15,688</td>
73+
<td class="font-mono-sm text-tabular text-right">79.2%</td>
74+
<td class="font-mono-sm text-tabular text-right">16,762</td>
75+
<td class="font-mono-sm text-tabular text-right">80.9%</td>
76+
</tr>
77+
<tr>
78+
<th scope="row">Revenue</th>
79+
<td class="font-mono-sm text-tabular text-right">17.2%</td>
80+
<td class="font-mono-sm text-tabular text-right">3,316</td>
81+
<td class="font-mono-sm text-tabular text-right">16.4%</td>
82+
<td class="font-mono-sm text-tabular text-right">3,338</td>
83+
<td class="font-mono-sm text-tabular text-right">16.3%</td>
84+
<td class="font-mono-sm text-tabular text-right">3,490</td>
85+
<td class="font-mono-sm text-tabular text-right">16.7%</td>
86+
</tr>
87+
<tr>
88+
<th scope="row">Outlays</th>
89+
<td class="font-mono-sm text-tabular text-right">20.6%</td>
90+
<td class="font-mono-sm text-tabular text-right">3,982</td>
91+
<td class="font-mono-sm text-tabular text-right">20.2%</td>
92+
<td class="font-mono-sm text-tabular text-right">4,142</td>
93+
<td class="font-mono-sm text-tabular text-right">21.0%</td>
94+
<td class="font-mono-sm text-tabular text-right">4,470</td>
95+
<td class="font-mono-sm text-tabular text-right">21.3%</td>
96+
</tr>
97+
<tr>
98+
<th scope="row">Budget Deficit</th>
99+
<td class="font-mono-sm text-tabular text-right">-3.5%</td>
100+
<td class="font-mono-sm text-tabular text-right">-665</td>
101+
<td class="font-mono-sm text-tabular text-right">-3.8%</td>
102+
<td class="font-mono-sm text-tabular text-right">-804</td>
103+
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
104+
<td class="font-mono-sm text-tabular text-right">-981</td>
105+
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
106+
</tr>
107+
<tr>
108+
<th scope="row">Debt Held by Public</th>
109+
<td class="font-mono-sm text-tabular text-right">76.0%</td>
110+
<td class="font-mono-sm text-tabular text-right">14,665</td>
111+
<td class="font-mono-sm text-tabular text-right">77.4%</td>
112+
<td class="font-mono-sm text-tabular text-right">15,688</td>
113+
<td class="font-mono-sm text-tabular text-right">79.2%</td>
114+
<td class="font-mono-sm text-tabular text-right">16,762</td>
115+
<td class="font-mono-sm text-tabular text-right">80.9%</td>
116+
</tr>
117+
<tr>
118+
<th scope="row">Revenue</th>
119+
<td class="font-mono-sm text-tabular text-right">17.2%</td>
120+
<td class="font-mono-sm text-tabular text-right">3,316</td>
121+
<td class="font-mono-sm text-tabular text-right">16.4%</td>
122+
<td class="font-mono-sm text-tabular text-right">3,338</td>
123+
<td class="font-mono-sm text-tabular text-right">16.3%</td>
124+
<td class="font-mono-sm text-tabular text-right">3,490</td>
125+
<td class="font-mono-sm text-tabular text-right">16.7%</td>
126+
</tr>
127+
<tr>
128+
<th scope="row">Outlays</th>
129+
<td class="font-mono-sm text-tabular text-right">20.6%</td>
130+
<td class="font-mono-sm text-tabular text-right">3,982</td>
131+
<td class="font-mono-sm text-tabular text-right">20.2%</td>
132+
<td class="font-mono-sm text-tabular text-right">4,142</td>
133+
<td class="font-mono-sm text-tabular text-right">21.0%</td>
134+
<td class="font-mono-sm text-tabular text-right">4,470</td>
135+
<td class="font-mono-sm text-tabular text-right">21.3%</td>
136+
</tr>
137+
<tr>
138+
<th scope="row">Budget Deficit</th>
139+
<td class="font-mono-sm text-tabular text-right">-3.5%</td>
140+
<td class="font-mono-sm text-tabular text-right">-665</td>
141+
<td class="font-mono-sm text-tabular text-right">-3.8%</td>
142+
<td class="font-mono-sm text-tabular text-right">-804</td>
143+
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
144+
<td class="font-mono-sm text-tabular text-right">-981</td>
145+
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
146+
</tr>
147+
<tr>
148+
<th scope="row">Debt Held by Public</th>
149+
<td class="font-mono-sm text-tabular text-right">76.0%</td>
150+
<td class="font-mono-sm text-tabular text-right">14,665</td>
151+
<td class="font-mono-sm text-tabular text-right">77.4%</td>
152+
<td class="font-mono-sm text-tabular text-right">15,688</td>
153+
<td class="font-mono-sm text-tabular text-right">79.2%</td>
154+
<td class="font-mono-sm text-tabular text-right">16,762</td>
155+
<td class="font-mono-sm text-tabular text-right">80.9%</td>
156+
</tr>
157+
<tr>
158+
<th scope="row">Revenue</th>
159+
<td class="font-mono-sm text-tabular text-right">17.2%</td>
160+
<td class="font-mono-sm text-tabular text-right">3,316</td>
161+
<td class="font-mono-sm text-tabular text-right">16.4%</td>
162+
<td class="font-mono-sm text-tabular text-right">3,338</td>
163+
<td class="font-mono-sm text-tabular text-right">16.3%</td>
164+
<td class="font-mono-sm text-tabular text-right">3,490</td>
165+
<td class="font-mono-sm text-tabular text-right">16.7%</td>
166+
</tr>
167+
<tr>
168+
<th scope="row">Outlays</th>
169+
<td class="font-mono-sm text-tabular text-right">20.6%</td>
170+
<td class="font-mono-sm text-tabular text-right">3,982</td>
171+
<td class="font-mono-sm text-tabular text-right">20.2%</td>
172+
<td class="font-mono-sm text-tabular text-right">4,142</td>
173+
<td class="font-mono-sm text-tabular text-right">21.0%</td>
174+
<td class="font-mono-sm text-tabular text-right">4,470</td>
175+
<td class="font-mono-sm text-tabular text-right">21.3%</td>
176+
</tr>
177+
<tr>
178+
<th scope="row">Budget Deficit</th>
179+
<td class="font-mono-sm text-tabular text-right">-3.5%</td>
180+
<td class="font-mono-sm text-tabular text-right">-665</td>
181+
<td class="font-mono-sm text-tabular text-right">-3.8%</td>
182+
<td class="font-mono-sm text-tabular text-right">-804</td>
183+
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
184+
<td class="font-mono-sm text-tabular text-right">-981</td>
185+
186+
<td class="font-mono-sm text-tabular text-right">-4.6%</td>
187+
</tr>
188+
<tr>
189+
<th scope="row">Debt Held by Public</th>
190+
<td class="font-mono-sm text-tabular text-right">76.0%</td>
191+
<td class="font-mono-sm text-tabular text-right">14,665</td>
192+
<td class="font-mono-sm text-tabular text-right">77.4%</td>
193+
<td class="font-mono-sm text-tabular text-right">15,688</td>
194+
<td class="font-mono-sm text-tabular text-right">79.2%</td>
195+
<td class="font-mono-sm text-tabular text-right">16,762</td>
196+
<td class="font-mono-sm text-tabular text-right">80.9%</td>
197+
</tr>
198+
</table>
199+
</div>

‎packages/usa-table/src/usa-table--sortable/usa-table--sortable.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"scrollable": true
3+
}

‎packages/usa-table/src/usa-table--sortable/usa-table--sortable.twig

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
{% if sticky_header %}
2+
{% set sticky_header_class = "usa-table--sticky-header" %}
3+
{% endif %}
4+
5+
{% if scrollable %}
16
<div class="usa-table-container--scrollable" tabindex="0">
2-
<table class="usa-table">
7+
{% endif %}
8+
<table class="usa-table {{ sticky_header ? sticky_header_class }}">
39
<caption>Recently admitted US states (sortable table example)</caption>
410
<thead>
511
<tr>
@@ -87,10 +93,14 @@
8793
<!-- this content will change when sort changes -->
8894
</div>
8995
<p class="margin-bottom-3">Data for illustration purposes only.</p>
96+
{% if scrollable %}
9097
</div>
98+
{% endif %}
9199

100+
{% if scrollable %}
92101
<div class="usa-table-container--scrollable" tabindex="0">
93-
<table class="usa-table usa-table--striped">
102+
{% endif %}
103+
<table class="usa-table usa-table--striped {{sticky_header ? 'usa-table--sticky-header' : ''}}">
94104
<caption>Sortable striped table with various content types</caption>
95105
<thead>
96106
<tr>
@@ -158,10 +168,14 @@
158168
</tbody>
159169
</table>
160170
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
171+
{% if scrollable %}
161172
</div>
173+
{% endif %}
162174

175+
{% if scrollable %}
163176
<div class="usa-table-container--scrollable" tabindex="0">
164-
<table class="usa-table usa-table--borderless">
177+
{% endif %}
178+
<table class="usa-table usa-table--borderless {{sticky_header ? 'usa-table--sticky-header' : ''}}">
165179
<caption>Sortable borderless table with various content types</caption>
166180
<thead>
167181
<tr>
@@ -228,4 +242,6 @@
228242
</tbody>
229243
</table>
230244
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
245+
{% if scrollable %}
231246
</div>
247+
{% endif %}

‎packages/usa-table/src/usa-table--stacked/usa-table--stacked.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{
2-
"scrollable": false,
32
"modifier": "",
43
"caption": "Bordered table",
54
"thead": [

‎packages/usa-table/src/usa-table.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{
2-
"scrollable": false,
32
"modifier": "",
43
"caption": "Bordered table",
54
"thead": [

‎packages/usa-table/src/usa-table.stories.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
11
import Component from "./usa-table.twig";
22
import SortableComponent from "./usa-table--sortable/usa-table--sortable.twig";
3+
import SortableContent from "./usa-table--sortable/usa-table--sortable.json";
34
import DefaultContent from "./usa-table.json";
45
import BorderlessContent from "./usa-table~borderless.json";
56
import StripedContent from "./usa-table~striped.json";
7+
import StickyHeaderContent from "./usa-table~stickyheader.json";
8+
import TestMultipleStickyRowsComponent from "./test/test-patterns/test-usa-table--multiple-sticky-headers.twig";
69

710
export default {
811
title: "Components/Table",
12+
argTypes: {
13+
scrollable: {
14+
name: "Scrollable (Turning this on will disable sticky headers)",
15+
control: { type: "boolean" },
16+
defaultValue: false,
17+
},
18+
sticky_header: {
19+
name: "Sticky header",
20+
control: { type: "boolean" },
21+
defaultValue: false,
22+
},
23+
},
924
};
1025

1126
const Template = (args) => Component(args);
1227
const SortableTemplate = (args) => SortableComponent(args);
28+
const TestMultipleStickyRowsTemplate = (args) =>
29+
TestMultipleStickyRowsComponent(args);
1330

1431
export const Default = Template.bind({});
1532
Default.args = DefaultContent;
@@ -20,4 +37,25 @@ Borderless.args = BorderlessContent;
2037
export const Striped = Template.bind({});
2138
Striped.args = StripedContent;
2239

40+
export const StickyHeader = Template.bind({});
41+
StickyHeader.args = {
42+
...DefaultContent,
43+
...StickyHeaderContent,
44+
};
45+
2346
export const Sortable = SortableTemplate.bind({});
47+
Sortable.args = {
48+
...SortableContent,
49+
};
50+
51+
export const TestStickyHeaderMultipleRows = TestMultipleStickyRowsTemplate.bind(
52+
{}
53+
);
54+
TestStickyHeaderMultipleRows.argTypes = {
55+
sticky_header: {
56+
defaultValue: true,
57+
},
58+
scrollable: {
59+
table: { disable: true },
60+
},
61+
};

0 commit comments

Comments
 (0)