UI Elements
Table (Default)
| Sample Heading 1 | Sample Heading 2 | Sample Heading 3 | Sample Heading 4 | Right Aligned Table Heading |
|---|---|---|---|---|
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Lorem ipsum dolor sit amet. | amet consectetur adipisicing elit. Doloremque, esse? | Right Aligned Table Data |
Note(s):
- This is current using
padding-mdclass. There ispadding-smandpadding-lgwe can use to modifying the spacing inside td. - The
stripedclass adds alternating gray-white color to table rows. - Tables do not overflow by default, there is a required wrapper to make that happen and an extra table class modifier. See more below.
- Also added full footer columns to show we can do that there
Table (Horizontal Overflow)
| Sample Heading 1 | Sample Heading 2 | Sample Heading 3 | Sample Heading 4 | Right Aligned Table Heading |
|---|---|---|---|---|
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
Note(s):
- This table has
⩽div class="table-overflow">⩽/div>wrapper added to it as its parent, this is how we allow table to overflow horizontally. - Table cells - by default - will try to compress the contents into the available space this behavior
prevents the table from showing the
horizontal scrollbar. We need to add
.no-wrapclass to the table element itself to prevent this behavior.
Table (Vertical Overflow)
| Sample Heading 1 | Sample Heading 2 | Sample Heading 3 | Right Aligned Table Heading |
|---|---|---|---|
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
Note(s):
-
There are only 2 things to add to our default table to allow it to vertically scroll:
- Add
table-overflow--allow-verticalclass as a modifier to.table-overflow - Manually add
.table-overflowheight. In this example, it's320px;
- Add
- As discussed, only tables that don't have pagination gets to have a vertical scroll so I removed pagination in this sample.
Table (Horizontal Overflow with Indicator)
| Sample Heading 1 | Sample Heading 2 | Sample Heading 3 | Sample Heading 4 | Right Aligned Table Heading |
|---|---|---|---|---|
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
| Lorem ipsum, dolor | sit amet consectetur adipisicing elit. | Aut quaerat | tempora eveniet deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolore? | Right Aligned Table Data |
Note(s):
- To be able to add the indicator, we need to wrap
.table-overflowwidth.table-overflow--w-indicator, Then add.x-overflow-indicatorbefore.table-overflow. -
I've created a temporary javascript code below where
toggleTableOverflow()adds / remove.show-x-overflowwhen the table is overflowing horizontally.