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

Projects

Progress value is 30%

Table

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

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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 [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 .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 text-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).

✅ Project duplicated

✅ Project created

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