hugo-shortcode-table

Introduction

Replacement for the lackluster table syntax in the default Hugo Markdown renderer.

Features:

• Much more powerful than Markdown table syntax.
• Emits CSS classes for alignment rather than inline style attributes (no more style-src unsafe-inline).
• Table can be defined as front matter or site data.
• Column tooltips.
• Cell-specific overrides (alignment, tooltip, etc).
• HTML and Markdown markup support.
• Easy to configure emitted CSS classes for a variety of frameworks, including Bulma and Bootstrap.

Installation

To get started:

1. Copy table.html to the layouts/shortcodes directory.
2. Add a table definition to your page front matter (see example).
3. Add a table shortcode to your page content which references the table definition from the previous step (see example).

Example

Below is a simple example.

Front matter:

---
# ... other front matter omitted ...
tables:
  fruits:
    # table name (optional)
    name: "Fruits"

    # table columns (required)
    cols: 
      - id: "name"
        name: "Name"
        tip: "The name of the fruit."
      - id: "text"
        name: "Text"
        tip: "A brief description of the fruit."
        align: "right" # right-align column

    # table rows
    rows: 
      - name: "apple"
        text: "red"
      - name: "banana"
        text: "**yellow**" # markdown markup
      - name: "grape"
        text: "green"

Content:

{{/* render fruits table */}}
{{< table "fruits" >}}

Generated HTML, with whitespace added:

<table class='table' title='Fruits' aria-label='Fruits'>
  <thead>
    <tr>
      <th title='The name of the fruit.' aria-label='The name of the fruit.'>
        Name
      </th>

      <th class='has-text-right' title='A brief description of the fruit.' aria-label='A brief description of the fruit.'>
        Text
      </th>
    </tr>
  </thead>

  <tbody>
    <tr data-tr_y='0'>
      <td data-td_x='0' data-td_id='name' title='The name of the fruit.' aria-label='The name of the fruit.'>
        apple
      </td>

      <td data-td_x='1' data-td_id='text' class='has-text-right' title='A brief description of the fruit.' aria-label='A brief description of the fruit.'>
        red
      </td>
    </tr>

    <tr data-tr_y='1'>
      <td data-td_x='0' data-td_id='name' title='The name of the fruit.' aria-label='The name of the fruit.'>
        banana
      </td>

      <td data-td_x='1' data-td_id='text' class='has-text-right' title='A brief description of the fruit.' aria-label='A brief description of the fruit.'>
        <strong>yellow</strong>
      </td>
    </tr>

    <tr data-tr_y='2'>
      <td data-td_x='0' data-td_id='name' title='The name of the fruit.' aria-label='The name of the fruit.'>
        grape
      </td>

      <td data-td_x='1' data-td_id='text' class='has-text-right' title='A brief description of the fruit.' aria-label='A brief description of the fruit.'>
        green
      </td>
    </tr>
  </tbody>
</table>

Documentation

See the Table Shortcode Examples page for full documentation and examples.