表格增强: Data tables¶

mkdocs.yaml¶

首先需要启用如下的Markdown插件

YAML
markdown_extensions:
  - tables

其次，需要引入额外的JS文件，在 ./docs/javascripts/tablesort.js

JavaScript
document$.subscribe(function () {
    var tables = document.querySelectorAll("article table:not([class])")
    tables.forEach(function (table) {
        new Tablesort(table)
    })
})

最后，在mkdocs.yaml中引用该文件和渲染JS库

YAML
extra_javascript:
  - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
  - javascripts/tablesort.js

示例¶

代码

Markdown
| Method      | Description                          |
| ----------- | ------------------------------------ |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

效果

点击表头可以对当前列排序

Method	Description
`GET`	Fetch resource
`PUT`	Update resource
`DELETE`	Delete resource