Skip to main content
Urbicon UI

Expandable Rows

Reveal additional detail for each row via an expand toggle.

Provide an expandedRowContent snippet and every row gets a toggle that reveals it, with the row's item as its argument. Opening a row closes the one before it; add multiExpand to keep several open at once.

Expandable Detail Panel

The panel is a row of its own that spans every column, so the layout inside it is yours to choose.
Name
Role
Department
Location 
<Table {items} {columns}>
  {#snippet expandedRowContent(item)}
    <div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-3">
      <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>