Documentation

Table fluid v1.0

What is Table fluid?

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:

  1. Set the column class that matches the Set the count columns class that matches the table-column-{number} table.
  2. In our example, the code has 8 columns in the table.

    There are 3 simple things you need to know to check, go to the HTML configuration now.

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:

        
<head>
  <link rel="stylesheet/less" type="text/css" href="less/formir-table-fluid.less" />
  <script src="js/less.min.js"></script>
</head>
        
      

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.

See all configurations of LESS file.

Setup core less variables

  
@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.

  
@table-fluid-always-display: table-always-display;
@table-fluid-nav: table-nav;
@table-fluid-dot: table-dot;
@table-fluid-dots: table-dots;
@table-fluid-header: table-header;
@table-fluid: table-fluid;
@table-fluid-this: fluid-this;
@table-fluid-none: table-none;
@table-fluid-only-mobile: table-only-mobile;
@table-fluid-not-mobile: table-not-mobile;
@table-fluid-arrow: table-arrow;
@table-fluid-toggle: fluid-toggle;

  

Classes as functions

Class method on what what do
fluid-none cell and head-cell td, th, .td, .th 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:

  1. Set the count columns class that matches the table-column-{number} table.
  2. 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
  3. 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.
  4. 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

Case of use

base / borders / hoverable row / zebra#

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
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Voluptatum Delectus Amet consectetur Sit amet Sed voluptatum Total 1 600 500,00
        
          
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
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Voluptatum Delectus Amet consectetur Sit amet Sed voluptatum Total 1 600 500,00

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
Cell value 500,00 Cell value Cell value Cell value Cell value Cell value
Cell value 20000,00 Cell value Cell value Cell value Cell value Cell value
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value
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
Cell value 500,00 Cell value Cell value Cell value Cell value Cell value
Cell value 20000,00 Cell value Cell value Cell value Cell value Cell value
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value
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
Cell value 500,00 Cell value Cell value Cell value Cell value Cell value
Cell value 20000,00 Cell value Cell value Cell value Cell value Cell value
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value
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
Cell value 500,00 Cell value Cell value Cell value Cell value Cell value
Cell value 20000,00 Cell value Cell value Cell value Cell value Cell value
Cell value 10000,00 Cell value Cell value Cell value Cell value Cell value
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
on trigger row

This row
10000,00
have
a trigger
to expand
tbody
section
Expand will no effect
on trigger row

Foot
1000000,00
Foot
Foot
Foot
Foot
Foot
Foot
        
          
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
on trigger row

This row
10000,00
have
a trigger
to expand
tbody
section
Expand will no effect
on trigger row

Foot
1000000,00
Foot
Foot
Foot
Foot
Foot
Foot
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
on trigger row

This row
10000,00
have
a trigger
to expand
tbody
section
Expand will no effect
on trigger row

Foot
1000000,00
Foot
Foot
Foot
Foot
Foot
Foot
        
          
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
on trigger row

This row
10000,00
have
a trigger
to expand
tbody
section
Expand will no effect
on trigger row

Foot
1000000,00
Foot
Foot
Foot
Foot
Foot
Foot

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
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Voluptatum Delectus Amet consectetur Sit amet Sed voluptatum Total 1 600 500,00
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
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Voluptatum Delectus Amet consectetur Sit amet Sed voluptatum Total 1 600 500,00
        
          
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
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Labore sequi quasi Sed voluptatum Amet consectetur Quia aperiam Delectus nulla Sit amet 120 000,00
Saepe recusandae Labore sequi quasi Sit amet Amet consectetur Delectus nulla Quia aperiam 1 900,00
Sit amet Labore sequi quasi Sed voluptatum Amet consectetur Delectus nulla Quia aperiam 1 900,00
Voluptatum Delectus Amet consectetur Sit amet Sed voluptatum Total 1 600 500,00

ellipsis table / cell#

Loremsit amet amet Adipisicing elit amet Voluptatum amet Deserunt nesciunt amet consectetur Porro magni amet Beatae Ipsum dolor Actions
Labore sequi quasi amet consectetur Sed voluptatum amet Amet consectetur amet consectetur Quia aperiam amet Delectus nulla amet Sit amet 120 000,00
Saepe recusandae amet Labore sequi quasi amet Sit amet Amet consectetur amet consectetur Delectus nulla amet Quia aperiam amet 1 900,00
Sit amet Labore sequi quasi amet consectetur Sed voluptatum amet Amet consectetur amet Delectus nulla amet Quia aperiam amet 1 900,00
Voluptatum amet Delectus amet Amet consectetur amet consectetur Sit amet Sed voluptatum amet consectetur Total 1 600 500,00
        
          
Loremsit amet amet Adipisicing elit amet Voluptatum amet Deserunt nesciunt amet consectetur Porro magni amet Beatae Ipsum dolor Actions
Labore sequi quasi amet consectetur Sed voluptatum amet Amet consectetur amet consectetur Quia aperiam amet Delectus nulla amet Sit amet 120 000,00
Saepe recusandae amet Labore sequi quasi amet Sit amet Amet consectetur amet consectetur Delectus nulla amet Quia aperiam amet 1 900,00
Sit amet Labore sequi quasi amet consectetur Sed voluptatum amet Amet consectetur amet Delectus nulla amet Quia aperiam amet 1 900,00
Voluptatum amet Delectus amet Amet consectetur amet consectetur Sit amet Sed voluptatum amet consectetur Total 1 600 500,00

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
}