Expandable Rows

Reveal additional detail for each row via an expand toggle.

Provide an expandedRowContent snippet to enable row expansion. Each row gets a toggle button. Use multiExpand to allow multiple rows open at once.

Expandable Detail Panel

Click the expand toggle to reveal additional detail for each row.

Name	Role	Department	Location
Emma Wilson	Staff Engineer	Platform	Berlin
Liam Chen	Product Designer	Design	Hamburg
Sofia Martinez	Engineering Manager	Platform	Munich
James Park	Frontend Developer	Product	Remote
Aisha Patel	Data Scientist	Data	Berlin
Noah Kim	DevOps Engineer	Platform	Hamburg

<Table {items} {columns}>
  {#snippet expandedRowContent(item)}
    <div class="grid grid-cols-3 gap-4 p-4">
      <div>
        <span class="text-xs text-text-tertiary">Email</span>
        <p class="text-sm">{item.email}</p>
      </div>
      <div>
        <span class="text-xs text-text-tertiary">Salary</span>
        <p class="text-sm">{item.salary.toLocaleString()} €</p>
      </div>
      <div>
        <span class="text-xs text-text-tertiary">Projects</span>
        <p class="text-sm">{item.projects}</p>
      </div>
    </div>
  {/snippet}
</Table>