Hugo and Tables - GOAT is ugly

I was trying to make a post with data that can be displayed in a table, my starting point is just text:

us-central-a -> ping 190–195 ms
us-central-b -> ping 196–212ms
us-central-c -> ping 188–190ms

Using GOAT (hugo)

Hugo has a way to create tables called GOAT, I tried and was okay until I saw the results…

It’s ugly, it’s too big and bold, and try to select something in that table, impossible.

Using Diagon

Then I try with Diagon , comparing vs GOAT looks better until it breaks, or gets misaligned. It’s basically the same block, without “goat” as parameter, the good is the structure is created automatically.

┌─────────────────────┬──────────────┬──────────┬──────────┐
│ ISP                 │ CE Zone      │ Ping-min │ Ping-max │
├─────────────────────┼──────────────┼──────────┼──────────┤
│ Personal / Fibertel │ us-central-a │ 190ms    │ 195ms    │
├─────────────────────┼──────────────┼──────────┼──────────┤
│ Personal / Fibertel │ us-central-b │ 196ms    │ 212ms    │
├─────────────────────┼──────────────┼──────────┼──────────┤
│ Personal / Fibertel │ us-central-c │ 188ms    │ 190ms    │
├─────────────────────┼──────────────┼──────────┼──────────┤ 

Don’t like it, and is awful to select and copy values from table, it’s sightly better, but still not enough.

Console output - Bonus track

Yes, I can re-use my console to show ping results as the real console does, you can see the example of how this works here . But I’m interested in a normal table or something in those lines.

Final thoughts

I’m not happy with any of these results, I’ll add a shortcode to handle tables, maybe a 3rd party plugin, or both, not sure.

I already worked with Tabulator I looked into it, It’s overkill and too large for my usage (200Kb), depending on features may require jQuery. I’m against of keep adding dependencies freely, and more against bigger dependencies like jQuery when most of the functionality can be just replaced with vanilla javascript in modern browsers.

Don’t get me wrong, I loved jQuery, when jQuery appeared was a big blessing, maybe you are too young to know, but in the early days you have to do 2 or 3 different ways in the same function to cover all browsers just to make a simple operation like ajax call. JQuery makes life easy at that time, but now… is not necessary anymore.

Worst case scenario, I’m working on adding functionality on this theme to request plugins on demand per page via front matter, and may I use heavy dependencies then.

I’ll update with more experiments later, stay tuned.

UPDATE 2023.03.11

Given the type of data I have in those tables, and also I didn’t find any good solution in the tables department. I decided to use charts.js to represent this data. In addition, I implemented page-bundle-based JS and CSS, and all of them are calling only if certain shortcode call is executed. Details of that implementation will be available soon.

Final version of the post is here .