HUGO

Hugo ultimate table shortcode

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

6 Likes