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

Basic Row with Data Cells

The minimal form: slot one or more mds-table-cell elements into the default slot. Always place <mds-table-row> inside mds-table-body - never standalone, and never inside mds-table-header / mds-table-footer, which are rows themselves.

<mds-table>
  <mds-table-header>
    <mds-table-header-cell label="Nome"></mds-table-header-cell>
    <mds-table-header-cell label="Email"></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><mds-text typography="detail">Mario Rossi</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">mario.rossi@example.com</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">12 ottobre 1985</mds-text></mds-table-cell>
    </mds-table-row>
    <mds-table-row>
      <mds-table-cell><mds-text typography="detail">Luigi Verdi</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">luigi.verdi@example.com</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">3 marzo 1993</mds-text></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Row with Per-Row Actions

Slot one or more mds-button elements into the action slot to add a contextual actions menu that slides in on row hover. Use icon-only buttons with aria-label (or title) because the label has no space.

<mds-table-row value="42">
  <mds-table-cell><mds-text typography="detail">Documento riservato.pdf</mds-text></mds-table-cell>
  <mds-table-cell><mds-text typography="detail">2 MB</mds-text></mds-table-cell>
  <mds-button
    slot="action"
    icon="mi/baseline/download"
    title="Scarica"
    variant="primary"
    tone="text"
  ></mds-button>
  <mds-button
    slot="action"
    icon="mi/baseline/delete"
    title="Elimina"
    variant="error"
    tone="text"
  ></mds-button>
</mds-table-row>

Row with Identifying value

Set value to the business key (record id or slug) that the parent table should include in the mdsTableSelectionChange event detail. This wires the visual row to the data layer without any manual DOM traversal.

<mds-table selectable>
  <mds-table-body>
    <mds-table-row value="user-101">
      <mds-table-cell><mds-text typography="detail">Carla Bianchi</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">carla.bianchi@example.com</mds-text></mds-table-cell>
    </mds-table-row>
    <mds-table-row value="user-102">
      <mds-table-cell><mds-text typography="detail">Federica Neri</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">federica.neri@example.com</mds-text></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Selectable Table - Reading the Selection Event

When the parent <mds-table> sets selectable, each row renders a leading checkbox automatically. Listen for mdsTableSelectionChange on the table - do not wire per-row events.

<mds-table id="utenti" selectable>
  <mds-table-body>
    <mds-table-row value="101">
      <mds-table-cell><mds-text typography="detail">Mario Rossi</mds-text></mds-table-cell>
    </mds-table-row>
    <mds-table-row value="102">
      <mds-table-cell><mds-text typography="detail">Luigi Verdi</mds-text></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

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

Programmatic Selection

selected is mutable and reflected. Set it from JavaScript to restore a previously saved selection state. Setting it updates that row only: call the parent table’s updateSelection() afterwards so it emits mdsTableSelectionChange and updates the header checkbox and the batch-action bar. For bulk “select all” use the table’s selectAll().

<mds-table selectable id="tabella-record">
  <mds-table-body>
    <mds-table-row id="riga-principale" value="rec-1">
      <mds-table-cell><mds-text typography="detail">Record principale</mds-text></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

<script>
  // Select the row programmatically (e.g. after restoring from storage)
  document.getElementById('riga-principale').selected = true;
  document.getElementById('tabella-record').updateSelection();
</script>

Interactive Table (Hover Highlight)

Set interactive on the parent <mds-table> to enable per-row hover highlights. The prop is mirrored to each row by the table - do not set it on individual rows.

<mds-table interactive>
  <mds-table-body>
    <mds-table-row value="p-01">
      <mds-table-cell><mds-text typography="detail">Pratica 01</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">In lavorazione</mds-text></mds-table-cell>
    </mds-table-row>
    <mds-table-row value="p-02">
      <mds-table-cell><mds-text typography="detail">Pratica 02</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">Completata</mds-text></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Styling Customization

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

/* Customize hover (and selected) and sorted-row colors for a branded table */
.tabella-brand mds-table-row {
  --mds-table-row-background-hover: rgb(var(--magma-accent-emphasis));
  --mds-table-row-color-hover: rgb(var(--magma-accent-on-emphasis));
  --mds-table-row-background-alt: rgb(var(--magma-surface-inverse));
  --mds-table-row-color-alt: rgb(var(--magma-on-inverse));
  --mds-table-row-actions-gap: calc(var(--spacing) * 200);
}