Merge pull request #1278 from d-oit/data-table-options

feat: simple-datatable options for paging
Include full Dutch translation of components page
2025-10-07 01:54:23 +00:00 · 2024-10-28 07:43:37 +01:00 · 2024-10-28 07:33:38 +01:00 · 2024-10-28 07:33:18 +01:00 · 2024-10-28 07:33:03 +01:00 · 2024-10-28 07:32:49 +01:00
15 changed files with 333 additions and 13 deletions
--- a/assets/scss/common/_variables.scss
+++ b/assets/scss/common/_variables.scss
@@ -25,6 +25,8 @@ strong {
 $black:                       #000 !default;
 $btn-toggle-color:              $black !default;

+$card-color:                    var(--bs-body-color);
+
 $carousel-dark-indicator-active-bg:  #fff !default;
 $carousel-dark-caption-color:        #fff !default;
 $carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
--- a/data/structures/file.yml
+++ b/data/structures/file.yml
@@ -38,3 +38,8 @@ arguments:
    type: string
    optional: true
    comment: Class attribute of the tab control that wraps the file element.
+  options:
+    type: string
+    optional: true
+    comment: Hugo highlighting options.
+    release: v0.27.6
--- a/data/structures/table.yml
+++ b/data/structures/table.yml
@@ -35,6 +35,21 @@ arguments:
    optional: true
    comment: Whether paging is enabled for the table.
    release: v0.24.13
+  pagingOptionPerPage:
+    type: int
+    optional: true
+    comment: >-
+      Sets the maximum number of rows to display on each page. Requires
+      `paging = true`.
+    release: v0.27.8 
+  pagingOptionPageSelect:
+    type: string
+    optional: true
+    comment: >-
+      Sets the per page options in the dropdown. Must be an array of integers or
+      arrays in the format [label (string), value (int)]. Requires
+      `paging = true`. 
+    release: v0.27.8 
  searchable:
    type: bool
    optional: true
--- a/exampleSite/content/en/blog/components.md
+++ b/exampleSite/content/en/blog/components.md
@@ -31,7 +31,7 @@ As an example, the following shortcode displays a responsive table that uses adv

 <!-- markdownlint-disable MD037 MD058 -->
 {{< example lang="markdown" >}}
-{{</* table sortable="true" paging="true" searchable="true" */>}}
+{{</* table sortable="true" paging="true" searchable="true" pagingOptionPerPage=5 */>}}
 |  #  | Heading |
 |-----|---------|
 |  1. | Item 1  |
--- a/exampleSite/content/nl/blog/components.md
+++ b/exampleSite/content/nl/blog/components.md
@@ -0,0 +1,92 @@
+---
+author: Mark Dumay
+title: Componenten
+date: 2023-09-23
+description: Gebruik shortcodes om diverse componenten vanuit een externe softwarebibliotheek toe te voegen.
+tags: ["bootstrap", "shortcode"]
+thumbnail:
+  url: img/puzzle.jpg
+  author: Ryoji Iwata
+  authorURL: https://unsplash.com/@ryoji__iwata
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/5siQcvSxCP8
+modules: ["leaflet", "lottie", "simple-datatables"]
+---
+
+Hinode bevat meerdere shortcodes naast de generieke Bootstrap elementen. Zie de [officiële documentatie]({{% param "links.hinode_docs" %}}) voor meer informatie.
+
+## Animatie
+
+Het volgende voorbeeld gebruikt een shortcode om een animatie te tonen, die afspeelt zodra je er met de muis overheen beweegt.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* animation data="gatin.json" auto=false hover=true class="col-6 mx-auto" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Gegevenstabellen
+
+Het volgende voorbeeld gebruikt een shortcode om een responsieve tabel met geavanceerde mogelijkheden te tonen.
+
+<!-- markdownlint-disable MD037 MD058 -->
+{{< example lang="markdown" >}}
+{{</* table sortable="true" paging="true" searchable="true" pagingOptionPerPage=5 */>}}
+|  #  | Kop     |
+|-----|---------|
+|  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 -->
+
+## Formule (KaTeX)
+
+Het volgende voorbeeld gebruikt Markdown om twee formules met behulp van KaTeX op de server te genereren.
+
+{{< example lang="markdown" >}}
+Dit is een inline $-b \pm \sqrt{b^2 - 4ac} \over 2a$ formule
+
+Dit is geen inline formule:
+
+$$x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}$$  
+$$\forall x \in X, \quad \exists y \leq \epsilon$$
+{{< /example >}}
+
+## Kaart
+
+Het volgende voorbeeld gebruikt een shortcode om een interactieve kaart van Amsterdam te tonen.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* map lat=52.377 long=4.90 zoom=13 popup="Amsterdam Central Station" popup-lat=52.378062 popup-long=4.900562 */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -495,6 +495,7 @@
      "accordéon",
      "alert",
      "alerte",
