Merge pull request #1366 from gethinode/develop

Add wrapping support to tables
gethinode · Jan 16, 2025 · dd80ee2 · dd80ee2
2 parents 65a4463 + 2e8b087
commit dd80ee2
Show file tree

Hide file tree

Showing 9 changed files with 167 additions and 92 deletions.
diff --git a/assets/scss/components/_table.scss b/assets/scss/components/_table.scss
@@ -11,6 +11,10 @@
     padding-right: 1rem;
 }
 
+.table-border-bottom-wrap {
+    border-bottom-style: none !important
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .table-striped, .table-striped-columns {

diff --git a/data/structures/table.yml b/data/structures/table.yml
@@ -3,6 +3,20 @@ comment: >-
   improve their layout on smaller screens. To features `sortable`, `paging`,
   and `searchable` require the module `simple-datatables`.
 arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Page to display the breadcrumb for.
+    group: partial
+  input:
+    type:
+      - string
+      - template.HTML
+    optional: false
+    comment: Table input in markdown format.
+    group: partial
   breakpoint:
     type: select
     optional: true
@@ -55,6 +69,13 @@ arguments:
     optional: true
     comment: Toggle the ability to search the dataset.
     release: v0.24.13
+  wrap:
+    type: bool
+    optional: true
+    comment: >-
+      Toggle the last column to wrap to a new row on smaller devices. This
+      setting is not compatible with data tables.
+    release: v0.28.0
 body:
   type: string
   optional: false

diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
@@ -65,6 +65,7 @@
       "use"
     ],
     "classes": [
+      "%!s(<nil>)",
       "accordion",
       "accordion-body",
       "accordion-button",

diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html
@@ -7,8 +7,10 @@
     {{ $attr = merge $attr (dict "class" (trim (delimit ($class | append "table") " ") " ")) }}
 {{ end }}
 
+{{ $wrap := in $class "table-wrap" }}
 {{ $align := dict "left" "start" "center" "center" "right" "end" }}
 
+{{ $header := "" }}
 <table
   {{- range $k, $v := $attr }}
     {{- if $v }}
@@ -17,24 +19,56 @@
   {{- end }}>
   <thead>
     {{- range .THead }}
+    {{ $length := len . }}
+      {{ if $wrap }}
+        <tr>
+          {{- range . | first (sub $length 1) }}
+            <th {{ with .Alignment }}class="text-{{ index $align . }}"{{ end }}>
+              {{- .Text -}}
+            </th>
+          {{- end }}
+          {{- range . | last 1 }}
+            {{ $header = .Text }}
+          {{ end }}
+        </tr>
+      {{ else }}
       <tr>
         {{- range . }}
           <th {{ with .Alignment }}class="text-{{ index $align . }}"{{ end }}>
             {{- .Text -}}
           </th>
         {{- end }}
       </tr>
+    {{ end }}
     {{- end }}
   </thead>
   <tbody>
     {{- range .TBody }}
+    {{ $length := len . }}
+      {{ if $wrap }}
       <tr>
-        {{- range . }}
-          <td {{ with .Alignment }}class="text-{{ index $align . }}"{{ end }}>
+        {{- range . | first (sub $length 1) }}
+          <td class="{{ with .Alignment }}text-{{ index $align . }}{{ end }} table-border-bottom-wrap">
             {{- .Text -}}
           </td>
         {{- end }}
       </tr>
+      <tr>
+        {{- range . | last 1 }}
+          <td class="{{ with .Alignment }}text-{{ index $align . }}{{ end }}" colspan="{{ (sub $length 1) }}">
+            {{- .Text -}}
+          </td>
+        {{ end }}
+      </tr>
+      {{ else }}
+        <tr>
+          {{- range . }}
+            <td {{ with .Alignment }}class="text-{{ index $align . }}"{{ end }}>
+              {{- .Text -}}
+            </td>
+          {{- end }}
+        </tr>
+      {{ end }}
     {{- end }}
   </tbody>
 </table>
diff --git a/layouts/partials/assets/table.html b/layouts/partials/assets/table.html
@@ -4,42 +4,86 @@
     Visit gethinode.com/license for more details.
 -->
 
-{{ $page := .page }}
-{{ $input := .input }}
-{{ $args := .args }}
-{{ $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 -}}
-
-{{- if in $responsive "table-responsive-none" -}}
-    {{- $responsive = "" -}}
-{{- else if not $responsive -}}
-    {{ $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 }}
-{{ $regex := `<table\s*class="(.+?)"` }}
-{{ $current := (index (index (findRESubmatch $regex $input) 0) 1) }}
-{{ $target := delimit (((split $current " ") | append "table" | append $class) | uniq) " " }}
+{{ define "partials/inline-table.html" }}
+    {{ $page := .page }}
+    {{ $input := .input }}
+    {{ $attributes := .attributes }}
+    {{ $class := .class }}
+    {{ $wrap := .wrap }}
+
+    {{ if $wrap }}{{ $input = printf "%s\n{.table-wrap}" (chomp $input) }}{{ end }}    
+    {{- $input = $input | $page.RenderString }}
+    {{ $regex := `<table\s*class="(.+?)"` }}
+    {{ $current := (index (index (findRESubmatch $regex $input) 0) 1) }}
+    {{ $target := delimit (((split $current " ") | append "table" | append $class) | uniq) " " }}
+
+    {{- $new := printf `<table class="%s" %s` $target (trim $attributes " ") -}}
+    {{ $input := replaceRE $regex $new $input 1 -}}
+
+    {{ return $input }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $error := false }}
+{{ $args := partial "utilities/InitArgs.html" (dict "structure" "table" "args" .) }}
+{{ if $args.err }}
+    {{ partial "utilities/LogErr.html" (dict 
+        "partial" "assets/table.html" 
+        "msg" "Invalid arguments"
+        "details" $args.errmsg
+        "file" page.File
+    )}}
+{{ end }}
+
+<!-- Initialize local variables -->
+{{ $class := $args.class }}
+{{ if or $args.sortable $args.paging $args.searchable }}{{ $class = trim (printf "%s data-table" $class) " " }}{{ end }}
 
 {{ $attributes := "" }}
-{{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
-{{ if $paging }}
+{{ if $args.sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
+{{ if $args.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 }}
+    {{ $attributes = printf "%s data-table-paging-option-perPage=%d" $attributes $args.pagingOptionPerPage }}
+    {{ if (ne $args.pagingOptionPerPageSelect "") }}
+        {{ $attributes = printf "%s data-table-paging-option-perPageSelect=%s" $attributes $args.pagingOptionPerPageSelect }}
+    {{ end }}
 {{ end }}
-{{ if $searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}
+{{ if $args.searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}
+
+<!-- Main code -->
+{{- $breakpoint := $args.page.Scratch.Get "breakpoint" -}}
+{{ $regular := partial "partials/inline-table.html" (dict 
+    "page" $args.page
+    "input" $args.input
+    "attributes" $attributes
+    "class" $class
+    "wrap" false
+) }}
+
+{{ $wrapped := "" }}
+{{ if $args.wrap }}
+    {{ $wrapped = partial "partials/inline-table.html" (dict 
+        "page" $args.page
+        "input" $args.input
+        "attributes" $attributes
+        "class" $class
+        "wrap" true
+    ) }}
+{{ end }}
+
+{{ if not $error }}
+    {{ if eq $args.breakpoint "none" }}
+        {{ $regular | safeHTML }}
+        {{ with $wrapped }}{{ . | safeHTML }}{{ end }}
+    {{ else }}
+        <div class="table-responsive{{- with $args.breakpoint }}-{{ . }}{{ end }} {{ if $wrapped }}d-none d-{{ $breakpoint.current }}-block{{ end }}">
+        {{ $regular | safeHTML }}
+        </div>
 
-{{- $new := printf `<table class="%s" %s` $target (trim $attributes " ") -}}
-{{ $input := replaceRE $regex $new $input 1 -}}
-{{- with $responsive }}<div class="{{ delimit . " " }}">{{ end -}}
-{{ $input | safeHTML }}
-{{- with $responsive }}</div>{{ end -}}
+        {{ with $wrapped }}
+            <div class="table-responsive{{- with $args.breakpoint }}-{{ . }}{{ end }} d-{{ $breakpoint.current }}-none">
+            {{ . | safeHTML }}
+            </div>
+        {{ end }}
+    {{ end }}
+{{ end }}
diff --git a/layouts/shortcodes/args.html b/layouts/shortcodes/args.html
@@ -81,5 +81,5 @@
         {{ end }}
     {{ end }}
 
-    {{ partial "assets/table.html" (dict "page" .Page "input" $table "args" slice) }}
+    {{ partial "assets/table.html" (dict "page" .Page "input" $table "wrap" true) }}
 {{ end }}
diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html
@@ -5,63 +5,34 @@
 -->
 
 {{ $error := false }}
-
-<!-- Validate arguments -->
-{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "table" "args" .Params) }}
-    {{ errorf "Invalid arguments: %s" .Position -}}
-    {{ $error = true }}
-{{ end }}
-
-<!-- Initialize arguments -->
+{{ $args := dict }}
 {{ $breakpoint := "" }}
-{{ $class := "" }}
-{{ $sortable := false }}
-{{ $paging := false }}
-{{ $searchable := false }}
-{{ $pagingOptionPerPage := 10 }}
-{{ $pagingOptionPerPageSelect := "" }}
 
+<!-- Initialize arguments -->
 {{- if .IsNamedParams -}}
-    {{ $breakpoint = .Get "breakpoint" }}
-    {{ $class = .Get "class" | default "" }}
-    {{ 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 }}
+    {{ $args = partial "utilities/InitArgs.html" (dict "structure" "table" "args" .Params "group" "shortcode") }}
+    {{ if $args.err }}
+        {{ partial "utilities/LogErr.html" (dict 
+            "partial" "shortcodes/table.html" 
+            "msg" "Invalid arguments"
+            "details" $args.errmsg
+            "file" page.File
+        )}}
+    {{ end }}
 {{ else }}
     {{ $breakpoint = .Get 0 }}
 {{ end }}
 
 <!-- Main code -->
-{{ if or $sortable $paging $searchable }}{{ $class = trim (printf "%s data-table" $class) " " }}{{ end }}
-
-{{- $input := .Inner | .Page.RenderString }}
-{{ $regex := `<table\s*class="(.+?)"` }}
-{{ $current := (index (index (findRESubmatch $regex $input) 0) 1) }}
-{{ $target := delimit (((split $current " ") | append "table" | append $class) | uniq) " " }}
-
-{{ $attributes := "" }}
-{{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=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 -}}
-
-{{ if not $error }}
-    {{ if eq $breakpoint "none" }}
-        {{ $input | safeHTML }}
-    {{ else }}
-        <div class="table-responsive{{- with $breakpoint }}-{{ . }}{{ end -}}">
-        {{ $input | safeHTML }}
-        </div>
-    {{ end }}
-{{ end }}
+{{ partial "assets/table.html" (dict 
+    "page" .Page
+    "input" .Inner
+    "breakpoint" (or $breakpoint $args.breakpoint)
+    "class" $args.class
+    "sortable" $args.sortable
+    "paging" $args.paging
+    "pagingOptionPerPage" $args.pagingOptionPerPage
+    "pagingOptionPageSelect" $args.pagingOptionPageSelect
+    "searchable" $args.searchable
+    "wrap" $args.wrap
+) }}
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.27.29",
+  "version": "0.28.0",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",