🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%

Expandable Table

A table whose rows expand to reveal additional information.

Copy: View demo


All components are based on CodyFrame.

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 [email protected]{breakpoint} classes to edit the layout at a specific breakpoint (example):

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} and text-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 → 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

✅ Project duplicated

✅ Project created

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