The Table component is used to display a list of structured information. Each line represent an item in the list, and a cell represent a property/piece of information of this item.
Introduction
The table component is an essential element for displaying content.
There are a lot of situation where we need to display content as a table.
| Firstname |
Lastname |
Email |
ZipCode |
|
| John |
Smith |
john.smith@gmail.com |
1000 |
Edit |
| Jean |
Moulin |
jean.moulin@gmail.com |
1200 |
Edit |
| Bart |
Simpson |
bart.simpson@gmail.com |
1180 |
Edit |
Striped
In order to increase the readability between lines, we can display table with striped line.
| Firstname |
Lastname |
Email |
ZipCode |
|
| John |
Smith |
john.smith@gmail.com |
1000 |
Edit |
| Jean |
Moulin |
jean.moulin@gmail.com |
1200 |
Edit |
| Bart |
Simpson |
bart.simpson@gmail.com |
1180 |
Edit |
Responsive
By default the table will have an horizontal scrollbar when the content is bigger than the parent container.
But sometimes on small screen (< 640px), we want to switch the layout of the table in a vertical way to display all content without an horizontal scrollbar.
| Firstname |
Lastname |
Email |
ZipCode |
|
| John |
Smith |
john.smith@gmail.com |
1000 |
Edit |
| Jean |
Moulin |
jean.moulin@gmail.com |
1200 |
Edit |
| Bart |
Simpson |
bart.simpson@gmail.com |
1180 |
Edit |
