Tables
Display list of data in a tabular fashion.
| ID | Date | Company | Visitors | Host | Actions |
|---|---|---|---|---|---|
| 1 | Aug 25 | Techship | 18 | Steve Hockett | Edit group |
| 2 | Aug 25 | Modtech | 3 | Charlene Gigliotti | Edit group |
| 3 | Aug 26 | Commerce Mill | 5 | Kenneth Camille | Edit group |
| 4 | Aug 28 | Airdustry | 10 | Tanna Goldman | Edit group |
| 5 | Sep 1st | Plextric | 4 | Angelita Guillemette | Edit group |
| 40 |
.c-table
Style variants
Compact
| ID | Date | Company | Visitors | Host | Actions |
|---|---|---|---|---|---|
| 1 | Aug 25 | Techship | 18 | Steve Hockett | Edit group |
| 2 | Aug 25 | Modtech | 3 | Charlene Gigliotti | Edit group |
| 3 | Aug 26 | Commerce Mill | 5 | Kenneth Camille | Edit group |
| 4 | Aug 28 | Airdustry | 10 | Tanna Goldman | Edit group |
| 5 | Sep 1st | Plextric | 4 | Angelita Guillemette | Edit group |
| 40 |
.c-table .c-table--compact
Bordered
| ID | Date | Company | Visitors | Host | Actions |
|---|---|---|---|---|---|
| 1 | Aug 25 | Techship | 18 | Steve Hockett | Edit group |
| 2 | Aug 25 | Modtech | 3 | Charlene Gigliotti | Edit group |
| 3 | Aug 26 | Commerce Mill | 5 | Kenneth Camille | Edit group |
| 4 | Aug 28 | Airdustry | 10 | Tanna Goldman | Edit group |
| 5 | Sep 1st | Plextric | 4 | Angelita Guillemette | Edit group |
| 40 |
.c-table .c-table--border-all
Borderless
| ID | Date | Company | Visitors | Host | Actions |
|---|---|---|---|---|---|
| 1 | Aug 25 | Techship | 18 | Steve Hockett | Edit group |
| 2 | Aug 25 | Modtech | 3 | Charlene Gigliotti | Edit group |
| 3 | Aug 26 | Commerce Mill | 5 | Kenneth Camille | Edit group |
| 4 | Aug 28 | Airdustry | 10 | Tanna Goldman | Edit group |
| 5 | Sep 1st | Plextric | 4 | Angelita Guillemette | Edit group |
| 40 |
.c-table .c-table--border-none
Zebra 🦓
| ID | Date | Company | Visitors | Host | Actions |
|---|---|---|---|---|---|
| 1 | Aug 25 | Techship | 18 | Steve Hockett | Edit group |
| 2 | Aug 25 | Modtech | 3 | Charlene Gigliotti | Edit group |
| 3 | Aug 26 | Commerce Mill | 5 | Kenneth Camille | Edit group |
| 4 | Aug 28 | Airdustry | 10 | Tanna Goldman | Edit group |
| 5 | Sep 1st | Plextric | 4 | Angelita Guillemette | Edit group |
| 40 |
.c-table .c-table--zebra
Hover
This variant adds a hover effect for each row of the table. There is also a per row option specific variant explained below.
| ID | Date | Company | Visitors | Host | Actions |
|---|---|---|---|---|---|
| 1 | Aug 25 | Techship | 18 | Steve Hockett | Edit group |
| 2 | Aug 25 | Modtech | 3 | Charlene Gigliotti | Edit group |
| 3 | Aug 26 | Commerce Mill | 5 | Kenneth Camille | Edit group |
| 4 | Aug 28 | Airdustry | 10 | Tanna Goldman | Edit group |
| 5 | Sep 1st | Plextric | 4 | Angelita Guillemette | Edit group |
| 40 |
.c-table .c-table--hover
Row
Interactive row
| ID | Date | Company | Visitors | Notes |
|---|---|---|---|---|
| 1 | Aug 25 | Techship | 18 | This row is interactive |
| 2 | Aug 25 | Modtech | 3 | This row is interactive |
| 4 | Aug 28 | Airdustry | 10 | This is a regular row |
| 5 | Sep 1st | Plextric | 4 | This is a regular row |
| 40 |
has-hover class is added to the TR.
Selected row
| ID | Date | Company | Visitors | Notes |
|---|---|---|---|---|
| 1 | Aug 25 | Techship | 18 | This row is interactive |
| 2 | Aug 25 | Modtech | 3 | This row is selected |
| 4 | Aug 28 | Airdustry | 10 | This row is interactive |
| 5 | Sep 1st | Plextric | 4 | This row is interactive |
| 40 |
is-selected class is added to the TR.
Disabled row
| ID | Date | Company | Visitors | Notes | |
|---|---|---|---|---|---|
| 1 | Aug 25 | Techship | 18 | This row is interactive | |
| 2 | Aug 25 | Modtech | 3 | This row is selected | |
| 4 | Aug 28 | Airdustry | 10 | This row is disabled | |
| 5 | Sep 1st | Plextric | 4 | This row is disabled | |
| 40 |
is-disablede class is added to the TR.
Sticky headers
To use sticky headers your table should be wrapper in a .l-scroll layout. Parent elements should not have styling that would prevent position: sticky to work.
Sticky column headers
| Name | Date | Company | Host | Actions |
|---|---|---|---|---|
| Steve Hockett | Aug 25 | Techship | 18 | Edit group Duplicate Delete |
| Charlene Gigliotti | Aug 25 | Modtech | 3 | Edit group Duplicate Delete |
| Kenneth Camille | Aug 26 | Commerce Mill | 5 | Edit group Duplicate Delete |
| Tanna Goldman | Aug 28 | Airdustry | 10 | Edit group Duplicate Delete |
| Angelita Guillemette | Sep 1st | Plextric | 4 | Edit group Duplicate Delete |
| Steve Hockett | Aug 25 | Techship | 18 | Edit group Duplicate Delete |
| Charlene Gigliotti | Aug 25 | Modtech | 3 | Edit group Duplicate Delete |
| Kenneth Camille | Aug 26 | Commerce Mill | 5 | Edit group Duplicate Delete |
| Tanna Goldman | Aug 28 | Airdustry | 10 | Edit group Duplicate Delete |
| Angelita Guillemette | Sep 1st | Plextric | 4 | Edit group Duplicate Delete |
.c-table .c-table--sticky-headers
Sticky row headers
| Name | Date | Company | Host | Actions |
|---|---|---|---|---|
| Steve Hockett | Aug 25 | Techship | 18 | Edit group Duplicate Delete |
| Charlene Gigliotti | Aug 25 | Modtech | 3 | Edit group Duplicate Delete |
| Kenneth Camille | Aug 26 | Commerce Mill | 5 | Edit group Duplicate Delete |
| Tanna Goldman | Aug 28 | Airdustry | 10 | Edit group Duplicate Delete |
| Angelita Guillemette | Sep 1st | Plextric | 4 | Edit group Duplicate Delete |
| Steve Hockett | Aug 25 | Techship | 18 | Edit group Duplicate Delete |
| Charlene Gigliotti | Aug 25 | Modtech | 3 | Edit group Duplicate Delete |
| Kenneth Camille | Aug 26 | Commerce Mill | 5 | Edit group Duplicate Delete |
| Tanna Goldman | Aug 28 | Airdustry | 10 | Edit group Duplicate Delete |
| Angelita Guillemette | Sep 1st | Plextric | 4 | Edit group Duplicate Delete |
.c-table .c-table--sticky-headers
Row and column sticky headers
| Name | Date | Company | Host | Actions |
|---|---|---|---|---|
| Steve Hockett | Aug 25 | Techship | 18 | Edit group Duplicate Delete |
| Charlene Gigliotti | Aug 25 | Modtech | 3 | Edit group Duplicate Delete |
| Kenneth Camille | Aug 26 | Commerce Mill | 5 | Edit group Duplicate Delete |
| Tanna Goldman | Aug 28 | Airdustry | 10 | Edit group Duplicate Delete |
| Angelita Guillemette | Sep 1st | Plextric | 4 | Edit group Duplicate Delete |
| Steve Hockett | Aug 25 | Techship | 18 | Edit group Duplicate Delete |
| Charlene Gigliotti | Aug 25 | Modtech | 3 | Edit group Duplicate Delete |
| Kenneth Camille | Aug 26 | Commerce Mill | 5 | Edit group Duplicate Delete |
| Tanna Goldman | Aug 28 | Airdustry | 10 | Edit group Duplicate Delete |
| Angelita Guillemette | Sep 1st | Plextric | 4 | Edit group Duplicate Delete |
.c-table .c-table--sticky-headers