Looping through data to display cards?

[mootari]

@sbarre

but it falls apart when I’m trying to do something more complex like a dynamic layout where the number of row depends on what is in the data

You may not be aware that htl.html accepts arrays. Here is an example that renders the penguins dataset into a table:

htl.html`<div class="mytable">
  <table>
    <tr>${Object.keys(penguins[0]).map(d => htl.html`<th>${d}`)}</tr>
    ${penguins.map(
      d => htl.html`<tr>${ Object.values(d).map(v => htl.html`<td>${v}`) }`
    )}
  </table>
  <style>
    .mytable { overflow: auto; width: fit-content; height: 300px; resize: vertical }
    .mytable table { margin: 0 8px }
    .mytable tr:first-child { position:sticky;top:0;background:#fff }
`