I finally have a solution I love. I keep using it over and over.

headers := []string{"name", "age", "species", "home_planet", "language", "occupation"}

I define the headers and call:

c.MakeCells(list, headers, "_welcome")

The list is an array of key values pairs, and _welcome is just the name of the view.

{{ define "_welcome_col1" }} {{ $row := index . "row" }} {{ index $row "name" }} {{ end }}

{{ define "_welcome_col2" }} {{ $row := index . "row" }} {{ index $row "age" }} {{ end }}

etc.

Then with tailwindcss I have:

<div class="hidden md:block large"> {{ template "_table_large" . }} </div> <div class="md:hidden small"> {{ template "_table_small" . }} </div>

So I'm rendering both the tables on the page but only 1 will show depending on the size of the screen.

And the logic in _table_small is the secret to the whole thing. Instead of displaying each row horizontally, it repeats the headers vertically as col1 and then col2 is each row value.

You can see demo at https://many.pw/

Just make the window smaller if you are on desktop and it will jump to the small version.