Go to homepage

Projects /


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

View Demo

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

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


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.