Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap table shortcode #344

Open
h-enk opened this issue Jan 8, 2024 · 0 comments
Open

Bootstrap table shortcode #344

h-enk opened this issue Jan 8, 2024 · 0 comments

Comments

@h-enk
Copy link
Member

h-enk commented Jan 8, 2024

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>
@h-enk h-enk transferred this issue from thuliteio/doks Jan 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant