DataTable

Import

Import the settings and the datatable scss files.

Usage

The creation of a DataTable component in your code is done using the following HTML structure:

Composition

The DataTable is composed of several elements that you are free to use (or not) according to your needs and use cases.

These elements are as follows:

• The DataTable table (mandatory)
• The DataTable header (optional): learn more on the releated documentation
• The DataTable footer (optional): learn more on the releated documentation
• The Expanded DataTable (optional): learn more on the releated documentation

Variations

Size

You can create your Datatable component using one of the following size formats:

• small: by adding the mc-datatable--s modifier to the mc-datatable element.
• medium: this is the default format, therefore it does not need to add a modifier.
• large: by adding the mc-datatable--l modifier to the mc-datatable element.

Small

Large

Empty

Behaviour

Sticky table header

In some cases, you may need to stick the header of your DataTable.

To do this, simply add the mc-datatable--sticky-header modifier to your mc-datatable element.