TableFits
Responsive table into a responsive site. Or adaptive?
Easy
Support colspan
npm install table-fits
// Create own style or take ours — for test
Title 1 Title 2 ... Value 1 Value 2 ... ...
TableFits;
Now, you have the responsive table
How it works?
The script looks for a table and if the data in the table do not fit, the script will show them in cute look
The script will keep watch, if the structure of the table has changed or added a new line. And modify data in new blocks.
And callback on resize
Some options
TableFits
Option | Description |
---|---|
mainClass |
Class name prefix, default: table-fits and all children has class table-fits__... |
width |
Sets the width of the table when it will converted into blocks, default null |
resize |
Enable resize, if width of window will change, default true |
watch |
Enable watch, if the structure of the table has changed or added a new line, default true |
Inline options
data-table-fits="no"
Skip the table If you give the script all tables in a row, this option will be useful
...
data-table-fits-width="700"
Width of the table Sets the width of the table when it will converted into blocks.
...
Similar to the option
TableFits;
data-table-fits="title"
Title of block The block is tag <tr>
like <div>
, and this block may have headings (titles).
You need to add data-table-fits="title"
in the right column in the tag <td>
in the <thead>
P.S. Supports multiple headers
Title 1 Title 2 Title 3 ... ...
Now, the headers that have the option, the "headers's data" will be in the top of block like a header
data-table-fits-group="My group"
Combine headers You can combine columns using colspan
or use the option data-table-fits-group="My group"
Title 1 Title 2 Title 3 ... ...
or
My Group Title 3 ... Title 1 Title 2 Title 3 ... ...