Bootstrap table shortcode

[jollydodo]

Accidently posted this in getdoks.org repo instead of doks...

Hey,

The default table markdown doesn't make full use of the capabilities of Bootstrap CSS. The tables are not responsive (If you add too many columns without paying attention, you will destroy the layout on mobile devices) and sometimes hard to read. This can be easily fixed using Bootstrap, but unfortunately Hugo doesn't support a Table render hook due to performance reasons.

I therefore implemented a shortcode for tables that wraps the table in a responsive bootstrap table container and adds the possibility to add classes by using arguments.

Most of the code is based on this post:
https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/

Shortcode called bootstrap-table.html:

<div class="table-responsive">
    {{ $htmlTable := .Inner | markdownify }}
    {{ $class := .Get 0 | default "" }}
    {{ $old := "<table>" }}
    {{ $new := printf "<table class=\"%s\">" $class }}
    {{ $htmlTable := replace $htmlTable $old $new }}
    {{ $htmlTable | safeHTML }}
</div>

example:

{{< bootstrap-table "table table-striped table-bordered" >}}
| Animal  | Sounds |
|---------|--------|
| Cat     | Meow   |
| Dog     | Woof   |
| Cricket | Chirp  |
{{< /bootstrap-table >}}

[h-enk]

You could also use Markdown attributes — this is the Doks preferred way.

To be documented,

[h-enk]

thuliteio/getdoks.org#344

[jollydodo]

Thanks, that indeed seems like a nicer and more 'general' approach. I wasn't aware of that markdown feature.