From 2c0a34c0e109ab7c3c188a74a6c8fa276f528047 Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Fri, 12 Jul 2024 11:42:20 +0200 Subject: [PATCH 1/2] Add support for data tables --- assets/scss/components/_table.scss | 12 ++++++ config/_default/hugo.toml | 2 + data/structures/table.yml | 18 ++++++++- exampleSite/content/en/blog/components.md | 48 ++++++++++++++++++++++- exampleSite/hugo_stats.json | 2 + go.mod | 1 + go.sum | 4 ++ layouts/partials/assets/table.html | 15 ++++++- layouts/shortcodes/table.html | 17 +++++++- package-lock.json | 4 +- package.json | 2 +- 11 files changed, 116 insertions(+), 9 deletions(-) diff --git a/assets/scss/components/_table.scss b/assets/scss/components/_table.scss index b2133aa7d..d5ebfd900 100644 --- 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 index 919b850e7..3d0193f4f 100644 --- 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 index f3fd0b400..65dc916d3 100644 --- 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 index bbda4eace..3ef50a487 100644 --- 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 >}} +## Data tables + +As an example, the following shortcode displays a responsive table that uses advanced controls. + + +{{< example lang="markdown" >}} +{{}} +| # | 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 | +{{}} +{{< /example >}} + + ## Formula (KaTeX) As an example, the following markdown renders two formulas using the KaTeX typesetting library. @@ -47,3 +90,6 @@ As an example, the following shortcode displays an interactive map of the city o {{}} {{< /example >}} + + +{{< args "args" >}} \ No newline at end of file diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 0f37807fd..cc75b909c 100644 --- 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 index b6addd460..7fe65f8a7 100644 --- 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 index 0bebc0e96..6e9180801 100644 --- 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 index 03d29e3b7..ba3a32bea 100644 --- 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 := "" -}} -{{- $new := printf "
" $class -}} +{{- $new := printf "
" $class (trim $attributes " ") -}} + {{ $input := replace $input $old $new -}} {{- with $responsive }}
{{ end -}} {{ $input | safeHTML }} diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html index bba177f16..2bda80f84 100644 --- a/layouts/shortcodes/table.html +++ b/layouts/shortcodes/table.html @@ -15,22 +15,35 @@ {{ $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 }} + {{ 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 := "
" -}} -{{- $new := printf "
" $class -}} +{{- $new := printf "
" $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 index ea6fd8bc6..1c337a6cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gethinode/hinode", - "version": "0.24.12", + "version": "0.24.13", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gethinode/hinode", - "version": "0.24.12", + "version": "0.24.13", "license": "MIT", "dependencies": { "@fullhuman/postcss-purgecss": "^6.0.0", diff --git a/package.json b/package.json index bef6ee52a..b288b3468 100644 --- 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", From 7c786048cce7a1d0393158b108afc900d137b496 Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Fri, 12 Jul 2024 11:43:51 +0200 Subject: [PATCH 2/2] Remove debugging element --- exampleSite/content/en/blog/components.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/exampleSite/content/en/blog/components.md b/exampleSite/content/en/blog/components.md index 3ef50a487..82dfeabb7 100644 --- a/exampleSite/content/en/blog/components.md +++ b/exampleSite/content/en/blog/components.md @@ -90,6 +90,3 @@ As an example, the following shortcode displays an interactive map of the city o {{}} {{< /example >}} - - -{{< args "args" >}} \ No newline at end of file