+      "animatie",
      "animation",
      "badge",
      "barre-de-navigation",
@@ -560,6 +561,7 @@
      "footer-file-collapse-1",
      "formula-katex",
      "formule-katex",
+      "gegevenstabellen",
      "groupe-de-boutons",
      "groupe-de-cartes",
      "how-do-we-use-cookies",
@@ -571,6 +573,7 @@
      "indicateur-de-chargement",
      "infobulle",
      "invite-de-commandes",
+      "kaart",
      "language-selector",
      "leaflet-map-0",
      "lien",
--- a/go.mod
+++ b/go.mod
@@ -12,7 +12,7 @@ require (
 	github.com/gethinode/mod-katex v1.1.2 // indirect
 	github.com/gethinode/mod-leaflet v1.2.0 // indirect
 	github.com/gethinode/mod-lottie v1.5.11 // indirect
-	github.com/gethinode/mod-simple-datatables v1.0.14 // indirect
+	github.com/gethinode/mod-simple-datatables v1.1.0 // indirect
 	github.com/gethinode/mod-utils/v2 v2.8.3 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240501124520-961c3ae84a87 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect
--- a/go.sum
+++ b/go.sum
@@ -262,6 +262,8 @@ github.com/gethinode/mod-simple-datatables v1.0.13 h1:3GTn46Zh56SFzCUP7CUSrmp/Zo
 github.com/gethinode/mod-simple-datatables v1.0.13/go.mod h1:a2qIdYegX5gBubGbspuHv/2UA/8O89oUG/U5hd7jLK8=
 github.com/gethinode/mod-simple-datatables v1.0.14 h1:332WtbaQtTm7VP0b7zYfpogTBcOEetkJrNd01K4d/JE=
 github.com/gethinode/mod-simple-datatables v1.0.14/go.mod h1:mP3yjAdVE1G6JHfv8VVsRmvaPlPwddXknI675AuVs2I=
+github.com/gethinode/mod-simple-datatables v1.1.0 h1:Qc8eJOcVjxIHNfgrZf/bKe8+spCLrJTVwsC8d9ct7i0=
+github.com/gethinode/mod-simple-datatables v1.1.0/go.mod h1:8q/6f3uAPNTTP5NjEJOuXr6tEWelRFLJfzVJ3AODMlQ=
 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=
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -1,7 +1,191 @@
 {
  "htmlElements": {
-    "tags": null,
-    "classes": null,
-    "ids": null
+    "tags": [
+      "a",
+      "body",
+      "button",
+      "div",
+      "footer",
+      "form",
+      "head",
+      "html",
+      "img",
+      "input",
+      "label",
+      "li",
+      "link",
+      "meta",
+      "nav",
+      "ol",
+      "p",
+      "path",
+      "script",
+      "small",
+      "span",
+      "strong",
+      "svg",
+      "symbol",
+      "title",
+      "ul",
+      "use"
+    ],
+    "classes": [
+      "active",
+      "align-items-center",
+      "align-self-center",
+      "align-self-end",
+      "ball",
+      "bg-body",
+      "bg-opacity-10",
+      "bg-primary",
+      "bottom-0",
+      "bottom-bar",
+      "breadcrumb",
+      "breadcrumb-item",
+      "btn",
+      "btn-close",
+      "btn-primary",
+      "checkbox",
+      "col",
+      "col-12",
+      "col-6",
+      "col-md-2",
+      "col-md-3",
+      "col-md-4",
+      "col-md-8",
+      "col-md-9",
+      "col-sm-12",
+      "collapse",
+      "collapsed",
+      "container-fluid",
+      "container-xxl",
+      "d-flex",
+      "d-inline",
+      "d-md-block",
+      "d-none",
+      "display-1",
+      "display-4",
+      "emphasis",
+      "end-0",
+      "fa",
+      "fa-10x",
+      "fa-2x",
+      "fa-book-open",
+      "fa-ellipsis",
+      "fa-face-frown",
+      "fa-fw",
+      "fa-github",
+      "fa-linkedin",
+      "fa-medium",
+      "fa-moon",
+      "fa-sun",
+      "fab",
+      "fas",
+      "fixed-top",
+      "flex-column",
+      "flex-fill",
+      "footer",
+      "form-control",
+      "fs-3",
+      "fs-5",
+      "fw-30",
+      "fw-bold",
+      "hstack",
+      "img-fluid",
+      "img-wrap",
+      "invisible",
+      "is-search",
+      "justify-content-center",
+      "justify-content-end",
+      "justify-content-start",
+      "label",
+      "link-bg-footer",
+      "link-secondary",
+      "main-content",
+      "main-nav-toggler",
+      "me-auto",
+      "middle-bar",
+      "min-vh-100",
+      "mode-switch",
+      "ms-auto",
+      "ms-md-3",
+      "mt-3",
+      "mt-4",
+      "mt-5",
+      "mt-md-0",
+      "mx-auto",
+      "mx-md-0",
+      "my-auto",
+      "my-md-auto",
+      "nav-item",
+      "nav-link",
+      "navbar",
+      "navbar-brand",
+      "navbar-collapse",
+      "navbar-container",
+      "navbar-expand-md",
+      "navbar-fixed-top",
+      "navbar-mode-selector",
+      "navbar-nav",
+      "navbar-toggler",
+      "no-js",
+      "order-0",
+      "order-1",
+      "order-md-0",
+      "order-md-1",
+      "p-0",
+      "p-2",
+      "p-3",
+      "p-4",
+      "pb-4",
+      "pb-md-0",
+      "position-fixed",
+      "position-relative",
+      "ps-1",
+      "pt-4",
+      "pt-5",
+      "pt-md-3",
+      "px-4",
+      "px-xxl-0",
+      "py-3",
+      "rounded",
+      "row",
+      "row-cols-1",
+      "row-cols-2",
+      "row-cols-md-2",
+      "row-cols-sm-3",
+      "search",
+      "search-input",
+      "search-suggestions",
+      "shadow",
+      "svg-inline--fa",
+      "text-center",
+      "text-decoration-none",
+      "text-muted",
+      "text-secondary",
+      "text-sm-start",
+      "text-start",
+      "toast",
+      "toast-body",
+      "toast-container",
+      "toast-header",
+      "toggler-icon",
+      "top-bar"
+    ],
+    "ids": [
+      "fa-face-frown",
+      "fab-github",
+      "fab-linkedin",
+      "fab-medium",
+      "fas-book-open",
+      "fas-ellipsis",
+      "fas-moon",
+      "fas-sun",
+      "navbar-0-collapse",
+      "navbar-mode",
+      "navbar-mode-checkbox",
+      "toast-container",
+      "toast-copied-code-message"
+    ]
  }
 }
--- a/layouts/partials/assets/card-group.html
+++ b/layouts/partials/assets/card-group.html
@@ -143,7 +143,7 @@
                    "style" $args.style
                    "align" $args.align
                    "button" $args.button
-                    "buttonLabel" $args.buttonLabel
+                    "buttonLabel" $element.buttonLabel
                    "buttonType" $args.buttonType
                    "iconRounded" $args.iconRounded
                ) -}}
