USWDS - Bug: Multiple Tables with Default Sort on Same Page Not Working

[joeliir]

Describe the bug

If you have multiple tables displayed on a single page, and each has a default sort set, only the first table is sorted on load, and all sequential tables do not have the sort applied. The sorting works on the additional tables once you click on it but not applied on load.

Steps to reproduce the bug

1. Copy source for table from https://designsystem.digital.gov/components/table/ for the table with sort.
2. Paste the table in your source code.
3. Paste the table again in your source code but change the column that is sorted.
4. Both tables do not have default sort applied when the page is rendered.

Expected Behavior

Both tables would have the default sort applied.

Related code

<div class="usa-table-container--scrollable" tabindex="0">
    <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"></div>
    <p class="margin-bottom-3">Data for illustration purposes only.</p>
</div>
<div class="usa-table-container--scrollable" tabindex="0">
    <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">Order admitted to union</th>
            <th data-sortable scope="col" role="columnheader" aria-sort="descending">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"></div>
    <p class="margin-bottom-3">Data for illustration purposes only.</p>
</div>

Screenshots

No response

System setup

• USWDS 3.7.0
• Browser: Edge, Chrome, Firefox

Additional context

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct.
• [X] I checked the current issues for duplicate bug reports.