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

Plain Text Cell

The most common form. Wrap the text in <mds-text> to apply the correct typography style; do not put a bare string directly if you need semantic styling.

<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@esempio.it</mds-text>
  </mds-table-cell>
  <mds-table-cell>
    <mds-text typography="detail">12 ottobre 1985</mds-text>
  </mds-table-cell>
</mds-table-row>

Sortable Column - Value Matches Displayed Text

When the column header is sortable and the displayed text is directly sortable as a string, no value prop is needed - the sort reads the cell’s rendered text content automatically.

<mds-table-header>
  <mds-table-header-cell sortable label="Cognome"></mds-table-header-cell>
  <mds-table-header-cell sortable label="Nome"></mds-table-header-cell>
</mds-table-header>
<mds-table-body>
  <mds-table-row>
    <mds-table-cell><mds-text typography="detail">Rossi</mds-text></mds-table-cell>
    <mds-table-cell><mds-text typography="detail">Mario</mds-text></mds-table-cell>
  </mds-table-row>
  <mds-table-row>
    <mds-table-cell><mds-text typography="detail">Verdi</mds-text></mds-table-cell>
    <mds-table-cell><mds-text typography="detail">Luigi</mds-text></mds-table-cell>
  </mds-table-row>
</mds-table-body>

Sortable Column - Explicit value for Formatted Data

When the cell displays a formatted string (currency, localized date, percentage) that does not sort lexicographically, set value to the raw comparable form. Values that both read as numbers are compared numerically.

<mds-table-header>
  <mds-table-header-cell sortable label="Importo"></mds-table-header-cell>
  <mds-table-header-cell sortable label="Data registrazione"></mds-table-header-cell>
</mds-table-header>
<mds-table-body>
  <mds-table-row>
    <!-- numeric value for numeric sort -->
    <mds-table-cell value="1250.50">
      <mds-text typography="detail">1.250,50 EUR</mds-text>
    </mds-table-cell>
    <!-- value as ISO date string for correct chronological sort -->
    <mds-table-cell value="2024-03-15">
      <mds-text typography="detail">15 marzo 2024</mds-text>
    </mds-table-cell>
  </mds-table-row>
  <mds-table-row>
    <mds-table-cell value="340.00">
      <mds-text typography="detail">340,00 EUR</mds-text>
    </mds-table-cell>
    <mds-table-cell value="2023-11-02">
      <mds-text typography="detail">2 novembre 2023</mds-text>
    </mds-table-cell>
  </mds-table-row>
</mds-table-body>

Cell Containing a Component

The default slot accepts any HTML or component. Use this to embed status badges, avatars, buttons, or other Magma components inside a cell.

<mds-table-row>
  <mds-table-cell>
    <mds-text typography="detail">Piano Pro</mds-text>
  </mds-table-cell>
  <mds-table-cell>
    <mds-badge variant="success" tone="weak" label="Attivo"></mds-badge>
  </mds-table-cell>
  <mds-table-cell>
    <mds-avatar initials="MR"></mds-avatar>
  </mds-table-cell>
</mds-table-row>

Footer Cell

<mds-table-cell> is used inside <mds-table-footer> for summary rows (totals, counts). The footer is never sorted, so value has no effect there.

<mds-table-footer>
  <mds-table-cell>
    <mds-text typography="action">Totale</mds-text>
  </mds-table-cell>
  <mds-table-cell>
    <mds-text typography="action">42 record</mds-text>
  </mds-table-cell>
</mds-table-footer>

Full Table Composition

The canonical structure. Each cell sits inside an mds-table-row of mds-table-body, or directly inside mds-table-footer (the header holds mds-table-header-cell elements instead), all wrapped by <mds-table>.

<mds-table>
  <mds-table-header>
    <mds-table-header-cell sortable label="Utente"></mds-table-header-cell>
    <mds-table-header-cell sortable label="Email"></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 value="Mario Rossi">
        <mds-text typography="detail">Mario Rossi</mds-text>
      </mds-table-cell>
      <mds-table-cell value="mario.rossi@esempio.it">
        <mds-text typography="detail">mario.rossi@esempio.it</mds-text>
      </mds-table-cell>
      <mds-table-cell>
        <mds-badge variant="success" tone="weak" label="Attivo"></mds-badge>
      </mds-table-cell>
    </mds-table-row>
    <mds-table-row>
      <mds-table-cell value="Luigi Verdi">
        <mds-text typography="detail">Luigi Verdi</mds-text>
      </mds-table-cell>
      <mds-table-cell value="luigi.verdi@esempio.it">
        <mds-text typography="detail">luigi.verdi@esempio.it</mds-text>
      </mds-table-cell>
      <mds-table-cell>
        <mds-badge variant="error" tone="weak" label="Disabilitato"></mds-badge>
      </mds-table-cell>
    </mds-table-row>
  </mds-table-body>
  <mds-table-footer>
    <mds-table-cell><mds-text typography="action">2 utenti</mds-text></mds-table-cell>
    <mds-table-cell></mds-table-cell>
    <mds-table-cell></mds-table-cell>
  </mds-table-footer>
</mds-table>

Styling Customization

Customize cell colors through the documented --mds-table-cell-* CSS custom properties. Set them on the host or on a parent selector; use the semantic color roles via rgb(var(--magma-<role>)) so dark mode keeps working.

/* Highlight a column of cells with a custom background */
.tabella-fatture mds-table-cell.colonna-importo {
  --mds-table-cell-background: rgb(var(--magma-info-emphasis));
  --mds-table-cell-color: rgb(var(--magma-info-on-emphasis));
}