Table pure css table with sticky header and footer, and expandable row
Thanks to the table components, we provide a full table style with colors that can be easily declared using our variables .
The table will have a function that can be added using the class. All these functions can be mixed, just add another class. For example, mobile support, expanded lines and body section, borders, mouseover backgrounds, zebra and more.
Class method
on what element
function
table, inline-tableon any tag
change display to: table, inline-table
tbody, theadon any tag
change display to: tbody or thead
colgroup, colon any tag
change display to: colgroup or col
tr, th, tdon any tag
change display to: tr, th or td
table-mobileon table
add support for mobile view - rensponsive go to example
table-fixedon table
change table to fixed column display
table-ellipsison table
add ellipsis to table for all cell
td-ellipsison td
add ellipsis to cell, require to set width to cell (with vw unit)
borderson table
add border vertical and horizontal to all rows
borders-outsideon table
add borders only to table outline
borders-horizontalon table
add borders to row (horizontal)
borders-verticalon table
add borders to column (vertical)
zebra-oddon table
add background to odd rows
zebra-evenon table
add background to even rows
hoverable-tdon table
add background color change on hover to cell
hoverable-tron table
add background color change on hover to row
un-hoveron tr, td
add this class to prevent for been hover
on-hoveron td, tr
this cell will be defalut hidden and shown when hover (cell or row)
hoverable-colon table
add background color change on hover to column, go to example
sticky-headeron table or table wrapper overflow-scroll
add sticky header (thead) to table
sticky-footeron table or table wrapper overflow-scroll
add sticky footer (tfoot) to table
sticky-bodyon table or table wrapper overflow-scroll
add sticky column (th in tbody) to table go to example
expandableon tbody, thead, tfoot or tr
add expandable feature, this element will be hidden by default, and show when toggled go to example
expandable-toggleron tbody, thead, tfoot or tr
element with this class will change after expandable section will expand go to example
Case of use
base / borders / hoverable row / zebra#
column hover with mobile #
Title
Title
Title
Title
Title
Title
Title
Title
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 500,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 20000,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value delete
Foot 1000000,00 Foot Foot Foot Foot Foot Foot
Title
Title
Title
Title
Title
Title
Title
Title
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 500,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 20000,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value delete
Foot 1000000,00 Foot Foot Foot Foot Foot Foot
* This features will work on a limited version with overflow-scroll wrapper and table-ellipsis features
mobile support on breakpoint#
Add .table-mobile and data-th="header of column" attribute and wrapper span tag to each of your td tags to apply mobile view support for your table. Look at example:
Title
Title
Title
Title
Title
Title
Title
Title
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 500,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 20000,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value delete
Foot 1000000,00 Foot Foot Foot Foot Foot Foot
Title
Title
Title
Title
Title
Title
Title
Title
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 500,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 20000,00 Cell value Cell value Cell value Cell value Cell value delete
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value delete
Foot 1000000,00 Foot Foot Foot Foot Foot Foot
//core
@table-mobile-max-width: @mobile-portrait-max-width;
//variables
@table-mobile-td-border: 1px solid lighten(@table-base-color-border, 60%);
@table-mobile-th-width: 30%;
@table-mobile-td-width: 70%;
@table-mobile-td-padding: 0.7rem 1rem 0.7rem 1.5rem;
@table-mobile-th-padding: 0.7rem 1.5rem 0.7rem 1rem;
@table-td-width-vw-sizes: 10, 20, 30, 40, 50, 60, 70, 80, 90;
expandable row / expandable body section #
The expanded section in the table will only work with the div tag with the class table on table-inline.
Place the <input/> checkbox tag before section with expandable-trigger class or before the section with expandable class.
Expandable trigger expandable-trigger section will change style after expanding it enters the selected state input:checked, you can declare own style in mixin table-expanded-trigger()
Expandable expandable section will change style after expanding it enters the selected state input:checked, you could declare own style in mixin table-expanded()
A section can be: tr, tbody, thead or tfoot, section of the table can be used repeatedly.
To change state of expandable elements add <label for="id_of_input"> in your code with for attribute that have the same value as id in <input/> tag.
Loremsit amet
Adipisicing elit
Voluptatum
Deserunt nesciunt
Porro magni
Beatae
Ipsum dolor
Actions
This row
10000,00
have
a trigger
to expand
tbody
section
Expand will effect
⯅
⯆
Cell value expand
10000,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
This row
10000,00
have
a trigger
to expand
tbody
section
Expand will no effect
expand
Cell value expand
10000,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
Loremsit amet
Adipisicing elit
Voluptatum
Deserunt nesciunt
Porro magni
Beatae
Ipsum dolor
Actions
This row
10000,00
have
a trigger
to expand
tbody
section
Expand will effect
⯅
⯆
Cell value expand
10000,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
This row
10000,00
have
a trigger
to expand
tbody
section
Expand will no effect
expand
Cell value expand
10000,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
Loremsit amet
Adipisicing elit
Voluptatum
Deserunt nesciunt
Porro magni
Beatae
Ipsum dolor
Actions
This row
10000,00
have
a trigger
to expand
tbody
section
Expand will effect
⯅
⯆
Cell value expand
500,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
Cell value expand
10000,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
This row
10000,00
have
a trigger
to expand
tbody
section
Expand will no effect
expand
Cell value
500,00
Cell value
Cell value
Cell value
Cell value
Cell value
delete
Cell value expand
10000,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
Loremsit amet
Adipisicing elit
Voluptatum
Deserunt nesciunt
Porro magni
Beatae
Ipsum dolor
Actions
This row
10000,00
have
a trigger
to expand
tbody
section
Expand will effect
⯅
⯆
Cell value expand
500,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
Cell value expand
10000,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
This row
10000,00
have
a trigger
to expand
tbody
section
Expand will no effect
expand
Cell value
500,00
Cell value
Cell value
Cell value
Cell value
Cell value
delete
Cell value expand
10000,00
Cell value expand
Cell value expand
Cell value expand
Cell value expand
Cell value expand
delete
sticky header / footer / header in body#
Loremsit amet
Adipisicing elit
Voluptatum
Deserunt nesciunt
Porro magni
Beatae
Ipsum dolor
Actions
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Labore sequi quasi
Sed voluptatum
Amet consectetur
Quia aperiam
Delectus nulla
Sit amet
120 000,00
delete
Saepe recusandae
Labore sequi quasi
Sit amet
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Sit amet
Labore sequi quasi
Sed voluptatum
Amet consectetur
Delectus nulla
Quia aperiam
1 900,00
delete
Voluptatum
Delectus
Amet consectetur
Sit amet
Sed voluptatum
Total
1 600 500,00
ellipsis table / cell#
Setup #
classes less/formir/setup/classes.less #
// table tag:
@table: table;
@inline-table: inline-table;
@tbody: tbody;
@thead: thead;
@tfoot: tfoot;
@th: th;
@tr: tr;
@td: td;
@col: col;
@colgroup: colgroup;
@table-scroll: table-scroll; // table wrapper for scroll
@table-mobile: table-mobile; // turn on mobile support
@table-fixed: table-fixed; // turn table in to fixed layout (column will lock width)
@table-ellipsis: table-ellipsis; // apply ellipsis on cell
@table-header-sticky: header-sticky; // add sticky header on table
@table-body-sticky: body-sticky; // add sticky th in tbody
@table-footer-sticky: footer-sticky; // add sticky footer
@table-borders-horizontal: borders-horizontal; // add border horizontal
@table-borders-vertical: borders-vertical; // add border vertical
@table-borders: borders; // add border horizontal and vertical
@table-borders-outside: borders-outside; // add border outside table
@table-hoverable-td: hoverable-td; // add hoverable in cell
@table-hoverable-tr: hoverable-tr; // add hoverable on row
@table-hoverable-col: hoverable-col; // add hoverable on column
@table-zebra-odd: zebra-odd; // add zebra in odd
@table-zebra-even: zebra-even; // add zebra in even
@table-on-hover: on-hover; // hiddev cell valuem show cell value on hover
@table-un-hover: un-hover; // cell or row will not react on hover
@table-number: number; // style for numer in cell (align etc.)
@table-bold: bold; // add bold to cell
@actions: actions; // style for action cell
@expandable: expandable; // expandable section
@expandable-toggler: expandable-toggler; // expandable toggler (input)
@expandable-trigger: expandable-trigger; // expandable trigger section
@toggle-show: toggle-show; // with this class element will show in toggler then expand
@toggle-hide: toggle-hide; // with this class element will hide in toggler then expand
core less/formir/setup/core.less #
@table-mobile-max-width: @mobile-portrait-max-width;
variables less/formir/setup/variables.less #
@table-color: @color-body; // table text color
@table-base-color: @color-alternative; // table base thema color
@table-base-color-hover: lighten(@table-base-color, 10%); // theme color on hover
@table-base-color-contrast: #fff; // table base thema color - contrast for text
@table-base-color-border: @color-mute; // table base border color
@table-font-family: @body-font-family;
@table-font-size: 1rem; // table font size
@table-td-padding: 1rem 0.5rem; // table td cell padding
@table-th-padding: 0.7rem 0.5rem; // table th cell padding
@table-th-font-size: 0.8rem; // table th font size
@table-text-align: left; // table text align in table
@table-tr-bgcolor-hover: lighten(@table-base-color-hover, 7%); // table row hover background
@table-tr-color-hover: @table-base-color-contrast; // table row hover text color
@table-td-bgcolor-hover: @table-base-color-hover; // table cell hover background
@table-td-color-hover: @table-base-color-contrast; // table cell hover text col
@table-col-bgcolor-hover: fade(@table-base-color-hover, 15%); // table column hover background
@table-border: 1px solid lighten(@table-base-color-border, 60%); // table border
@table-background: @table-base-color-contrast; // table background
@table-zebra-bgcolor: lighten(@table-base-color-border, 60%); // background color for zebra
@table-mobile-td-border: 1px solid lighten(@table-base-color-border, 60%); // mobile border
@table-mobile-th-width: 30%; // width of th cell in mobile table mode (left side)
@table-mobile-td-width: 70%; // width of td cell in mobile mode (right side)
@table-mobile-td-padding: 0.7rem 1rem 0.7rem 1.5rem; // mobile td padding
@table-mobile-th-padding: 0.7rem 1.5rem 0.7rem 1rem; // mobile th padding
@table-td-width-vw-sizes: 10, 20, 30, 40, 50, 60, 70, 80, 90; // width related to viewport for td/th
mixins less/formir/themes/default/componens/table.less #
.td-style() {
// style for td
}
.th-style() {
// style for th
}
.th-sticky() {
}
.td-sticky() {
}
.td-disabled() {
// style for disable class on td
}
.td-hover() {
// style for hover on td
}
.table-mobile-tr() {
// style for tr in mobile view in table
}
// Expandable / collapsable sections
.table-expanded() {
// style for expandable section in table when expanded
}
.table-expanded-trigger() {
// style for expandagle trigger section in table when expanded
}
