Correct and idiomatic ways to use the <mds-table-body> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md.

Basic Table Body with Data Rows

The canonical form. Place <mds-table-body> as a direct slot child of <mds-table> and populate it with <mds-table-row> elements. The parent table wires interactive and selection automatically - do not set them by hand in most cases.

<mds-table>
  <mds-table-header>
    <mds-table-header-cell label="Nome"></mds-table-header-cell>
    <mds-table-header-cell label="Ruolo"></mds-table-header-cell>
    <mds-table-header-cell label="Stato"></mds-table-header-cell>
  </mds-table-header>
  <mds-table-body>
    <mds-table-row>
      <mds-table-cell>Marco Rossi</mds-table-cell>
      <mds-table-cell>Amministratore</mds-table-cell>
      <mds-table-cell>Attivo</mds-table-cell>
    </mds-table-row>
    <mds-table-row>
      <mds-table-cell>Laura Bianchi</mds-table-cell>
      <mds-table-cell>Operatore</mds-table-cell>
      <mds-table-cell>Inattivo</mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Interactive Table (Row Hover Highlight)

Set interactive on the parent <mds-table>. The table propagates the flag down to <mds-table-body> and every <mds-table-row>, applying the hover background without any extra wiring in the body markup.

<mds-table interactive>
  <mds-table-header>
    <mds-table-header-cell label="Documento"></mds-table-header-cell>
    <mds-table-header-cell label="Data"></mds-table-header-cell>
  </mds-table-header>
  <mds-table-body>
    <mds-table-row>
      <mds-table-cell>Delibera n. 42</mds-table-cell>
      <mds-table-cell>12/05/2025</mds-table-cell>
    </mds-table-row>
    <mds-table-row>
      <mds-table-cell>Determina n. 07</mds-table-cell>
      <mds-table-cell>03/06/2025</mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Selectable Table (Row Checkboxes)

Set selectable on <mds-table>. The table equips every row with a checkbox and manages the selection state on <mds-table-body> - switching the body background to the alternate tone while at least one row is checked. Listen to mdsTableSelectionChange on the table for the current selection.

<mds-table selectable id="tabella-utenti">
  <mds-table-header>
    <mds-table-header-cell label="Utente"></mds-table-header-cell>
    <mds-table-header-cell label="Reparto"></mds-table-header-cell>
  </mds-table-header>
  <mds-table-body>
    <mds-table-row value="u1">
      <mds-table-cell>Giulia Verdi</mds-table-cell>
      <mds-table-cell>Risorse Umane</mds-table-cell>
    </mds-table-row>
    <mds-table-row value="u2">
      <mds-table-cell>Andrea Neri</mds-table-cell>
      <mds-table-cell>Contabilita</mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

<script>
  document.querySelector('#tabella-utenti').addEventListener('mdsTableSelectionChange', (e) => {
    console.log('Righe selezionate:', e.detail.rows);
  });
</script>

Selectable Table with Batch Actions

When selectable is set and at least one <mds-button> is assigned to the batch-action slot on <mds-table>, the table renders a batch-action bar whenever rows are selected. The <mds-table-body> does not require any extra attributes for this.

<mds-table selectable>
  <mds-button slot="batch-action" label="Archivia selezionati" variant="primary" tone="strong"></mds-button>
  <mds-button slot="batch-action" label="Elimina selezionati" variant="error" tone="text"></mds-button>
  <mds-table-header>
    <mds-table-header-cell label="Pratica"></mds-table-header-cell>
    <mds-table-header-cell label="Richiedente"></mds-table-header-cell>
  </mds-table-header>
  <mds-table-body>
    <mds-table-row value="p1">
      <mds-table-cell>SUAP-2025-001</mds-table-cell>
      <mds-table-cell>Mario Conti</mds-table-cell>
    </mds-table-row>
    <mds-table-row value="p2">
      <mds-table-cell>SUAP-2025-002</mds-table-cell>
      <mds-table-cell>Silvia Ricci</mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Table with Header, Body, and Footer

Use <mds-table-header>, <mds-table-body>, and <mds-table-footer> together inside <mds-table>. The body’s last-row border is automatically trimmed where it meets the footer, so no manual border removal is needed.

<mds-table>
  <mds-table-header>
    <mds-table-header-cell label="Voce"></mds-table-header-cell>
    <mds-table-header-cell label="Importo"></mds-table-header-cell>
  </mds-table-header>
  <mds-table-body>
    <mds-table-row>
      <mds-table-cell>Compenso servizio</mds-table-cell>
      <mds-table-cell>1.200,00 EUR</mds-table-cell>
    </mds-table-row>
    <mds-table-row>
      <mds-table-cell>Rimborso spese</mds-table-cell>
      <mds-table-cell>85,50 EUR</mds-table-cell>
    </mds-table-row>
  </mds-table-body>
  <mds-table-footer>
    <mds-table-cell>Totale</mds-table-cell>
    <mds-table-cell>1.285,50 EUR</mds-table-cell>
  </mds-table-footer>
</mds-table>

Styling Customization via CSS Custom Properties

Override the five documented --mds-table-body-* CSS custom properties on the host or a parent selector. Use the semantic color roles wrapped in rgb(var(--magma-<role>)) so dark mode and high-contrast modes stay consistent.

.tabella-evidenziata mds-table-body {
  --mds-table-body-background: rgb(var(--magma-surface-raised));
  --mds-table-body-background-hover: rgb(var(--magma-accent-surface));
  --mds-table-body-background-alt: rgb(var(--magma-accent-surface));
  --mds-table-body-color: rgb(var(--magma-text-default));
  --mds-table-body-color-alt: rgb(var(--magma-accent-fg));
}