Mkdocs-material: Sortable tables

[winterwolf]

__I checked that...__

• [x] ... the documentation does not mention anything about my idea
• [x] ... to my best knowledge, my idea wouldn't break something for other users
• [x] ... there are no open or closed issues that are related to my idea

Description

Can you please make tables sortable?

Use Cases

In most cases, tables provide data that you would like to be able to sort by various criteria (table columns).

Screenshots / Mockups

https://www.cssscript.com/demo/html-table-sortable

[squidfunk]

Have you tried solving this with some extra JavaScript? Other than that, we can leave this feature request open and see if some other people might find this useful.

[winterwolf]

Yes, I tried and it worked, but it looks bad. I don't have the same CSS skills as you and what I get looks unnatural. It's doesn't fit your style.

[squidfunk]

I guess we could tackle this as an optional feature, which is part of Material for MkDocs Insiders.

[facelessuser]

This may be possible already without you having to do anything.

[squidfunk]

I haven't investigated this, yet.

[facelessuser]

I'm 99% sure this can be done outside Material doing anything. I've used table sorting outside Material before. I can probably demo something.

[facelessuser]

So, using this library, sorting tables is pretty easy: https://www.kryogenix.org/code/browser/sorttable/

I include the JS with extra_javascript, but also include a simple loader:

(() => {
  const onReady = function(fn) {
    document.addEventListener("DOMContentLoaded", fn)
    document.addEventListener("DOMContentSwitch", fn)
  }

  onReady(() => {
    if (typeof sorttable !== 'undefined') {
      const tables = document.querySelectorAll('article table')

      for (let i = 0; i < tables.length; i++) {
        sorttable.makeSortable(tables[i])
      }
    }
  })
})()

And:

Now, the current unreleased Python Markdown I think adds support for setting classes on and such on th and td elements with the attr_list extension which should allow you to configure sort styles on columns and provide sort values for a give td to customize the sort. This would allow you to use Markdown tables and configure sort, but without that unreleased feature, you may have to use raw HTML.

[squidfunk]

Cool, thanks for prototyping! I guess we’ll wait for Python Markdown and then add an example to the docs how to achieve this with customization. I’ve been adding more and more components to the reference and data tables are still on my list.

[facelessuser]

If you're happy with the general alpha sort, then you can use it now. It's only when you want to sort numerically and such or force a sort order by applying some sort value other than the content that you need to use attr_list.

But yeah, I'd wait to write it up.

[facelessuser]

There are probably other options out there too. I know I've used the one I referenced a number times. It's been around for a long time, but it still works 🤷 .

[winterwolf]

@facelessuser Thank you! Your solution works good and my issue is solved, but I believe that this feature would be useful not only for me and it would be nice to add it into Material.

[squidfunk]

Let's leave this open as a reminder to add the respective example to the upcoming data table documentation.

[squidfunk]

I decided to integrate tablesort in 0ccbcb6e with Material for MkDocs, as it seems to be more accessible and provides an unobtrusive way to style it with CSS. See the new docs here, which include instructions and a demo:
https://squidfunk.github.io/mkdocs-material/reference/data-tables/#sortable-tables

The new styles will be released with the next version.

[squidfunk]

The additional CSS was released as part of 5.5.5. Follow this guide to learn how to enable sortable data tables:
https://squidfunk.github.io/mkdocs-material/reference/data-tables/#sortable-tables