43

Column Oriented Table

 5 years ago
source link: https://www.tuicool.com/articles/yEzyA3E
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Data table for cases where each column is a meaningful unit. NnUvUbU.png!web

Download + Demo

How To

Tables can be used to organize data in a two-dimensional grid so that correlation is clear to users.

The Column Oriented Table component has been designed for cases where each column is a meaningful unit.

Responsiveness

By default, the table is displayed using the standard, expanded table layout (rows + columns).

If you use one of the .cl-table--expanded@{breakpoint} class modifiers, the layout is presented 1) in the collapsed (accordion-like) form before the breakpoint and 2) in the expanded form after the breakpoint. The collapsed variation is optimized for smaller screens.

Here's a list of the class modifiers:

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

For the accordion-like layout, the column headers are used as button labels (in thedemo, 'Spring', 'Summer', 'Autumn' and 'Winter').

If you want the row headers to be used as button labels, take a look at theRow Oriented Table component.

Column Width

If you want to set a fixed width for a table column, you can use one of the width utility classes . You can apply the width class only to one .cl-table__cell element: all the other cells in the same columns will automatically adapt.

Please note that the width utility classes will affect only the table expanded layout (default rows + columns layout).

Alignment

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

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

Sticky Header

If you want the header of the table to be sticky on scrolling (expanded layout only), you can add the .cl-table__header--sticky class to the .cl-table__header element (example).


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK