HTML Tables based on json / csv called form Markdown

support
1

Ok, I’m starting to understand Hugo, somewhat… But I’ve run into a need to generate an HTML table from a locally-stored file, and insert that into a page. I’m using the hugo learn template because it just works for what I need.

I understand that generating an HTML table from a data file requires using a partial (which is called from an HTML page), but I’m not clear on how (or if) I can control that through markdown. Basically, my hope was to be able to create an .md file that would somehow display that HTML table partial…

My only other option would be to build the tables programmatically in a perl script and save them as a markdown page in the appropriate content folder… Not something I’d prefer to do.

2

I wrote a short article about this: https://zwbetz.com/create-an-html-table-from-a-toml-data-file-in-hugo/

The example I give is in TOML, but it can easily be converted to CSV

1 Like
3

@zwbetz has a good starting point for you, and to address the quoted concern: shortcodes.

4

Indeed – the linked article implements the “build table from data file” with a shortcode :slight_smile:

5

Ok, so this really helps, thanks!

I opted to convert it to a CSV format, using the example outlined on the Data Files page, but for some reason, the argument isn’t passed to the partial.

In my md file, I have the line:

{{<table "cpu.csv">}}

and in the partial (table.html), I currently have:

{{ $arg := .Get 0 }}
{{ $dataFile := index .Site.Data $arg }}
{{ $sep := "," }}
{{ $.Scratch.Set "count" 0 }}

<table>
    <thead>
        <tr>
            <th colspan='2'>
                {{ $dataFile }}
            </th>
        </tr>
    </thead>
</table>

That should display a header with the dataFile argument that was passed form the markdown. Unfortunately, it’s blank… Not sure why the argument isn’t getting passed (or perhaps not persisting?)

6

Don’t pass the file extension, only the filename. So:

{{<table "cpu">}}
7

No luck, I’m afraid.

my index file reads:
{{<table "cpu">}}

And I modified the header to give me positive output as follows:

<th colspan='2'> {{ $sep }} {{ $dataFile }}</th>

The value stored in $sep appears (a comma), but $dataFile shows nothing, leaving me certain it’s really empty.

8

Where is your data file located?

Note, I can’t troubleshoot well with the current info. Please share your site code, or create a small sample project and share that.

9

Sorry. Completely forgot I’m using git…

Here’s the repo I just set up for it:

https://github.com/joelgraff/linux_starter_kit.git

10

Your data file needs to live at

/data

Not here

/content/my_system/data

Per the data templates docs, TIL:

The local CSV files to be loaded using getCSV must be located outside of the data directory.

11

Right, but it’s a CSV, and Hugo server spits out all sorts of errors. Besides, the documentation said not to put CSV files in /data… unless I missed something…

Also, the argument should still contain the string, right? It should only fail if I tried to actually open it.

12

You’re right. I’ve only used YAML and TOML for data files thus far so I hadn’t run into that. Okay, so you’ll need a few tweaks.

Updated shortcode usage:

{{< table "content/my_system/data/cpu.csv" >}}

Updated shortcode definition:

{{ $url := .Get 0 }}
{{ $sep := "," }}
{{ $dataFile := getCSV $sep $url }}

<!-- your table building logic here -->
2 Likes
13

Perfect! Thanks for the help!