https://many.pw/

many.pw

A table that looks good on mobile and desktop.

 name   age  species   home_planet   language       occupation
Zog     150 Xenon     Zeta-7         Zorgon    Astrobiologist
Luna    200 Lunarian  Moon           Lunar     Quantum Physicist
Glimmer 75  Nebulite  Nebula-9       Stellar   Astroengineer
Xylon   300 Celestial Alpha Centauri Cosmic    Interstellar Diplomat
Astra   120 Stardust  Polaris        Celestial Astroarchaeologist

   name     Zog
    age     150
  species   Xenon
home_planet Zeta-7
 language   Zorgon
occupation  Astrobiologist
            ---------------------
   name     Luna
    age     200
  species   Lunarian
home_planet Moon
 language   Lunar
occupation  Quantum Physicist
            ---------------------
   name     Glimmer
    age     75
  species   Nebulite
home_planet Nebula-9
 language   Stellar
occupation  Astroengineer
            ---------------------
   name     Xylon
    age     300
  species   Celestial
home_planet Alpha Centauri
 language   Cosmic
occupation  Interstellar Diplomat
            ---------------------
   name     Astra
    age     120
  species   Stardust
home_planet Polaris
 language   Celestial
occupation  Astroarchaeologist

How is this done?

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

We use tailwindcss to place both tables on the page but only show one
at a time. The classes "hidden md:block large" hides the large table
on small screens and "md:hidden small" does the opposite, hides the
small table on large screen.
But, the small table looks very different. The large table can be N
columns across horizontally like a normal excel table. The header at
the top once, the all the rows under it. But the small table repeats
the header over and over for each row. It's no longer N columns
across. It's always 2 columns across. Column 1 is one header field
and Column 2 is that header field's value. And it grows vertically
this way.
[0YBSI4v]
So in order to render both of these, we need to first define the
headers:


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

And we also need the data as a 2D array. I use the golang "go on
rails" framework feedback for this, specifcally cells.go
So this sample data as 2D array is: [[Zog, 150, Xenon, Zeta-7,
Zorgon, Astrobiologist], [Luna, 200, Lunarian, Moon, Lunar, Quantum
Physicist], [Glimmer, 75, Nebulite, Nebula-9, Stellar,
Astroengineer], [Xylon, 300, Celestial, Alpha Centauri, Cosmic,
Interstellar Diplomat], [Astra, 120, Stardust, Polaris, Celestial,
Astroarchaeologist]]
Each column can have any HTML it wants so that's why cells.go renders
a template:

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

for each column. The above 2D array example is showing just strings,
but it could be complex HTML in each cell.
Now for the last part, lets look at logic in "_table_large" first.
This is the normal table logic. Header on top just once, like an
excel file.

<table>
<tr>
        {{ $headers := index . "headers" }}
        {{ range $i, $h := $headers }}
        <th> {{ $h }} </th>
        {{ end }}
</tr>

{{ $cells := index . "cells" }}
{{ range $i, $c := $cells }}
        <tr>
                {{ range $j, $cell := $c }}
                <td> {{ $cell }} </td>
                {{ end }}
        </tr>
{{ end }}
</table>


The logic in "_table_small" is the killer feature of this whole
thing. This is not normal table logic. The header is repeated over
and over and it's forced into just two columns but N rows.

<table>
{{ $cells := index . "cells" }}
{{ $headers := index . "headers" }}
{{ range $j, $c := $cells }}

  {{ range $i, $h := $headers }}
  <tr>
  <th> {{ $h }} </span>
  </th>
  <td> {{ index $c $i}} </td>
  </tr>
  {{ end }}
{{ end }}

</table>

This example is open source at a table that looks good on mobile and
desktop.