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

Summary Row with Column Labels

The most common pattern: a footer row that repeats the column headings as a visual anchor at the bottom of a long table. Place mds-table-footer as a direct child of mds-table, after mds-table-body, containing one mds-table-cell per column.

<mds-table>
  <mds-table-header>
    <mds-table-header-cell label="Cognome e 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">Rossi Mario</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">m.rossi@example.it</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">12 ott 1985</mds-text></mds-table-cell>
    </mds-table-row>
    <mds-table-row>
      <mds-table-cell><mds-text typography="detail">Verdi Luigi</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">l.verdi@example.it</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">3 mar 1993</mds-text></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
  <mds-table-footer>
    <mds-table-cell><mds-text typography="action">Cognome e nome</mds-text></mds-table-cell>
    <mds-table-cell><mds-text typography="action">Email</mds-text></mds-table-cell>
    <mds-table-cell><mds-text typography="action">Data</mds-text></mds-table-cell>
  </mds-table-footer>
</mds-table>

Totals Row

Use the footer to display computed totals or aggregated values that summarize the body rows. Cell content can be any component accepted by mds-table-cell.

<mds-table>
  <mds-table-header>
    <mds-table-header-cell label="Voce di spesa"></mds-table-header-cell>
    <mds-table-header-cell label="Importo"></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><mds-text typography="detail">Licenze software</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">1.200,00 EUR</mds-text></mds-table-cell>
      <mds-table-cell><mds-badge variant="success" tone="weak" label="Approvato"></mds-badge></mds-table-cell>
    </mds-table-row>
    <mds-table-row>
      <mds-table-cell><mds-text typography="detail">Consulenza</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">3.500,00 EUR</mds-text></mds-table-cell>
      <mds-table-cell><mds-badge variant="warning" tone="weak" label="In attesa"></mds-badge></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
  <mds-table-footer>
    <mds-table-cell><mds-text typography="action">Totale</mds-text></mds-table-cell>
    <mds-table-cell><mds-text typography="action">4.700,00 EUR</mds-text></mds-table-cell>
    <mds-table-cell></mds-table-cell>
  </mds-table-footer>
</mds-table>

Multiple Footer Rows

mds-table-footer is a single row, so it never wraps mds-table-row (a row nested in a row breaks the column layout). When you need more than one footer row - for example a subtotal row followed by a grand total row - place one mds-table-footer per row, one after the other.

<mds-table>
  <mds-table-header>
    <mds-table-header-cell label="Descrizione"></mds-table-header-cell>
    <mds-table-header-cell label="Imponibile"></mds-table-header-cell>
    <mds-table-header-cell label="IVA 22%"></mds-table-header-cell>
  </mds-table-header>
  <mds-table-body>
    <mds-table-row>
      <mds-table-cell><mds-text typography="detail">Servizio A</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">800,00 EUR</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">176,00 EUR</mds-text></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
  <mds-table-footer>
    <mds-table-cell><mds-text typography="detail">Subtotale</mds-text></mds-table-cell>
    <mds-table-cell><mds-text typography="detail">800,00 EUR</mds-text></mds-table-cell>
    <mds-table-cell><mds-text typography="detail">176,00 EUR</mds-text></mds-table-cell>
  </mds-table-footer>
  <mds-table-footer>
    <mds-table-cell><mds-text typography="action">Totale</mds-text></mds-table-cell>
    <mds-table-cell><mds-text typography="action">976,00 EUR</mds-text></mds-table-cell>
    <mds-table-cell></mds-table-cell>
  </mds-table-footer>
</mds-table>

Cell-Level Styling via Parent --mds-table-* Custom Properties

mds-table-footer inherits visual styling from the CSS custom properties defined on the parent mds-table. Set those properties on mds-table (or a wrapping selector) to restyle borders, backgrounds, and cell padding uniformly across the whole table - including the footer. --mds-table-cell-padding takes a single length: the table also halves it and adds it to other measures.

.bilancio-table mds-table {
  --mds-table-background: rgb(var(--magma-surface-raised));
  --mds-table-border-color: rgb(var(--magma-border-default));
  --mds-table-border-width: 2px;
  --mds-table-cell-padding: calc(var(--spacing) * 300);
}