Table

Data tables used to organize and display information in rows and columns.

How to

Tables are used to list information from a data set in a two-dimensional grid so that the data correlation is understandable by the user.

Responsiveness #

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

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

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

Column Width #

To set a fixed width for a column, apply one of the width utility classes to the .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 .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 .table--expanded modifier is applied to the .table element.

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

Alignment #

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

• .text-left → left horizontal alignment
• .text-center → center horizontal alignment
• .text-right → right horizontal alignment
• .align-top → top vertical alignment
• .align-middle → middle vertical alignment
• .align-bottom → bottom vertical alignment

Sticky Header #

To make the header sticky while scrolling the table content, apply the .table__header--sticky class to the .table__header element (example).

Categories

• Data Display > Table

Bug report & feedback

Component Github page ↗