Selector for enabling just some sortable tables, not all

[joapuiib]

Following the documentation in Sortable tables, the selector article table:not([class]) enables tablesort in all Markdown tables, since no class can be specified.

The same selector is used to style tables in the page.

mkdocs-material/src/templates/assets/stylesheets/main/_typeset.scss

Lines 450 to 458 in 92bb867

	table:not([class]) {
	display: inline-block;
	max-width: 100%;
	overflow: auto;
	font-size: px2rem(12.8px);
	touch-action: auto;
	background-color: var(--md-default-bg-color);
	border: px2rem(1px) solid var(--md-typeset-table-color);
	border-radius: px2rem(2px);

It works perfectly as long as you want to enable tablesort in all Markdown tables but, how would you enable tablesort just to some of them?

• I've thought of using a class="sortable" could be a solution, but then, styles are not rendered since in only works for tables without a class.

  Since attr_list is limited in setting table classes, for now, I'm using HTML.

I can solve it in my custom theme by copying the styles to another class selector, but I'm writing this so maybe we can think of a solution that might benefit other users without the need of a custom theme or extra CSS.

I've thought that one possible solution to this would be adding another selector to the CSS rule with a Material for Mkdocs class, for example, md-datatable. Then, I would be able to style and sort a table with class="md-datatable sortable".

---

Additional question:

Since attr_list is limited in setting table classes, for now, I'm using HTML.

Has anyone been able to enable just some sortable tables only using Markdown?

Thanks in advance.

[joapuiib]

For now, I've found a workaround which doesn't need extra CSS using the HTML Block Extension.

/// html | div.table-sortable
| Name | Age | Country |
|------|-----|---------|
| John | 27  | USA     |
| Jane | 23  | Canada  |
| Doe  | 45  | UK      |
///

This will render a <div class="table-sortable"> around the Markdown table.

Then, we can configure tablesort.js to select only those tables.

document$.subscribe(function() {
  var tables = document.querySelectorAll("article div.table-sortable table")
  tables.forEach(function(table) {
    new Tablesort(table)
  })
})