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