How do I implement numeric table sorting?

[elliot-100]

Hi, I got string sorting working fine by following the docs, but I can't work out how to get numeric sort working.

I've added the extra tablesort component to mkdocs.yml:

site_name: My site
theme:
  name: material
extra_javascript:
  - https://unpkg.com/[email protected]/dist/tablesort.min.js
  - https://unpkg.com/[email protected]/dist/tablesort.number.js
  - javascripts/tablesort.js

And I have a very simple table:

| Number | Description |
|--------|-------------|
| 1      | C           |
| 10     | B           |
| 2      | A           |

My understanding is that this should be sufficient to enable numeric sorting on Column 1, but it uses string sorting 1,10,2 / 2,10,1.

I then read How to specify the sort method for a column in a sortable table, took the suggestion to use HTML instead of Markdown in order to add the custom attribute, copied the generated HTML and added an explicit sort method on Column 1:

<table>
<thead>
<tr>
<th data-sort-method='number'>Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>10</td>
<td>B</td>
</tr>
<tr>
<td>2</td>
<td>A</td>
</tr>
</tbody>
</table>

But this behaves the same way. I can see tablesort.number.js is linked in the generated HTML, but I don't know Javascript, so am unsure how to troubleshoot further.

...
<script src="[assets/javascripts/bundle.c8b220af.min.js](http://127.0.0.1:8000/assets/javascripts/bundle.c8b220af.min.js)"></script>
      
        <script src="https://unpkg.com/[email protected]/dist/tablesort.min.js"></script>
      
        <script src="https://unpkg.com/[email protected]/dist/tablesort.number.js"></script>
      
        <script src="[javascripts/tablesort.js](http://127.0.0.1:8000/javascripts/tablesort.js)"></script>
...

[elliot-100]

I've realised I made a very simple error - I adapted tablesort's demo code using local JS, to using
https://unpkg.com, and didn't check the URL to the extra sort script. I'm too used to coding environments where code fails if resources aren't found...

So my mkdocs.yml is corrected to:

..
extra_javascript:
  - https://unpkg.com/[email protected]/dist/tablesort.min.js
  - https://unpkg.com/[email protected]/dist/sorts/tablesort.number.min.js
  - javascripts/tablesort.js