Bootstrap table shortcode

[h-enk]

Discussed in thuliteio/doks#1166

^{Originally posted by jollydodo December 25, 2023}
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 >}}
```</div>