Advanced markdown table layout renderer

tips & tricks
1

Hi, inspired by awesome @jmooring , here is an advanced `render-table.html` with the following features for advanced markdown tables, with a single line of parameters under the table

Features

  • Default markdown tables (heading, alignment)
  • Automatic table counting (Table 1, Table 2, 3, …)
  • HTML5 header scope="col"
  • Custom HTML id
  • Custom CSS class
  • Table wrapper for better design (border radius, responsive, a11y)
  • Table caption
  • Structured data (JSON+LD)

Table example

| Month | Savings |
| ----- | ------- |
| January | $250 |
| February | $80 |
| March | $420 |
{caption="Table title" id="table-hero" class="table-wrap"}

Table renderer

and the `layouts/_default/_markup/render-table.html` renderer

{{ $tnumber := add 1 $.Ordinal }}
{{- $userClass := .Attributes.class | default “” }}
{{ with .Attributes.caption }}{“@context”: “https://schema.org","@type”: “Table”,“about”: “{{ . | markdownify }}”}{{ end }}
<div class="data-table" role="region" tabindex="0" {{ with .Attributes.caption }}aria-labelledby="caption-{{ $tnumber }}" {{ end }}>
<table class="table {{ if $userClass }} {{ $userClass }}{{ end }}"
    {{- range $k, $v := .Attributes }}
      {{- if and $v (ne $k "caption") (ne $k "class") }}
        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
      {{- end }}
    {{- end }}>
  {{- with .Attributes.caption }}
  <caption id="caption-{{ $tnumber }}">
    <strong>Tableau {{ $tnumber }}.</strong> {{ . | $.Page.RenderString  }}.
  </caption>
  {{- end }}
  <thead>
    {{- range .THead }}
      <tr>
        {{- range . }}
          <th scope="col"
            {{- with .Alignment }}
              {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
            {{- end -}}
          >
            {{- .Text -}}
          </th>
        {{- end }}
      </tr>
    {{- end }}
  </thead>
  <tbody>
    {{- range .TBody }}
      <tr>
        {{- range first 1 . }}
          <th scope="row"
            {{- with .Alignment }}
              {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
            {{- end -}}
          >
            {{- .Text -}}
          </th>
        {{- end }}
        {{- range after 1 . }}
          <td
            {{- with .Alignment }}
              {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
            {{- end -}}
          >
            {{- .Text -}}
          </td>
        {{- end }}
      </tr>
    {{- end }}
  </tbody>
</table>
</div>
3 Likes
2

This is nice! Will likely add this to my Zen theme collection of example render hooks.

One really minor thing, you could replace the wrapper div with a section-tag. If the section tag is named, e.g. with a “aria-labelledby”, it will automatically get a role of “region”.

I also think “markdownify” can be replaced with “.Page.RenderString”.