Sveltejs Academy · Lesson

Nested {#each} and Keyed Updates

Handle nested lists and ensure efficient DOM updates with keyed each blocks.

Two Dimensions

Nest {#each} blocks to render tables, grids, or trees.

{#each rows as row, i}
  <tr>
    {#each row as cell, j}
      <td>{cell}</td>
    {/each}
  </tr>
{/each}

Add keys at every level for efficient updates.

{#each rows as row (row.id)}
  {#each row.cells as cell (cell.id)}
    ...
  {/each}
{/each}