The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.

Props

valuestringSets a value to help the sorting function from mds-table-header-cell, if not set it will be used the content of the cell.

Overview

The <mds-table-cell> web component is the data-cell building block of the Magma table, designed to be slotted inside <mds-table-row>. It plays the role of a single table cell (the equivalent of an HTML <td>) and wraps arbitrary content with the correct table semantics and styling.

Semantic Behavior

Compound child only: Must be placed as a direct slot child of <mds-table-row> (or of <mds-table-footer>, which is itself a row). It is not used standalone, and a row should not mix cells with unrelated child types. The parent also injects its own mds-table-cell instances for the selection checkbox and row actions.Sorting contribution: The cell does not sort anything itself, but its value is read by mds-table-header-cell when sorting a column. If value is unset, the header cell falls back to the cell’s trimmed text content.Default slot passthrough: Any text, HTML or component placed inside is projected as-is; there is no internal layout beyond styling.

Properties & Visual Configurations

This component is essentially a layout/semantic child and exposes a single non-obvious prop: value: Provide this when the cell’s visible content is not directly comparable for sorting, when the displayed text differs from the value you want to sort by (e.g. a formatted date or currency string), or to get a numeric sort (two values that both read as numbers, such as value="1250.50", are compared numerically). When omitted, the column sort uses the rendered text content instead. There are no variant or tone props; visual presentation is controlled through the documented CSS custom properties (background, alternate background, and text colors) listed in AGENTS.md.

Dependencies

Used by: mds-table-header, mds-table-row