Sortable table rows

A sorted column changes the row ordering based on alphabetical or numeric cell values.

Recently admitted US states (sortable table example)
Name Order admitted to union Date of ratification vote Date admitted to union Percent of voters in favor of ratification Votes cast in favor of ratification Estimated population at time of admission
Hawaii 50th Jun. 27, 1959 Aug. 21, 1959 94.3% 132,773 632,772
Alaska 49th Apr. 24, 1956 Jan. 3, 1959 68.1% 17,477 226,167
Arizona 48th Feb. 9, 1911 Feb. 14, 1912 78.7% 12,187 204,354
New Mexico 47th Nov. 5, 1911 Jan. 6, 1912 70.3% 31,742 327,301
Oklahoma 46th Sep. 17, 1907 Nov. 16, 1907 71.2% 180,333 1,657,155
Utah 45th Nov. 5, 1895 Jan. 4, 1896 80.5% 31,305 210,779

Data for illustration purposes only.

Sortable striped table with various content types
Alphabetical Month Percent Count Rank (Ordinal) Rank (Cardinal) Unix Timestamp
Tango March 20.6% 23,612 Third 3rd March 27, 2012
Foxtrot April 2.6% -32 First 1st April 9, 2021
Hilo January -3.6% 0.002 Second 2nd January 20, 2021
Bravo December -300.6% 0 Fourth 4th December 16, 2020
Sortable borderless table with various content types
Alphabetical Month Percent Count Rank (Ordinal) Rank (Cardinal) Unix Timestamp
Tango March 20.6% 23,612 Third 3rd March 27, 2012
Foxtrot April 2.6% -32 First 1st April 9, 2021
Hilo January -3.6% 0.002 Second 2nd January 20, 2021
Bravo December -300.6% 0 Fourth 4th December 16, 2020
<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>