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

interactiveinteractivebooleanSpecifies whether the rows react to user interaction (hover/focus).

selectionselectionbooleanEnables the selection column for the rows in this table body.

Overview

The <mds-table-body> web component is the row-group container of the Magma Design System tabular data system, used inside <mds-table>. It is the equivalent of the native HTML <tbody>, grouping the data mds-table-row elements and relaying the parent table’s interaction and selection styling to those rows.

Semantic Behavior

Compound child: Must be a direct slot child of <mds-table> and hold only mds-table-row elements; it is not used standalone nor interleaved with mds-table-header / mds-table-footer content.Parent-driven state: Both interactive and selection are set by the parent table, so consumers normally do not toggle them by hand.Live rows: Rows added or removed at runtime are detected and re-wired with the table’s interactive/selectable state.Hover relay: When interactive is set, hovering the body highlights its rows.Last-row border trimming: The last mds-table-body in a table clears the bottom border of its final row, so the final row does not double the table’s own outer border.

Properties & Visual Configurations

This component exposes only two boolean flags, both intended to be managed by the parent <mds-table> rather than set directly: interactive enables the mouseover row-highlight styling for the group; it mirrors the table’s own interactive prop.selection switches the body’s default background to its alternate tone to signal that an active selection exists; the parent sets it true while at least one row is selected.