Tables

- 170 words - 1 minute
Hugo

Create a custom shortcode

Content of layouts/shortcodes/list-table.html:

{{ $caption := .Get "caption" }}
{{ $useHeaderRow := .Get "header" }}
{{ $rows := split (trim .Inner "\n") "\n\n" }}

<table class="center">
  {{ with $caption }}
  <caption>{{ . }}</caption>
  {{ end }}
  {{ if $useHeaderRow }}
  {{ $headerRow := index $rows 0 }}
  {{ $rows = after 1 $rows }}
  <thead>
  <tr class="stripe-dark">
    {{ range (split $headerRow "\n") }} <th class="bg-white">{{ . | markdownify }}</th> {{ end }}
  </tr>
  </thead>
  {{ end }}
  <tbody>
  {{ range $rows }}
  <tr class="stripe-dark">
    {{ range (split . "\n") }}
    {{ if (findRE "^\\d+$" .) }}
    <td class="numeric">{{ . }}</td>
    {{ else }}
    <td>{{ . | markdownify }}</td>
    {{ end }}
    {{ end }}
  </tr>
  {{ end }}
  </tbody>
</table>

Use the shortcode

In the .md content file:

{{< list-table header=true >}}
Header 1
Header 2
Header 3

Cell 1
Cell 2
Cell 3

Cell 1
Cell 2
Cell 3
{{< /list-table >}}

Reference: CSV and Data Tables in Hugo by Brian Wisti, June 6th, 2020