Hugo ultimate table shortcode

tips & tricks
1

Hi, I know a lot has been written on the subject, however I didn’t find in this forum that shortcode.
Features: HTML5 compatibility (no align-*), markdown alignment, Bootstrap 4/5 compatibility, table caption support, Schema.org markup, WAI accessibility, custom CSS, custom Id, responsive (with CSS)

table.html

{{ $htmlTable := .Inner | markdownify }}
{{ $old := "<table>" }}
{{ $new := "" }}
{{ $title := .Get "title" }}
{{ $extraClass := .Get "class" }}
{{ $id := "" }}
  {{ with .Get "id" }}
    {{ $id = . }}
  {{ else }}
  {{ $id = delimit (shuffle (seq 1 9)) "" }}
  {{ end }}

{{ if $title }}
  {{ $new = printf "<table class=\"table %s\" id=\"%s\" itemscope itemtype=\"https://schema.org/Table\"><caption id=\"table-caption-%s\" itemprop=\"about\"><b>Tableau.</b> %s</caption>" $extraClass $id $id $title }}
{{ else }}
  {{ $new = printf "<table class=\"table %s\" id=\"%s\">" $extraClass $id}}
{{ end }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable := replaceRE "align=\"([a-z]+)\"" "style=\"text-align: $1\"" $htmlTable }}

<div class="data-table" role="region" tabindex="0" {{ if $title }}{{ printf "aria-labelledby=\"table-caption-%s\"" $id | safeHTMLAttr }}{{ end }}>
  {{ $htmlTable | safeHTML }}
</div>

<!-- Inspired by https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/ and improved by djibe-->

Call the shortcode

{{< table title="Optional title" class="optional CSS class declaration" id="optional- declaration-a-unique-one-will-be-generated" >}}
| Stade | DFG (CKD-EPI) | Définition |
|:-------:|:----------------------:|------------|
| 1     | &gt; 90       | MRC avec DFG normal ou augmenté |
| 2     | 60-89         | MRC avec DFG légèrement diminué |
| 3A    | 45-59         | IRC modérée |
| 3B    | 30-44         | IRC modérée |
| 4     | 15-29         | IRC sévère  |
| 5     | < 15          | IRC terminale |
{{< /table >}}

Enjoy

8 Likes
2

This is not working. Gives Error:

Error: add site dependencies: load resources: loading templates: "/Users/me/Documents/fewsteps/hugo/qa/layouts/shortcodes/table.html:14:1": parse failed: template: shortcodes/table.html:14: unterminated quoted string

3

Hi, it has been working for years now, everyday for my part.
Make sure you copy-paste again properly.

4

Copy and Paste it fully. But not working. Getting the same error. But the ref link code (Style a Markdown Table With Bootstrap Classes in Hugo | zwbetz) is working

Can you double check whether you posted all the code here.
Thanks

5

https://raw.githubusercontent.com/djibe/recommandations-medicales/master/layouts/shortcodes/table.html

Active code

6

created the file ‘mytable-one.html’ and copied the code form there and when tried to build getting the below error:

Error: add site dependencies: load resources: loading templates: "/Users/me/Documents/fewsteps/hugo/qa/layouts/shortcodes/mytable-one.html:15:1": parse failed: template: shortcodes/mytable-one.html:15: unterminated quoted string
7

Tested this shortcode on my own site and it works just as described. Neat solution, thanks @djibe!

1 Like
8

For extra CSS (responsive, Material design), you can check this example: Data tables | Material UI 2