Skip to content

Commit d1d5065

Browse files
dlescarbeaudlescarbeau
committed
prototype for sortable tables
1 parent eab7e0a commit d1d5065

File tree

12 files changed

+960
-0
lines changed

12 files changed

+960
-0
lines changed

‎packages/ncids-js/package.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,16 @@
8787
"import": "./lib/esm/components/usa-modal/index.js",
8888
"types": "./lib/esm/components/usa-modal/index.d.js",
8989
"require": "./lib/cjs/components/usa-modal/index.js"
90+
},
91+
"./usa-table": {
92+
"import": "./lib/esm/components/usa-table/index.js",
93+
"types": "./lib/esm/components/usa-table/index.d.js",
94+
"require": "./lib/cjs/components/usa-table/index.js"
95+
},
96+
"./usa-table/auto-init": {
97+
"import": "./lib/esm/components/usa-table/index.js",
98+
"types": "./lib/esm/components/usa-table/index.d.js",
99+
"require": "./lib/cjs/components/usa-table/index.js"
90100
}
91101
},
92102
"scripts": {

‎packages/ncids-js/src/components/usa-table/__tests__/usa-table-sortable.dom.ts‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
export const usaTableSortableDOM = (): HTMLElement => {
2+
const div = document.createElement('div');
3+
4+
div.innerHTML = `
5+
<div class="usa-table-container--scrollable" tabindex="0">
6+
<table class="usa-table usa-table--sortable">
7+
<caption>Recently admitted US states (sortable table example)</caption>
8+
<thead>
9+
<tr>
10+
<th>
11+
Name
12+
</th>
13+
<th>
14+
Order admitted to union
15+
</th>
16+
<th>
17+
Date of ratification vote
18+
</th>
19+
<th>
20+
Date admitted to union
21+
</th>
22+
<th>
23+
Percent of voters in favor of ratification
24+
</th>
25+
<th>
26+
Votes cast in favor of ratification
27+
</th>
28+
<th>
29+
Estimated population at time of admission
30+
</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr>
35+
<th role="rowheader">Hawaii</th>
36+
<td>50th</td>
37+
<td data-sort-type="date">Jun. 27, 1959</td>
38+
<td data-sort-type="date">Aug. 21, 1959</td>
39+
<td>94.3%</td>
40+
<td>132,773</td>
41+
<td>632,772</td>
42+
</tr>
43+
<tr>
44+
<th role="rowheader">Alaska</th>
45+
<td>49th</td>
46+
<td data-sort-type="date">Apr. 24, 1956</td>
47+
<td data-sort-type="date">Jan. 3, 1959</td>
48+
<td>68.1%</td>
49+
<td>17,477</td>
50+
<td>226,167</td>
51+
</tr>
52+
<tr>
53+
<th role="rowheader">Arizona</th>
54+
<td >48th</td>
55+
<td data-sort-type="date">Feb. 9, 1911</td>
56+
<td data-sort-type="date">Feb. 14, 1912</td>
57+
<td>78.7%</td>
58+
<td>12,187</td>
59+
<td>204,354</td>
60+
</tr>
61+
<tr>
62+
<th role="rowheader">New Mexico</th>
63+
<td>47th</td>
64+
<td data-sort-type="date">Nov. 5, 1911</td>
65+
<td data-sort-type="date">Jan. 6, 1912</td>
66+
<td>70.3%</td>
67+
<td>31,742</td>
68+
<td>327,301</td>
69+
</tr>
70+
<tr>
71+
<th role="rowheader">Oklahoma</th>
72+
<td>46th</td>
73+
<td data-sort-type="date">Sep. 17, 1907</td>
74+
<td data-sort-type="date">Nov. 16, 1907</td>
75+
<td>71.2%</td>
76+
<td>180,333</td>
77+
<td>1,657,155</td>
78+
</tr>
79+
<tr>
80+
<th role="rowheader">Utah</th>
81+
<td>45th</td>
82+
<td data-sort-type="date">Nov. 5, 1895</td>
83+
<td data-sort-type="date">Jan. 4, 1896</td>
84+
<td>80.5%</td>
85+
<td>31,305</td>
86+
<td>210,779</td>
87+
</tr>
88+
</tbody>
89+
</table>
90+
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite">
91+
<!-- this content will change when sort changes -->
92+
</div>
93+
<p class="margin-bottom-3">Data for illustration purposes only.</p>
94+
</div>
95+
96+
<div class="usa-table-container--scrollable" tabindex="0">
97+
<table class="usa-table usa-table--striped usa-table--sortable">
98+
<caption>Sortable striped table with various content types</caption>
99+
<thead>
100+
<tr>
101+
<th>
102+
Alphabetical
103+
</th>
104+
<th>
105+
Month
106+
</th>
107+
<th>
108+
Percent
109+
</th>
110+
<th>
111+
Count
112+
</th>
113+
<th data-fixed>
114+
Rank (Ordinal)
115+
</th>
116+
<th data-fixed>
117+
Rank (Cardinal)
118+
</th>
119+
<th>
120+
Unix Timestamp
121+
</th>
122+
</tr>
123+
</thead>
124+
<tbody>
125+
<tr>
126+
<th>Tango</th>
127+
<td data-sort-type="date">March</td>
128+
<td>20.6%</td>
129+
<td>23,612</td>
130+
<td>Third</td>
131+
<td>3rd</td>
132+
<td data-sort-type="date">March 27, 2012</td>
133+
</tr>
134+
<tr>
135+
<th>Foxtrot</th>
136+
<td data-sort-type="date">April</td>
137+
<td>2.6%</td>
138+
<td>-32</td>
139+
<td>First</td>
140+
<td>1st</td>
141+
<td data-sort-type="date">April 9, 2021</td>
142+
</tr>
143+
<tr>
144+
<th>Hilo</th>
145+
<td data-sort-type="date">January</td>
146+
<td>-3.6%</td>
147+
<td>0.002</td>
148+
<td>Second</td>
149+
<td>2nd</td>
150+
<td data-sort-type="date">January 20, 2021</td>
151+
</tr>
152+
<tr>
153+
<th>Bravo</th>
154+
<td data-sort-type="date">December</td>
155+
<td>-300.6%</td>
156+
<td>0</td>
157+
<td>Fourth</td>
158+
<td>4th</td>
159+
<td data-sort-type="date">December 16, 2020</td>
160+
</tr>
161+
</tbody>
162+
</table>
163+
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
164+
</div>
165+
166+
<div class="usa-table-container--scrollable" tabindex="0">
167+
<table class="usa-table usa-table--borderless usa-table--sortable">
168+
<caption>Sortable borderless table with various content types</caption>
169+
<thead>
170+
<tr>
171+
<th>
172+
Alphabetical
173+
</th>
174+
<th>
175+
Month
176+
</th>
177+
<th>
178+
Percent
179+
</th>
180+
<th>
181+
Count
182+
</th>
183+
<th data-fixed>
184+
Rank (Ordinal)
185+
</th>
186+
<th data-fixed>
187+
Rank (Cardinal)
188+
</th>
189+
<th>
190+
Unix Timestamp
191+
</th>
192+
</tr>
193+
</thead>
194+
<tbody>
195+
<tr>
196+
<th>Tango</th>
197+
<td data-sort-type="date">March</td>
198+
<td>20.6%</td>
199+
<td>23,612</td>
200+
<td>Third</td>
201+
<td>3rd</td>
202+
<td data-sort-type="date">March 27, 2012</td>
203+
</tr>
204+
<tr>
205+
<th>Foxtrot</th>
206+
<td data-sort-type="date">April</td>
207+
<td>2.6%</td>
208+
<td>-32</td>
209+
<td>First</td>
210+
<td>1st</td>
211+
<td data-sort-type="date">April 9, 2021</td>
212+
</tr>
213+
<tr>
214+
<th>Hilo</th>
215+
<td data-sort-type="date">January</td>
216+
<td>-3.6%</td>
217+
<td>0.002</td>
218+
<td >Second</td>
219+
<td>2nd</td>
220+
<td data-sort-type="date">January 20, 2021</td>
221+
</tr>
222+
<tr>
223+
<th>Bravo</th>
224+
<td data-sort-type="date">December</td>
225+
<td>-300.6%</td>
226+
<td>0</td>
227+
<td>Fourth</td>
228+
<td>4th</td>
229+
<td data-sort-type="date">December 16, 2020</td>
230+
</tr>
231+
</tbody>
232+
</table>
233+
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
234+
</div>`;
235+
return div;
236+
};

‎packages/ncids-js/src/components/usa-table/__tests__/usa-table-sortable.test.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import '@testing-library/jest-dom';
2+
import '@testing-library/jest-dom/extend-expect';
3+
import userEvent from '@testing-library/user-event';
4+
//import { screen } from '@testing-library/dom';
5+
6+
import { USATable } from '../usa-table.component';
7+
import { TableOptions } from '../usa-table-options';
8+
import { usaTableSortableDOM } from './usa-table-sortable.dom';
9+
10+
describe('USATable', () => {
11+
let container: HTMLElement;
12+
let sortableTable: USATable;
13+
const options: TableOptions = {
14+
sortable: true,
15+
};
16+
17+
beforeEach(() => {
18+
container = usaTableSortableDOM();
19+
document.body.appendChild(container);
20+
sortableTable = USATable.create(container, options);
21+
});
22+
23+
afterEach(() => {
24+
document.getElementsByTagName('body')[0].innerHTML = '';
25+
});
26+
27+
it('creates a usa table with sortable columns', () => {
28+
expect(sortableTable).toBeDefined();
29+
const headerRow = container.querySelector('thead') as HTMLElement;
30+
const headings = headerRow.querySelectorAll('th');
31+
expect(headings[0]).toHaveAttribute('data-sortable', '');
32+
});
33+
34+
it('sorts a column when the header is clicked', async () => {
35+
const user = userEvent.setup();
36+
const firstRowFirstCell = container.querySelector(
37+
'tbody tr:first-child th'
38+
);
39+
expect(firstRowFirstCell?.textContent).toBe('Hawaii');
40+
41+
const nameHeading = container.querySelector(
42+
'thead th:first-child'
43+
) as HTMLElement;
44+
const sortHeaderButton = nameHeading.querySelector('button') as HTMLElement;
45+
46+
await user.click(sortHeaderButton);
47+
const newFirstRowFirstCell = container.querySelector(
48+
'tbody tr:first-child th'
49+
);
50+
expect(newFirstRowFirstCell?.textContent).toBe('Alaska');
51+
});
52+
});

‎packages/ncids-js/src/components/usa-table/auto-init.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { USATable } from './usa-table.component';
2+
3+
/*
4+
* Auto initialize usa-accordion when dom is ready.
5+
* @packageDocumentation
6+
*/
7+
USATable.autoInit();

‎packages/ncids-js/src/components/usa-table/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/**
2+
* @packageDocumentation
3+
*/
4+
export { USATable } from './usa-table.component';

‎packages/ncids-js/src/components/usa-table/usa-table-options.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* USA Table Options
3+
* Options used for initialization of the sortable usa-table
4+
*/
5+
export type TableOptions = {
6+
/** Determines if the table is sortable */
7+
sortable: boolean;
8+
};

0 commit comments

Comments
 (0)