Tables

Use table, table-row, and table-cell. Keep rows directly inside the table and cells inside rows; repeated row templates preserve native structure.

DIL source

{@body const services = [
  { name: "api-gateway", latency: "18 ms", status: "Healthy" },
  { name: "auth-service", latency: "32 ms", status: "Healthy" },
  { name: "payments", latency: "240 ms", status: "Degraded" },
]}
<box border padding={4} radius="xl" gap={3}>
  <title>Production services</title>
  <table>
    <table-row>
      <table-cell>Service</table-cell>
      <table-cell>Latency</table-cell>
      <table-cell>Status</table-cell>
    </table-row>
    {#each services as service}
    <table-row>
      <table-cell>{service.name}</table-cell>
      <table-cell>{service.latency}</table-cell>
      <table-cell>
        <badge color={service.status === "Healthy" ? "success" : "warning"}>{service.status}</badge>
      </table-cell>
    </table-row>
    {/each}
  </table>
</box>

Cells accept supported layout attributes such as width and alignment. The stock adapter does not expose a separate table-header tag, sorting API, or arbitrary native table attributes.

Large repeated row collections use virtualization with spacer rows. Stable item IDs preserve identity and active controls. Try the long table to inspect the behavior at 5,000 entries. Include meaningful labels and an appropriate document heading for the table’s purpose.