Grid.js – Data imported from HTML Table Source breaks Sort

I’m working on adding progressive enhancement to my htmx powered site with grid.js for smarter tables with client side sorting. I already have links in these tables. However when you try to sort a column that has html in it it does nothing.

How do I fix it so my columns containing html are sortable? I’d rather not build a data fetcher service for what I’m doing here.

I’ve tried looking at the search documentation but there is little mention of the import from an html table options.

<table class="dc-dt">
    <thead>
        <tr>
            <th>Member Type</th>
            <th>Congress Member</th>
            <th>Party</th>
            <th>State</th>
            <th>Document Filer</th>
            <th>Destination</th>
            <th>Departure Date</th>
            <th>Return Date</th>
            <th>Sponsor</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-row-striped">
            <td class="px-4 py-2">
                <span class="badge bg-gray-500">Representative</span>
            </td>
            <td>
                <a href="/congress-member/J000304">Ronny Jackson</a>
            </td>
            <td>R</td>
            <td>TX</td>
            <td>
                Bryan Brody
            </td>
            <td>
                <a href="/travel-by-destination/New York, NY">New York, NY</a>
            </td>
            <td>Jul 25, 2024</td>
            <td>Jul 26, 2024</td>
            <td>United Nations Foundation</td>
        </tr>
        <tr class="table-row-striped">
            <td class="px-4 py-2">
                <span class="badge bg-gray-500">Representative</span>
            </td>
            <td>
                <a href="/congress-member/B001298">Don Bacon</a>
            </td>
            <td>R</td>
            <td>NE</td>
            <td>
                Matthew Duglin
            </td>
            <td>
                <a href="/travel-by-destination/Israel">Israel</a>
            </td>
            <td>Jul 13, 2024</td>
            <td>Jul 21, 2024</td>
            <td>American Israel Education Foundation</td>
        </tr>
    </tbody>
</table>

<script type="module">
    import {
        Grid,
        html
    } from "https://unpkg.com/gridjs?module";


    (function() {
        let x = document.getElementsByClassName('dc-dt');
        let tbl = new Grid({
            from: x[0],
            sort: true,
            search: true
        })

        tbl.render(document.getElementById('grid'));

        console.log(tbl);
    })();
</script>