[Feature] Sort table (#432)

* sort table using tablesort

* some changes

* add docs

* update package-lock.json

* feat: add CSS for arrow

* chore: clean up code and import assets correctly

* docs: add chinese documentation

Co-authored-by: PCloud <52968553+HEIGE-PCloud@users.noreply.github.com>

assets/css/_page/_single.scss

@@ -245,6 +245,46 @@
             border-color: darken($table-thead-color-black, 2%);
           }
         }
+
+        th[role=columnheader]:not(.no-sort) {
+          cursor: pointer;
+        }
+
+        th[role=columnheader]:not(.no-sort):after {
+          content: '';
+          float: right;
+          margin: .7rem -.5rem 0px .5rem;
+          border-width: 0 4px 4px;
+          border-style: solid;
+          border-color: $global-font-color transparent;
+          [theme=dark] & {
+            border-color: $global-font-color-dark transparent;
+          }
+          [theme=black] & {
+            border-color: $global-font-color-black transparent;
+          }
+          visibility: hidden;
+          opacity: 0;
+          -ms-user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          user-select: none;
+        }
+
+        th[aria-sort=ascending]:not(.no-sort):after {
+          border-bottom: none;
+          border-width: 4px 4px 0;
+        }
+
+        th[aria-sort]:not(.no-sort):after {
+          visibility: visible;
+          opacity: 0.4;
+        }
+
+        th[role=columnheader]:not(.no-sort):hover:after {
+          visibility: visible;
+          opacity: 1;
+        }
       }
     }
 

assets/data/cdn/jsdelivr.yml

@@ -80,4 +80,6 @@ libFiles:
   vssueGitlabJS: vssue@1.4.8/dist/vssue.gitlab.min.js
   vssueCSS: vssue@1.4.8/dist/vssue.min.css
   # waline@1.5.2 https://github.com/walinejs/waline
-  walineJS: "@waline/client@1.5.2/dist/Waline.min.js"
+  walineJS: "@waline/client@1.5.2/dist/Waline.min.js"
+  # tablesort@5.3.0 https://github.com/tristen/tablesort
+  tablesort: "tablesort@5.3.0/src/tablesort.min.js"

assets/js/shims/tablesort.js

@@ -0,0 +1 @@
+module.exports = window.Tablesort

assets/js/theme.js

@@ -2,6 +2,7 @@
 /* eslint-disable no-undef */
 // import { autocomplete } from '@algolia/autocomplete-js'
 import * as topbar from 'topbar'
+const Tablesort = require('tablesort')
 
 function forEach (elements, handler) {
   elements = elements || []
@@ -541,6 +542,9 @@ function initTable () {
     $wrapper.className = 'table-wrapper'
     $table.parentElement.replaceChild($wrapper, $table)
     $wrapper.appendChild($table)
+    if (window.config?.table?.sort) {
+      new Tablesort($table)
+    }
   })
 }
 

assets/lib/VERSION

@@ -30,3 +30,4 @@ valine@1.4.16 https://github.com/xCss/Valine
 vssue@1.4.8 https://github.com/meteorlxy/vssue
 vue@v2.6.14 https://github.com/vuejs/vue
 waline@1.5.2 https://github.com/walinejs/waline
+tablesort@5.3.0 https://github.com/tristen/tablesort

exampleSite/config.toml

@@ -725,6 +725,12 @@ enableEmoji = true
       # the maximum number of lines of displayed code by default
       # 默认展开显示的代码行数
       maxShownLines = 10
+    # Table config
+    # 表格配置
+    [params.page.table]
+      # whether to enable sorting in the tables
+      # 是否开启表格排序
+      sort = true
     # KaTeX mathematical formulas config (KaTeX https://katex.org/)
     # KaTeX 数学公式配置 (KaTeX https://katex.org/)
     [params.page.math]

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -502,6 +502,10 @@ Please open the code block below to view the complete sample configuration :(far
       copy = true
       # the maximum number of lines of displayed code by default
       maxShownLines = 10
+    # {{< version 0.2.14 >}} Table config
+    [params.page.table]
+      # whether to enable sorting in the tables
+      sort = true
     # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
     [params.page.mapbox]
       # access token of Mapbox GL JS

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -493,6 +493,10 @@ hugo
       copy = true
       # 默认展开显示的代码行数
       maxShownLines = 10
+    # {{< version 0.2.14 >}} 表格配置
+    [params.page.table]
+      # 是否开启表格排序
+      sort = true
     # {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} 数学公式
     [params.page.math]
       enable = true

exampleSite/content/posts/theme-documentation-content/index.en.md

@@ -135,6 +135,9 @@ toc:
 code:
   copy: true
   # ...
+table:
+  sort: true
+  # ...
 math:
   enable: true
   # ...
@@ -205,6 +208,7 @@ sponsor:
 
 * **toc**: {{< version 0.2.9 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **table**: {{< version 0.2.14 >}} the same as the `params.page.table` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **share**: the same as the `params.page.share` part in the [site configuration](../theme-documentation-basics#site-configuration).

exampleSite/content/posts/theme-documentation-content/index.zh-cn.md

@@ -134,6 +134,9 @@ toc:
 code:
   copy: true
   # ...
+table:
+  sort: true
+  # ...
 math:
   enable: true
   # ...
@@ -204,6 +207,7 @@ sponsor:
 
 * **toc**: {{< version 0.2.9 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.toc` 部分相同.
 * **code**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.code` 部分相同.
+* **table**: {{< version 0.2.14 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.table` 部分相同.
 * **math**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.math` 部分相同.
 * **mapbox**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.mapbox` 部分相同.
 * **share**: 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.share` 部分相同.

layouts/partials/assets.html

@@ -41,6 +41,13 @@
 {{- $source := $cdn.lazysizesJS | default "lib/lazysizes/lazysizes.min.js" -}}
 {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
 
+{{- /* tablesort */ -}}
+{{- if $params.table | and $params.table.sort -}}
+    {{- $source := $cdn.tablesort | default "lib/tablesort/tablesort.min.js" -}}
+    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+    {{- $config = dict "sort" true | dict "table" | merge $config -}}
+{{- end -}}
+
 {{- /* twemoji */ -}}
 {{- if $params.twemoji -}}
     {{- $source := $cdn.twemojiJS | default "lib/twemoji/twemoji.min.js" -}}
@@ -258,6 +265,7 @@
 {{- /* Theme script */ -}}
 {{- $shims := dict -}}
 {{- $shims = dict "topbar" "js/shims/topbar.js" | merge $shims -}}
+{{- $shims = dict "tablesort" "js/shims/tablesort.js" | merge $shims -}}
 {{- $options := dict -}}
 {{- $options = dict "targetPath" "js/theme.min.js" | merge $options -}}
 {{- $options = dict "minify" true | merge $options -}}