Expandable Table

A table whose rows expand to reveal additional information.

How to

The Expandable Table component is a table whose rows expand to reveal additional content.

The .ex-table__more-content element is the additional content. Its visibility is controlled by the .ex-table__btn element.

Responsiveness#

By default, each row is displayed as a separate block (layout optimized for smaller screens). To edit this behavior, you can apply the .ex-table--expanded class to the .ex-table element. The .ex-table--expanded modifier is used to display the standard table layout (rows + columns).

Optionally, you can use one of the .ex-table--expanded@{breakpoint} classes to edit the layout at a specific breakpoint (example):

.ex-table--expanded@xs
.ex-table--expanded@sm
.ex-table--expanded@md
.ex-table--expanded@lg
.ex-table--expanded@xl

Column Width#

To set a fixed width for a column, apply one of the width utility classes to the .ex-table__cell element. Because of the implicit size correlation among cells belonging to the same column (they share the same size), you can apply the width class only to one .ex-table__cell element. All the other cells in the same column will adapt accordingly.

Please be aware the width utility classes have effect only when the .ex-table--expanded modifier is applied to the .ex-table element.

Other framework utility classes that help you modify columns width are the.min-width-{size} andtext-nowrap utility classes.

Alignment#

To modify the content alignment within a cell, you can apply the following utility classes to the .ex-table__cell element:

.text-left
.text-center
.text-right
.align-top
.align-middle
.align-bottom