Table fluid adds the ability to display the table on mobile devices. The table will display as many columns that will fit on a narrow screen, and the user can switch between columns using navigation.
Table fluid is an extension of RWD (Responsive Web Design or Fluid Design) to the basic HTML table written in pure CSS3 and HTML. It is part of the Formir Framework but can work independently with other table styles.
Table fluid will only work fully with CSS and HTML. All logic is based on the required CSS and <input/> tags.
What does Table fluid give me?
It is possible to display only those columns that will fit on the screen. You can easily configure your own breakpoints and number columns to display at that breakpoint.
In a device with a narrow screen (e.g. Tablet), in a table containing 12 columns, only 4 columns will be displayed, and all others will be moved using the navigation and pagination buttons.
This plugin also has a more interesting function for the table, for example, Mobile view for table, zebra mode, row and column hovering style, table row or section content switching. Look at the examples.
Quick start
Copy formir-table-fluid.min.css file to your application direction.
Copy code below and paste into your HTML file at a <head> part.
You can also include all formir framework formir.min.css and only table fluid part formir-table-fluid-only.min.css.
Or if you use frameworks or a different (or custom) style for the table, include only formir-table-fluid-only.min.css.
Copy table fluid to your page.
Place your table in the <table> tag.
In this quick example, just set:
Set the column class that matches the
Set the count columns class that matches the table-column-{number} table.
In our example, the code has 8 columns in the table.
The fluid table will start working on configuring @media breakpoints in our default configuration in a compiled css file, if you want to change this (we recommend), you must use the LESS or SASS compiler.
By default, we display a fluid table on the device screen with the maximum width set to: 1024px, the device screen with the minimum width set to: 0px.
The displayed Breakpoins columns are set by default to:
Columns to show
max device width
min device width
6 columns
1024px
900px
5 columns
899px
700px
4 columns
699px
600px
2 columns
599px
500px
1 columns
499px
0px
You can change this setup using LESS or SASS variables.
Look at table in narrow screen size to effect
Notice: We add only borders style in this example.
This is will be your table:
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
Installation
Use the LESS or SASS compiler and configure your own table fluid.
This plugin is written in LESS (and optional SASS) preprocessor style sheets language (CSS).
It is part of the Framework Formir CSS. The formir gives you an idea of how to sort and attach style files properly before compiling them in the project at the design stage.
You can use this approach or attach the only source of the table fluid plugin formir-table-fluid.less. The formir framework formir table component is required.
Choose LESS or SASS
In this documentation, we focus on LESS preprocessor, but the same file structure and mixin / variables are used in SASS (scss) to know how to install and compile a sass file in the Sass documentation
Prepare files
Start by copying all files to the root directory:
src - your application root path
less - your less direction
formir
core
components
table.less - this is part of basic table style
helpers
display.less
mixins - less mixins
display.less
flex.less
functions.less
plugins
table-fluid.less - all style and settings for table fluid plugin
setup
classes.less - classes setup for formir framework components
core.less - core setup (basic variables with breakpoins etc.)
variables.less - variables for formir componets
formir-table-fluid.less - your root file that imports all of other files
Include Style
Include formir-table-fluid.less in your project.
In this step, you can attach formir-table-fluid.less to the main LESS file or transfer the contents of formir-table-fluid.less to the main LESS file (manifest / root).
Use the programmer's mode of a smaller library or compile less using a backend (eg Webpack).
To use the .less file on your site, look at the smaller configuration page.
Add in your <head> tag with your HTML file on developer mode:
Add an HTML file to the <head> tag in developer mode:
In production mode, you can also use LESS npm package to compile your own .min.css file. Use lessc command in bash, for example:
$ npm install -g less $ lessc -x less/formir-table-fluid.less css/formir-table-fluid.min.css
Setup LESS / SASS
Table fluid is fully configurable, each of colors, breakpoints etc. you can change in less file less/formir/plugins/table-fluid.less.
Base Table formir component is configurable with others frameworks components in dir: less/formir/setup/core.less and less/formir/setup/variables.less.
@table-fluid-mobile-max-width: 1000px; // above this browser width fuild table will off
@table-fluid-mobile-min-width: 0; // below this browser width fuild table will off, if you will use also mobile mode for fluid table set min-width to @table-mobile-max-width otherwise use 0
@table-fluid-columns: 6, 5, 4, 2, 1; // number of columns to show in breakpoint
@table-fluid-breakpoints: 900px, 700px, 600px, 500px, @table-fluid-mobile-min-width; // width for media query breakpoints
@table-fluid-max-columns: 10; // maximal columns number that will be supported, use as lowers number as you need
@table-fluid-restart-include: false; // change this to: true, if you include JS script to .checked() first input (toogle) when window resize, when not user need to click 'restrat' button to set first column to show.
@table-active-method: checked; // checked / active ( 'active' for JS framework only.)
Screen width to turn off the fluid table
Not all screen sizes in Windows show a smooth table well - to disable the plugin and use the default table, set these two variables: @table-fluid-mobile-max-width and @table-fluid-mobile-min-width
If you will also be using table fluid with the mobile table basic style component, you must set@table-fluid-mobile-min-width equal to @table-mobile-max-width, this set will turn off table fluid when mobile view is enabled.
Break points and number of columns
This configuration is the most important, you can set two variables for each step, the number of columns that will show according to the width of the screen.
In our example, between two screen widths 1000px and 900px will show 6 columns, between 900px and 700px will show 5 columns, 700px - 600px: 4, 600px - 500px: 2, 500px - 0px: 1 column.
Maximum number of columns supported
This number of columns will be supported by the plugin, you can reduce their number if needed.
Do you need a fluid table in React or another JS Framework?
You can use the JS framework, in this case you can keep the check boxes and just switch the active class in div fluid-toggle to control the fluid, we give you a free hand.
Configure other less variables
There are several additional variables for styling the fluid table:
@table-fluid-header-min-height: 3rem; // min height of navigation bar
@table-fluid-header-background: @table-base-color; // background of navigation bar - this variable @table-base-color is from framework base variables - table base theme color.
@table-fluid-header-color: @table-base-color-contrast; // contrast color for all buttons etc.
Setup your classes less variables
Like all other framework components, you can set your own class name for each HTML element to prevent duplicate pages or use it as a widget.
an element with this class will always be displayed, the fluid table will not respond to this element
table-only-mobile
each one
element will be hide when table-fuild is off
table-not-mobile
each one
element will be show when table-fuild is off
Less/Sass mixing to better style
We give you some mixing style for style dots, arrow, or nav-bar.
.table-arrow-style() {
// style your arrows
}
.table-fluid-dot-style() {
// style your dot
}
.table-arror-next() {
// style next button
}
.table-arrow-prev() {
// style prev button
}
.table-fluid-header() {
// style for table header with fluid navbar
}
.table-fluid-nav() {
// style for navbar
}
.table-fluid-dots() {
// style for dots navigation
}
Setup HTML
Your table fluid will look like on this example:
There are 4 elements of the table fluid plug in html:
Set the count columns class that matches the table-column-{number} table.
Inputs - add as many tags <input type="radio" id="input_id_in_order" name="your_table" /> as column in table is (3 columns - 3 inputs, 5 columns 5 inputs), each input must have a unique id, all of them (in one table) need to have same name attribute, the first of them (input) need to have checked="true" attribute
Labels arrow - add as many tags <label class="table-arrow" for="input_id_in_order"></label> as column in table is, each label must have the same for attribute as <input/>id attribute - base of order.
Labels dots - (same as arrow) add as many tags <label class="table-dot" for="input_id_in_order"></label> as column in table is, each label must have the same for attribute as <input/>id attribute - base of order.
Warning: one JS script is not mandatory, but it will help the table fluid to work better. After changing the screen size, the fluid table to be reset will change, and first <input type="radio" id="input_id_in_order" name="your_table" /> should be set as checked. We have some solution to this problem. If you do not do this, the JS user must click the CTA button that appears in the navigation bar to reset the fluid table.
You can use this, or write own: (it's not required)
Table - base component style
Thanks to the plug of the liquid table, we give you all stylish table elements that will work perfectly.
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-table
on any tag
change display to: table, inline-table
tbody, thead
on any tag
change display to: tbody or thead
colgroup, col
on any tag
change display to: colgroup or col
tr, th, td
on any tag
change display to: tr, th or td
table-mobile
on table
add support for mobile view - rensponsive go to example
table-fixed
on table
change table to fixed column display
table-ellipsis
on table
add ellipsis to table for all cell
td-ellipsis
on td
add ellipsis to cell, require to set width to cell (with vw unit)
borders
on table
add border vertical and horizontal to all rows
borders-outside
on table
add borders only to table outline
borders-horizontal
on table
add borders to row (horizontal)
borders-vertical
on table
add borders to column (vertical)
zebra-odd
on table
add background to odd rows
zebra-even
on table
add background to even rows
hoverable-td
on table
add background color change on hover to cell
hoverable-tr
on table
add background color change on hover to row
un-hover
on tr, td
add this class to prevent for been hover
on-hover
on td, tr
this cell will be defalut hidden and shown when hover (cell or row)
hoverable-col
on table
add background color change on hover to column, go to example
sticky-header
on table or table wrapper overflow-scroll
add sticky header (thead) to table
sticky-footer
on table or table wrapper overflow-scroll
add sticky footer (tfoot) to table
sticky-body
on table or table wrapper overflow-scroll
add sticky column (th in tbody) to table go to example
expandable
on tbody, thead, tfoot or tr
add expandable feature, this element will be hidden by default, and show when toggled go to example
expandable-toggler
on tbody, thead, tfoot or tr
element with this class will change after expandable section will expand go to example
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:
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.
.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
}
