mds-table

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

| Property | Attribute | Description | Type | Default | | ------------- | ------------- | ------------------------------------------------------------- | ---------------------- | ----------- | | interactive | interactive | Specifies if the table rows are higlighted on mouseover event | boolean \| undefined | undefined | | selectable | selectable | Specifies if the table rows are selectable by a checkbox | boolean \| undefined | undefined | | selection | selection | | boolean \| undefined | undefined |

Events

| Event | Description | Type | | ------------------------- | ------------------------------------------- | ------------------------------------------- | | mdsTableSelectionChange | Dispatces when interactive property changes | CustomEvent<MdsTableSelectionEventDetail> |

Methods

selectAll(select?: boolean) => Promise<void>

Selects all elements or none, works only if selectable is true.

Parameters

| Name | Type | Description | | -------- | --------- | ----------- | | select | boolean | |

Returns

Type: Promise<void>

updateSelection() => 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.

Returns

Type: Promise<void>

Slots

| Slot | Description | | ----------- | ----------------------------------------------------------------------- | | "default" | Put mds-table-header, mds-table-body, mds-table-footer element/s. |

CSS Custom Properties

| Name | Description | | ---------------------------- | ------------------------------------------------------------------------------------------------------- | | --mds-table-actions-gap | The gap between slotted actions on mds-table-row element | | --mds-table-background | The background-color of the table | | --mds-table-background-alt | The background-color of the table cell not hovered, visible when attribute interactive is set tu true | | --mds-table-border-color | The border-color of the table | | --mds-table-border-width | The border-width of the table, visible when attribute interactive is set tu true | | --mds-table-cell-padding | The padding of the table cell | | --mds-table-color | The text color of the table | | --mds-table-color-alt | The text color of the table |

Built with love @ Gruppo Maggioli from R&D Department