Table<mds-table>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
sortingenumSpecifies who sorts the rows when a sortable header cell changes direction: internal moves them in the DOM, external leaves them to the application, which listens to mdsTableHeaderCellSort and renders the rows in the order asked (a table that shows one page of a larger set)
interactiveinteractivebooleanSpecifies if the table rows are higlighted on mouseover event
selectableselectablebooleanSpecifies if the table rows are selectable by a checkbox
selectionselectionbooleanIndicates whether row selection is currently active in the table.
Panoramica
The <mds-table> web component is the root container of the Magma Design System tabular data system. It wraps a native <table> and orchestrates a family of compound children (mds-table-header, mds-table-body, mds-table-footer, mds-table-row, mds-table-cell), propagating interaction, selection, and overflow state down to them.
Semantic Behavior
Compound parent: The default slot must hold mds-table-header / mds-table-body / mds-table-footer; <mds-table> pushes its own interactive and selectable state onto every mds-table-row and the header/body. It is not used standalone.Selection model: When selectable is set, rows expose a checkbox; the component aggregates the selected rows, mirrors the count to the header’s tristate control, and flags that a selection exists so it is visible to CSS and consumers.Selection event: Emits mdsTableSelectionChange (bubbles, composed) carrying { rows }, an array of { index, value } for every selected row. Selection is driven via the updateSelection() and selectAll(select?) methods rather than DOM listeners; both are no-ops unless selectable is true.Live children: Rows added or removed at runtime are re-wired with the table’s interactive and selectable state, so dynamically added rows behave consistently.Action overflow: When rows carry a [slot="action"], rows flip into an overlaid-action mode once content exceeds the visible width.Localization: Resolves its display language from the page (<html lang>: el/en/es/it, otherwise en) for the batch-actions label.
Properties & Visual Configurations
interactive highlights rows on mouseover; choose it for tables whose rows are clickable or navigable, not for purely static read-only data.selectable turns on per-row checkbox selection and the aggregated header/batch-actions machinery; without it the selection methods and the batch-action slot are inert.selection is a read-back flag that becomes true while at least one row is selected - it is managed internally, not something callers normally set.sorting says who orders the rows when a sortable mds-table-header-cell changes direction. internal (default) moves the rows in the DOM; external leaves them where they are, so the application listens to mdsTableHeaderCellSort and renders the rows in the order asked. Choose external whenever the table shows one page of a larger set (with mds-paginator) or the order comes from a back end: sorting the DOM would only sort the page on screen.
Other behavioral props
batch-action slot holds mds-button element/s; its bar renders only when selectable is on and at least one batch action is slotted, surfacing a live count badge of the current selection.