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

9

Hi I was wondering if it was possible to make a table row that covers multiple columns that ignores the column spacing of the table header with this snippet

10

If you trust the content authors, just use HTML for complex tables.

https://daringfireball.net/projects/markdown/syntax

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

John Gruber

You can create an HTML shortcode, use an inline shortcode, or just use the HTML content format.

1 Like