Merge pull request #1032 from gethinode/develop

Add support for data tables
gethinode · Jul 12, 2024 · 151b1d2 · 151b1d2
2 parents b632078 + f58f8f1
commit 151b1d2
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 9 deletions.
diff --git a/assets/scss/components/_table.scss b/assets/scss/components/_table.scss
@@ -1,3 +1,15 @@
+.datatable-container {
+    border-bottom: none if($enable-important-utilities, !important, null);
+}
+
+.datatable-bottom {
+    padding-top: 0 if($enable-important-utilities, !important, null);
+}
+
+.datatable-sorter {
+    padding-right: 1rem;
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .table-striped, .table-striped-columns {

diff --git a/config/_default/hugo.toml b/config/_default/hugo.toml
@@ -134,6 +134,8 @@ home = ["HTML", "RSS", "REDIR"]
     path = "github.com/gethinode/mod-leaflet"
   [[module.imports]]
     path = "github.com/gethinode/mod-lottie"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-simple-datatables"
   [[module.imports]]
     path = "github.com/gethinode/mod-utils/v2"
 # toml-docs-end modules
diff --git a/data/structures/table.yml b/data/structures/table.yml
@@ -1,6 +1,7 @@
 comment: >-
   Makes a markdown table responsive. Responsive tables scroll horizontally to
-  improve their layout on smaller screens.
+  improve their layout on smaller screens. To features `sortable`, `paging`,
+  and `searchable` require the module `simple-datatables`.
 arguments:
   breakpoint:
     type: select
@@ -24,6 +25,21 @@ arguments:
     type: string
     optional: true
     comment: Class attribute of the table element, e.g. `table-striped-columns w-auto`.
+  sortable:
+    type: bool
+    optional: true
+    comment: Toggle the ability to sort the columns.
+    release: v0.24.13
+  paging:
+    type: bool
+    optional: true
+    comment: Whether paging is enabled for the table.
+    release: v0.24.13
+  searchable:
+    type: bool
+    optional: true
+    comment: Toggle the ability to search the dataset.
+    release: v0.24.13
 body:
   type: string
   optional: false

diff --git a/exampleSite/content/en/blog/components.md b/exampleSite/content/en/blog/components.md
@@ -10,7 +10,7 @@ thumbnail:
   authorURL: https://unsplash.com/@ryoji__iwata
   origin: Unsplash
   originURL: https://unsplash.com/photos/5siQcvSxCP8
-modules: ["katex", "leaflet", "lottie"]
+modules: ["katex", "leaflet", "lottie", "simple-datatables"]
 ---
 
 Hinode provides several shortcodes on top of the common [Bootstrap elements]({{< relref "bootstrap-elements" >}}). Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
@@ -25,6 +25,49 @@ As an example, the following shortcode shows an animation that plays on hover.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Data tables
+
+As an example, the following shortcode displays a responsive table that uses advanced controls.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="markdown" >}}
+{{</* table sortable="true" paging="true" searchable="true" */>}}
+|  #  | Heading |
+|-----|---------|
+|  1. | Item 1  |
+|  2. | Item 2  |
+|  3. | Item 3  |
+|  4. | Item 4  |
+|  5. | Item 5  |
+|  6. | Item 6  |
+|  7. | Item 7  |
+|  8. | Item 8  |
+|  9. | Item 9  |
+| 10. | Item 10  |
+| 11. | Item 11  |
+| 12. | Item 12  |
+| 13. | Item 13  |
+| 14. | Item 14  |
+| 15. | Item 15  |
+| 16. | Item 16  |
+| 17. | Item 17  |
+| 18. | Item 18  |
+| 19. | Item 19  |
+| 20. | Item 20  |
+| 21. | Item 21  |
+| 22. | Item 22  |
+| 23. | Item 23  |
+| 24. | Item 24  |
+| 25. | Item 25  |
+| 26. | Item 26  |
+| 27. | Item 27  |
+| 28. | Item 28  |
+| 29. | Item 29  |
+| 30. | Item 30  |
+{{</* /table */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Formula (KaTeX)
 
 As an example, the following markdown renders two formulas using the KaTeX typesetting library.

diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
@@ -174,6 +174,7 @@
       "d-none-light",
       "d-sm-block",
       "d-sm-none",
+      "data-table",
       "display-1",
       "display-4",
       "dropdown",
@@ -503,6 +504,7 @@
       "collapse",
       "collapse-1",
       "command-prompt",
+      "data-tables",
       "docs",
       "documentation",
       "example",

diff --git a/go.mod b/go.mod
@@ -10,6 +10,7 @@ require (
 	github.com/gethinode/mod-katex v1.1.0 // indirect
 	github.com/gethinode/mod-leaflet v1.1.0 // indirect
 	github.com/gethinode/mod-lottie v1.5.5 // indirect
+	github.com/gethinode/mod-simple-datatables v1.0.2 // indirect
 	github.com/gethinode/mod-utils/v2 v2.3.10 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect

diff --git a/go.sum b/go.sum
@@ -184,6 +184,10 @@ github.com/gethinode/mod-lottie v1.5.4 h1:+xbamSsjcnP2tyzGl0CA1enma7gkAp67wenmuP
 github.com/gethinode/mod-lottie v1.5.4/go.mod h1:gALqz48aYpoDLxJOI3LzIpdy0Eq/lOBNtlcOxABa9tg=
 github.com/gethinode/mod-lottie v1.5.5 h1:uEJKsz+ovsZtbGkMhPONcIhtG6M3RjYiK+iVoScLOVo=
 github.com/gethinode/mod-lottie v1.5.5/go.mod h1:VTvBxD8VokICwnEqM0VUZFZHBYxLf4/grDFQyEh1DL0=
+github.com/gethinode/mod-simple-datatables v1.0.0 h1:Dj4WGw12OkaimwkCpLn5Jhmd49dvNJW9O2P/W9F+HlQ=
+github.com/gethinode/mod-simple-datatables v1.0.0/go.mod h1:K8T7fIdb8pMOB+OSW4A5lz5IW99+HyzcTgx764fvOGw=
+github.com/gethinode/mod-simple-datatables v1.0.2 h1:zhqxHet3iLQWYCBbGROALpOY9zQlptMycFkz1Tto5bA=
+github.com/gethinode/mod-simple-datatables v1.0.2/go.mod h1:mmrcvAJU2i3SMU56VmQ5PW43uDXBcsJKcZwCHrvl3Kc=
 github.com/gethinode/mod-utils v1.0.0 h1:cqHm2xS5uDiJzRm1KfHaNbq6uMVDKLhQa8/BuTZ1nhY=
 github.com/gethinode/mod-utils v1.0.0/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
 github.com/gethinode/mod-utils v1.0.1 h1:jhZGlGFHHL1f5HXbBMXfiZ2gCz4TVafAzjnRPTIBSEE=

diff --git a/layouts/partials/assets/table.html b/layouts/partials/assets/table.html
@@ -7,6 +7,9 @@
 {{ $page := .page }}
 {{ $input := .input }}
 {{ $args := .args }}
+{{ $sortable := .sortable | default false }}
+{{ $paging := .paging | default false }}
+{{ $searchable := .searchable | default false }}
 
 {{- $responsiveVals := slice "table-responsive" "table-responsive-none" "table-responsive-sm" "table-responsive-md" "table-responsive-lg" "table-responsive-xl" "table-responsive-xxl" -}}
 {{- $responsive := intersect $args $responsiveVals -}}
@@ -18,13 +21,21 @@
     {{ $responsive = (slice "table-responsive") -}}
 {{- end -}}
 
+{{- $class := delimit $main " " -}}
+{{ if or $sortable $paging $searchable }}{{ $class = trim (printf "%s data-table" $class) " " }}{{ end }}
 {{- $input := $input | $page.RenderString }}
 {{- $input = replace $input "style=\"text-align:left\"" "class=\"text-start\"" -}}
 {{- $input = replace $input "style=\"text-align:center\"" "class=\"text-center\"" -}}
 {{- $input = replace $input "style=\"text-align:right\"" "class=\"text-end\"" -}}
-{{- $class := delimit $main " " -}}
+
+{{ $attributes := "" }}
+{{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
+{{ if $paging }}{{ $attributes = printf "%s data-table-paging=true" $attributes }}{{ end }}
+{{ if $searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}
+
 {{- $old := "<table>" -}}
-{{- $new := printf "<table class=\"table %s\">" $class -}}
+{{- $new := printf "<table class=\"table %s\" %s>" $class (trim $attributes " ") -}}
+
 {{ $input := replace $input $old $new -}}
 {{- with $responsive }}<div class="{{ delimit . " " }}">{{ end -}}
 {{ $input | safeHTML }}

diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html
@@ -15,22 +15,35 @@
 <!-- Initialize arguments -->
 {{ $breakpoint := "" }}
 {{ $class := "" }}
+{{ $sortable := false }}
+{{ $paging := false }}
+{{ $searchable := false }}
+
 {{- if .IsNamedParams -}}
     {{ $breakpoint = .Get "breakpoint" }}
     {{ $class = .Get "class" | default "" }}
+    {{ $sortable = partial "utilities/CastBool.html" (.Get "sortable") | default false }}
+    {{ $paging = partial "utilities/CastBool.html" (.Get "paging") | default false }}
+    {{ $searchable = partial "utilities/CastBool.html" (.Get "searchable") | default false }}
 {{ else }}
     {{ $breakpoint = .Get 0 }}
 {{ end }}
 
 <!-- Main code -->
+ {{ if or $sortable $paging $searchable }}{{ $class = trim (printf "%s data-table" $class) " " }}{{ end }}
 {{- $input := .Inner | .Page.RenderString }}
 {{- $input = replace $input "style=\"text-align:left\"" "class=\"text-start\"" -}}
 {{- $input = replace $input "style=\"text-align:center\"" "class=\"text-center\"" -}}
 {{- $input = replace $input "style=\"text-align:right\"" "class=\"text-end\"" -}}
+
+{{ $attributes := "" }}
+{{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
+{{ if $paging }}{{ $attributes = printf "%s data-table-paging=true" $attributes }}{{ end }}
+{{ if $searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}
+
 {{- $old := "<table>" -}}
-{{- $new := printf "<table class=\"table %s\">" $class -}}
+{{- $new := printf "<table class=\"table %s\" %s>" $class (trim $attributes " ") -}}
 {{ $input := replace $input $old $new -}}
-
 {{ if not $error }}
     {{ if eq $breakpoint "none" }}
         {{ $input | safeHTML }}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.24.12",
+  "version": "0.24.13",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",