<div class="usa-table-container--scrollable">
<table class="usa-table">
<caption>Recently admitted US states (sortable table example)</caption>
<thead>
<tr>
<th data-sortable scope="col" role="columnheader">
Name
</th>
<th data-sortable scope="col" role="columnheader" aria-sort="descending">
Order admitted to union
</th>
<th data-sortable scope="col" role="columnheader">
Date of ratification vote
</th>
<th data-sortable scope="col" role="columnheader">
Date admitted to union
</th>
<th data-sortable scope="col" role="columnheader">
Percent of voters in favor of ratification
</th>
<th data-sortable scope="col" role="columnheader">
Votes cast in favor of ratification
</th>
<th data-sortable scope="col" role="columnheader">
Estimated population at time of admission
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" role="rowheader">Hawaii</th>
<td data-sort-value="50">50th</td>
<td data-sort-value="331844400">Jun. 27, 1959</td>
<td data-sort-value="327092400">Aug. 21, 1959</td>
<td data-sort-value="0.943" class="font-mono-sm text-tabular text-right">94.3%</td>
<td data-sort-value="132773" class="font-mono-sm text-tabular text-right">132,773</td>
<td data-sort-value="632772" class="font-mono-sm text-tabular text-right">632,772</td>
</tr>
<tr>
<th scope="row" role="rowheader">Alaska</th>
<td data-sort-value="49">49th</td>
<td data-sort-value="431978400">Apr. 24, 1956</td>
<td data-sort-value="346960800">Jan. 3, 1959</td>
<td data-sort-value="0.681" class="font-mono-sm text-tabular text-right">68.1%</td>
<td data-sort-value="17477" class="font-mono-sm text-tabular text-right">17,477</td>
<td data-sort-value="226167" class="font-mono-sm text-tabular text-right">226,167</td>
</tr>
<tr>
<th scope="row" role="rowheader">Arizona</th>
<td data-sort-value="48">48th</td>
<td data-sort-value="1858528800">Feb. 9, 1911</td>
<td data-sort-value="1826560800">Feb. 14, 1912</td>
<td data-sort-value="0.787" class="font-mono-sm text-tabular text-right">78.7%</td>
<td data-sort-value="12187" class="font-mono-sm text-tabular text-right">12,187</td>
<td data-sort-value="204354" class="font-mono-sm text-tabular text-right">204,354</td>
</tr>
<tr>
<th scope="row" role="rowheader">New Mexico</th>
<td data-sort-value="47">47th</td>
<td data-sort-value="1835287200">Nov. 5, 1911</td>
<td data-sort-value="1829930400">Jan. 6, 1912</td>
<td data-sort-value="0.703" class="font-mono-sm text-tabular text-right">70.3%</td>
<td data-sort-value="31742" class="font-mono-sm text-tabular text-right">31,742</td>
<td data-sort-value="327301" class="font-mono-sm text-tabular text-right">327,301</td>
</tr>
<tr>
<th scope="row" role="rowheader">Oklahoma</th>
<td data-sort-value="46">46th</td>
<td data-sort-value="1965751200">Sep. 17, 1907</td>
<td data-sort-value="1960567200">Nov. 16, 1907</td>
<td data-sort-value="0.712" class="font-mono-sm text-tabular text-right">71.2%</td>
<td data-sort-value="180333" class="font-mono-sm text-tabular text-right">180,333</td>
<td data-sort-value="1657155" class="font-mono-sm text-tabular text-right">1,657,155</td>
</tr>
<tr>
<th scope="row" role="rowheader">Utah</th>
<td data-sort-value="45">45th</td>
<td data-sort-value="2340122400">Nov. 5, 1895</td>
<td data-sort-value="2334938400">Jan. 4, 1896</td>
<td data-sort-value="0.805" class="font-mono-sm text-tabular text-right">80.5%</td>
<td data-sort-value="31305" class="font-mono-sm text-tabular text-right">31,305</td>
<td data-sort-value="210779" class="font-mono-sm text-tabular text-right">210,779</td>
</tr>
</tbody>
</table>
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite">
<!-- this content will change when sort changes -->
</div>
<p class="margin-bottom-3">Data for illustration purposes only.</p>
</div>
<div class="usa-table-container--scrollable">
<table class="usa-table usa-table--striped">
<caption>Sortable striped table with various content types</caption>
<thead>
<tr>
<th data-sortable scope="col" role="columnheader">
Alphabetical
</th>
<th data-sortable scope="col" role="columnheader">
Month
</th>
<th data-sortable scope="col" role="columnheader">
Percent
</th>
<th data-sortable scope="col" role="columnheader">
Count
</th>
<th data-sortable scope="col" role="columnheader">
Rank (Ordinal)
</th>
<th data-sortable scope="col" role="columnheader">
Rank (Cardinal)
</th>
<th data-sortable scope="col" role="columnheader">
Unix Timestamp
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tango</th>
<td data-sort-value="3">March</td>
<td data-sort-value="0.206" class="font-mono-sm text-tabular text-right">20.6%</td>
<td data-sort-value="23612" class="font-mono-sm text-tabular text-right">23,612</td>
<td data-sort-value="3">Third</td>
<td data-sort-value="3">3rd</td>
<td data-sort-value="1332884673452">March 27, 2012</td>
</tr>
<tr>
<th scope="row">Foxtrot</th>
<td data-sort-value="4">April</td>
<td data-sort-value="0.026" class="font-mono-sm text-tabular text-right">2.6%</td>
<td data-sort-value="-32" class="font-mono-sm text-tabular text-right">-32</td>
<td data-sort-value="1">First</td>
<td data-sort-value="1">1st</td>
<td data-sort-value="1617974313232">April 9, 2021</td>
</tr>
<tr>
<th scope="row">Hilo</th>
<td data-sort-value="1">January</td>
<td data-sort-value="-0.036" class="font-mono-sm text-tabular text-right">-3.6%</td>
<td data-sort-value="0.002" class="font-mono-sm text-tabular text-right">0.002</td>
<td data-sort-value="2">Second</td>
<td>2nd</td>
<td data-sort-value="1611169964684">January 20, 2021</td>
</tr>
<tr>
<th scope="row">Bravo</th>
<td data-sort-value="12">December</td>
<td data-sort-value="-3.006" class="font-mono-sm text-tabular text-right">-300.6%</td>
<td data-sort-value="0" class="font-mono-sm text-tabular text-right">0</td>
<td data-sort-value="4">Fourth</td>
<td data-sort-value="4">4th</td>
<td data-sort-value="1608114345343">December 16, 2020</td>
</tr>
</tbody>
</table>
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
</div>
<div class="usa-table-container--scrollable">
<table class="usa-table usa-table--borderless">
<caption>Sortable borderless table with various content types</caption>
<thead>
<tr>
<th data-sortable scope="col" role="columnheader">
Alphabetical
</th>
<th data-sortable scope="col" role="columnheader">
Month
</th>
<th data-sortable scope="col" role="columnheader">
Percent
</th>
<th data-sortable scope="col" role="columnheader">
Count
</th>
<th data-sortable scope="col" role="columnheader">
Rank (Ordinal)
</th>
<th data-sortable scope="col" role="columnheader">
Rank (Cardinal)
</th>
<th data-sortable scope="col" role="columnheader">
Unix Timestamp
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tango</th>
<td data-sort-value="3">March</td>
<td data-sort-value="0.206" class="font-mono-sm text-tabular text-right">20.6%</td>
<td data-sort-value="23612" class="font-mono-sm text-tabular text-right">23,612</td>
<td data-sort-value="3">Third</td>
<td data-sort-value="3">3rd</td>
<td data-sort-value="1332884673452">March 27, 2012</td>
</tr>
<tr>
<th scope="row">Foxtrot</th>
<td data-sort-value="4">April</td>
<td data-sort-value="0.026" class="font-mono-sm text-tabular text-right">2.6%</td>
<td data-sort-value="-32" class="font-mono-sm text-tabular text-right">-32</td>
<td data-sort-value="1">First</td>
<td data-sort-value="1">1st</td>
<td data-sort-value="1617974313232">April 9, 2021</td>
</tr>
<tr>
<th scope="row">Hilo</th>
<td data-sort-value="1">January</td>
<td data-sort-value="-0.036" class="font-mono-sm text-tabular text-right">-3.6%</td>
<td data-sort-value="0.002" class="font-mono-sm text-tabular text-right">0.002</td>
<td data-sort-value="2">Second</td>
<td>2nd</td>
<td data-sort-value="1611169964684">January 20, 2021</td>
</tr>
<tr>
<th scope="row">Bravo</th>
<td data-sort-value="12">December</td>
<td data-sort-value="-3.006" class="font-mono-sm text-tabular text-right">-300.6%</td>
<td data-sort-value="0" class="font-mono-sm text-tabular text-right">0</td>
<td data-sort-value="4">Fourth</td>
<td data-sort-value="4">4th</td>
<td data-sort-value="1608114345343">December 16, 2020</td>
</tr>
</tbody>
</table>
<div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
</div>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()