Create an HTML Table From a TOML Data File in Hugo

This post was inspired by a recent Hugo discussion. In a nutshell: instead of writing the table in markdown, the user wanted to build the table from a TOML data file. Below is one way to solve this.

Let’s say the data file lived at data/sample.toml. The nice thing about doing it this way is that new rows/columns are easily added:

[table]
  [[row]]
  data = ["Animal", "Sound"]
  [[row]]
  data = ["Cat", "Meow"]
  [[row]]
  data = ["Dog", "Woof"]

A shortcode would be created at layouts/shortcodes/tomlTable.html, then defined as:

{{ $arg := .Get 0 }}
{{ $dataFile := index .Site.Data $arg }}
{{ $.Scratch.Set "count" 0 }}

<table>
{{ range $table := $dataFile }}  
  {{ range $row := $table }}
    <tr>
    {{ range $datas := $row }}
      {{ range $data := $datas }}
        {{ if eq 0 ($.Scratch.Get "count") }}
        <th> 
          {{ . }}
        </th>
        {{ else }}
        <td> 
          {{ . }}
        </td>
        {{ end }}
      {{ end }}
    {{ end }}
    </tr>
    {{ $.Scratch.Add "count" 1 }}
  {{ end }}
{{ end }}
</table>

It could then be used in a markdown file like this, where "sample" is just the name of the TOML data file:

{{< tomlTable "sample" >}}

And the output would be: