I was looking for the best way to display big tables with lot of columns on mobile devices and I decided to develop my own solution, based on selective displaying data option, combined with horizontal scroll container.
The problem was as follows: I had to display properly a table of 14 columns without ruining the responsive template on mobile device.
The quick solution
I wraped my table into a container with a overflow-x: auto.
Problem solved, good night.
BUT ! it appeared that some columns with secondary interest were dispensable and could be hidden by default on mobile devices.
So I developed a tiny library to hide them and generate a drop-down menu allowing the user to choose which column to display.
Installation
Warning
Although functional, this project is beta and still in development.
Unzip and integrate this script into your project tree, then call the library:
<script type="text/javascript" src="vendor/fleXt/js/fleXtable_0.8-min.js"></script>Load a theme (or create your own):
<script type="text/javascript" src="vendor/fleXt/themes/default.css"></script>How to use
Just call the fleXtable library with those arguments:
fleXtable({id}, {columns}, {breakpoint}[, {debug mode}]);Parameters
| Argument | Type | Description | Exemple |
|---|---|---|---|
| id | string |
The table id to use with fleXtable |
planets-classification |
| columns | array |
List of column numbers to mask by default.
|
columns = [2,4] |
| breakpoint | int |
Width of the navigation window from which and below which the table will be handled by fleXtable. |
1024 |
| debug mode | bool |
If set to true, fleXtable will had color backgrounds to the table cells:
Specific events are logged in the console such as exceptions caused by a cell with colspan attribute, overlapping a visible and a maskable column. |
true |
The fleXtable must be called after the table(s) concerned, in the DOM.
Up to the 0.8 version included, any colspan automaticaly disable the hidding of all impacted columns.
Example
For a given table:
| Name | Class | Age | Diameter | Planets & dwarf planets | Known moons | Orbit distance | Orbit period | Surface temperature |
|---|---|---|---|---|---|---|---|---|
| Sun | Star | ~4.6 billion years | 1 392 684 km | 13 | N/A | 5500° C | ||
| Mercury | Planet | unknown | 4 879 km | N/A | 0 | 57.9 million km | 88.0 days | 427°C |
| Venus | Planet | unknown | 12 104 km | 0 | 108.2 million km | 224.7 days | 462°C | |
| Earth | Planet | 4.543 billion years | 12 756 km | 1 | 149.6 million km | 365.2 days | -88°C to 58°C | |
| Mars | Planet | 4.603 billion years | 6 805 km | 2 | 227.9 million km | 1.9 years | -63°C | |
| Ceres | Dwarf planet | unknown | 950 km | 0 | 413.7 million km | 4.6 years | -105°C | |
| Jupiter | Planet | 4.503 billion years | 142 984 km | 67 | 778.3 million km | 11.9 years | -108°C | |
| Saturn | Planet | 4.503 billion years | 120 536 km | 62 | 1.4 billion km | 29.5 years | -139°C | |
| Uranus | Planet | 4.503 billion years | 51 108 km | 62 | 2.9 billion km | 84 years | -197°C | |
| Netpune | Planet | 4.503 billion years | 49 528 km | 14 | 4.5 billion km | 164.8 years | -201°C | |
| Pluto | Dwarf planet | unknown | 2 306 km | 5 | 5.8 billion km | 246.0 years | -229°C | |
| Haumer | Dwarf planet | unknown | between 1 518 and 1960 km2 306 km | 2 | 6.4 billion km | 283.3 years | -241°C | |
| Makemake | Dwarf planet | unknown | 1434 km | 0 | 6.9 billion km | 309.9 years | -239°C | |
| Eris | Dwarf planet | unknown | 2326 km | 1 | 10.1 billion km | 560.9 years | -231°C | |
Let's say we want to hide the "Age" and "Planets & dwarf planets" columns:
fleXtable("planets-classification", [2,4], "799", true);Reminder
We start counting columns from 0.
Live demo
See the Pen FlexTable demo by Alexis Riche (@alexisr) on CodePen.
How it works
The table is wrapped in a scrolling container, thus ensuring its display without damage in a reduced window.
The script performs a first scan of a designated array, looking for exceptions that would prevent some columns from being hidden.
The number of cells in the very first row, considered as the header, defines the number of expected cells in all the following rows, and the script stores this reference to keep the thread when it detects rowspan and/or colspan usage.
During a second pass, the cells of the eligible columns receive a class, and a selection button is created above the table.
Debug examples
For all the following examples, we're trying to mask the columns [ 1, 2, 4 ] :
| a0 | a1 | a2 | a3 | a4 |
|---|---|---|---|---|
| b0 | b1 | b2 | b3 | |
| c0 | c1 | c2 | ||
| d0 | d1 | d2 | d3 | |
| e0 | e1 | e2 | e3 | |
In this example, column 1 and column 2 aren't eligible to be hidden for many reasons, let's see which ones in detail:
- The first row counts 5 cells, which will be used as the cells number reference for each following row;
- The 'b1' cell has a colspan, so the whole column (1) is considered ineligible;
- Then, the column (2) is impacted by the 'b1' cell colspan, and is therefore considered ineligible;
- The 'c2' cell has a rowspan, but this isn't a problem, column (4) is still considered eligible;
- The 'e0' cell has a colspan, the column (1) is impacted, and is (again) considered ineligible;
This is what the console will return:
fleXtable alert: In table #table-test1, column 1 cannot be hidden because of colspan property applied on a cell of column 1 which is not supposed to be hidden
fleXtable alert: In table #table-test1, column 2 cannot be hidden because of colspan property applied on a cell of column 1 which is not supposed to be hidden
fleXtable alert: In table #table-test1, column 1 cannot be hidden because of colspan property applied on a cell of column 0 which is not supposed to be hiddenI hope this tiny library will be useful.
Bonus
Oh, and by the way, if you like it, you can download the wallpaper I've created for this post's cover illustration:
A wallpaper I've created with Adobe Illustrator