mi-column

The <mi-column> element can be used to define a column within a <mi-data-table> element.

Working example:

Example usage:

<!-- HTML -->

<mi-data-table>
    <mi-column label="ID" binding="id"></mi-column>
    <mi-column label="Title" binding="title" sortable></mi-column>
    <mi-column id="button-column"><button class="mi-button mi-button--primary">?</button></mi-column>
</mi-data-table>
// JavaScript

const tableData = [
    { id: 1, title: 'Kitchen'},
    { id: 2, title: 'Living Room'},
    { id: 3, title: 'Bedroom'},
];
document.querySelector('mi-data-table').rows = tableData;
document.getElementById('button-column').addEventListener('clicked', event => alert(event.detail.title));

binding attribute

The binding attribute can be used to specify what part of the row data to display. Eg. having row data like [ { id: 1, title: "Living Room" }, {...} ], when using binding="title" the title value from the data will be displayed (in this example Living Room).

You can also omit the binding and compose the content yourself by providing it as inner content of the column element. You are able to use data interpolation as well. Eg. <mi-column>Identifier <strong>{id}</strong></mi-column>. This approach will also enable you to use MapsIndoors CSS classes and MIDT classes.

label attribute

The label attribute can be used to set the content of the column heading (tr element) in the table. If omitted, the binding name will be used.

sortable attribute

The boolean sortable attribute can be used to indicate that the table can be sorted by this column content.

clicked event

A clicked event is emitted from the <mi-column> element when content inside the cells have been clicked. Event payload contains the row data.

Properties

Property Attribute Description Type Default
binding binding The name of the property on the row object which value will be displayed. string undefined
fitContent fit-content If present the column width will be fitted to the content. boolean false
label label The label that will be shown in the table header. string undefined
sortable sortable If present the column will be sortable. boolean false

Events

Event Description Type
clicked Fired when clicking on content within a table cell for this column. Event detail contains the row data. CustomEvent<object>