Table<mds-table>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
Magma components are web components: custom elements you write like HTML tags, with any framework or without one. Props configure them, events tell you what happened, methods are functions you call on the element and slots take the content you put inside it.
Props
Set a prop as an HTML attribute in the markup, or as a property from JavaScript. The Attribute column gives the name of the attribute, a dash when it is the same as the property; props without one, such as arrays and functions, are set from JavaScript only. To turn a boolean attribute off, remove it: never write disabled="false".interactive
-
boolean | undefinedSpecifies if the table rows are higlighted on mouseover event
selectable
-
boolean | undefinedSpecifies if the table rows are selectable by a checkbox
selection
-
boolean | undefinedIndicates whether row selection is currently active in the table.
sorting
-
external | internal | undefinedinternalSpecifies 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)
Events
mdsTableSelectionChangeMdsTableSelectionEventDetailDispatces when interactive property changes
Methods
selectAllselectAll(select?: boolean) => Promise<void>Selects all elements or none, works only if selectable is true.
updateSelectionupdateSelection() => Promise<void>internal Updates the selection data event and emits it, it’s used to avoid add event listener to the dom and lower performance, works only if selectable is true.
Slots
Slots take the content you write between the tags of the component. The default slot, the one without a name, accepts plain text, unless its description says otherwise. Content for a named slot goes on a direct child with the name of the slot in its slot attribute, such as slot="batch-action".(default)Put mds-table-header, mds-table-body, mds-table-footer element/s.