--- a/layouts/partials/assets/table.html
+++ b/layouts/partials/assets/table.html
@@ -10,7 +10,8 @@
 {{ $sortable := .sortable | default false }}
 {{ $paging := .paging | default false }}
 {{ $searchable := .searchable | default false }}
-
+{{ $pagingOptionPerPage := .pagingOptionPerPage }}
+{{ $pagingOptionPerPageSelect := .pagingOptionPerPageSelect }}
 {{- $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 -}}
 {{- $main := complement $responsive $args -}}
@@ -30,7 +31,11 @@

 {{ $attributes := "" }}
 {{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
-{{ if $paging }}{{ $attributes = printf "%s data-table-paging=true" $attributes }}{{ end }}
+{{ if $paging }}
+    {{ $attributes = printf "%s data-table-paging=true" $attributes }}
+    {{ $attributes := printf "%s data-table-paging-option-perPage=%s" $attributes $pagingOptionPerPage }}
+    {{ if (ne $pagingOptionPerPageSelect "") }}{{ $attributes := printf "%s data-table-paging-option-perPageSelect=%d" $attributes $pagingOptionPerPageSelect }}{{ end }}
+{{ end }}
 {{ if $searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}

 {{- $new := printf `<table class="%s" %s` $target (trim $attributes " ") -}}
--- a/layouts/shortcodes/file.html
+++ b/layouts/shortcodes/file.html
@@ -38,6 +38,7 @@
 {{- $full := true -}}
 {{ if isset .Params "full" }}{{ $full = partial "utilities/CastBool.html" (.Get "full") }}{{ end -}}
 {{- $class := .Get "class" | default "" -}}
+{{- $options := .Get "options" -}}

 {{ if not (fileExists $file) }}
    {{ warnf "Cannot find file: '%q'. See %s" $file $.Position }}
@@ -65,7 +66,7 @@
    </ul>
    <div class="border-start border-end border-bottom mb-3">
        <div class="collapse multi-{{ $id }}{{ if $show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
-            {{- highlight (trim $content "\r\n") $lang "" -}}
+            {{- highlight (trim $content "\r\n") $lang $options -}}
        </div>
        <div class="collapse multi-{{ $id }}{{ if not $show }} show{{ end }} p-3" id="footer-{{ $id }}"><i>...</i></div>
    </div>
--- a/layouts/shortcodes/table.html
+++ b/layouts/shortcodes/table.html
@@ -18,6 +18,8 @@
 {{ $sortable := false }}
 {{ $paging := false }}
 {{ $searchable := false }}
+{{ $pagingOptionPerPage := 10 }}
+{{ $pagingOptionPerPageSelect := "" }}

 {{- if .IsNamedParams -}}
    {{ $breakpoint = .Get "breakpoint" }}
@@ -25,6 +27,8 @@
    {{ if isset .Params "sortable" }}{{ $sortable = partial "utilities/CastBool.html" (.Get "sortable") }}{{ end }}
    {{ if isset .Params "paging" }}{{ $paging = partial "utilities/CastBool.html" (.Get "paging") }}{{ end }}
    {{ if isset .Params "searchable" }}{{ $searchable = partial "utilities/CastBool.html" (.Get "searchable") }}{{ end }}
+    {{ if isset .Params "pagingOptionPerPage" }}{{ $pagingOptionPerPage = (.Get "pagingOptionPerPage") }}{{ end }}
+    {{ if isset .Params "pagingOptionPerPageSelect" }}{{ $pagingOptionPerPageSelect = (.Get "OptionPerPageSelect") }}{{ end }}
 {{ else }}
    {{ $breakpoint = .Get 0 }}
 {{ end }}
@@ -39,9 +43,16 @@

 {{ $attributes := "" }}
 {{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
-{{ if $paging }}{{ $attributes = printf "%s data-table-paging=true" $attributes }}{{ end }}
+{{ if $paging }}
+    {{ $attributes = printf "%s data-table-paging=true" $attributes }}
+    {{ $attributes = printf "%s data-table-paging-option-perPage=%d" $attributes $pagingOptionPerPage }}
+    {{ if (ne $pagingOptionPerPageSelect "") }}
+        {{ $attributes = printf "%s data-table-paging-option-perPageSelect=%s" $attributes $pagingOptionPerPageSelect }}
+    {{ end }}
+{{ end }}
 {{ if $searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}

+
 {{- $new := printf `<table class="%s" %s` $target (trim $attributes " ") -}}
 {{ $input := replaceRE $regex $new $input 1 -}}

--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.27.4",
+  "version": "0.27.8",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@gethinode/hinode",
-      "version": "0.27.4",
+      "version": "0.27.8",
      "license": "MIT",
      "dependencies": {
        "@fullhuman/postcss-purgecss": "^6.0.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.27.4",
+  "version": "0.27.8",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
Author	SHA1	Message	Date
Mark Dumay	871edd7aa4	Merge pull request #1278 from d-oit/data-table-options feat: simple-datatable options for paging	2024-10-28 07:43:37 +01:00
Mark Dumay	b172a5021a	Include full Dutch translation of components page	2024-10-28 07:33:38 +01:00
Mark Dumay	9ddd1983d0	Include pagingOptionPerPage	2024-10-28 07:33:18 +01:00
Mark Dumay	2f00f07a2f	Remove whitespace	2024-10-28 07:33:03 +01:00
Mark Dumay	c043f26268	Update build stats	2024-10-28 07:32:49 +01:00
Mark Dumay	99d689a323	Include reference to mod-simple-datatables release	2024-10-28 07:32:41 +01:00
Mark Dumay	ec7275913b	Bump package release	2024-10-28 07:32:08 +01:00
Mark Dumay	255456447b	Include reference to updated mod-simple-datatables	2024-10-28 07:31:56 +01:00
Dominik Oswald	004940d9bc	feat: simple-datatable options for paging	2024-10-26 19:06:58 +02:00
Mark Dumay	6b39b028fb	Merge pull request #1276 from gethinode/develop Fix button label argument	2024-10-26 09:31:04 +02:00
Mark Dumay	9a83550378	Merge branch 'main' into develop	2024-10-26 09:12:48 +02:00
Mark Dumay	792443c4cf	Bump package release	2024-10-26 09:12:01 +02:00
Mark Dumay	3d52162925	Fix button label argument	2024-10-26 09:11:26 +02:00
Mark Dumay	80b28f7557	Merge pull request #1275 from gethinode/develop Shift Hugo highlighting options to Hinode docs	2024-10-26 08:58:40 +02:00
Mark Dumay	43eebdf53f	Merge branch 'main' into develop	2024-10-26 07:57:24 +02:00
Mark Dumay	b5062fe687	Merge pull request #1274 from gethinode/develop Init default card color variable	2024-10-26 07:56:44 +02:00
Mark Dumay	51aa15266b	Shift Hugo highlighting options to Hinode docs	2024-10-26 07:40:41 +02:00
Mark Dumay	19f638a129	Merge branch 'main' into develop	2024-10-26 07:30:21 +02:00
Mark Dumay	aa2e5ca6f4	Merge pull request #1273 from d-oit/file-options feat: File component extend with Hugo highlight options	2024-10-26 07:28:00 +02:00
Mark Dumay	04eea0db71	Bump package release	2024-10-26 07:25:59 +02:00
Mark Dumay	4645f4ee7c	Init default card color variable	2024-10-26 07:25:06 +02:00
do	bb6421c70b	feat: File component extend with Hugo highlight options	2024-10-25 22:21:25 +02:00
Mark Dumay	622c6ee1c0	Merge pull request #1271 from gethinode/develop Fix passing of button label argument to card	2024-10-25 18:35:36 +02:00
Mark Dumay	f1befb05cc	Merge branch 'main' into develop	2024-10-25 18:28:05 +02:00
Mark Dumay	e146e3a559	Fix passing of button label argument to card	2024-10-25 18:27:39 +02:00