M

ALX DESIGN

HOME / UX JAVASCRIPT /

fleXtable

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.

You can download it on Github

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.

You can download it on Github

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.

  • We start counting from 0
  • Can be empty

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:

  • orange for the cells with colspan
  • blue for the cells with rowspan
  • magenta for the cells with both colspan and rowspan

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:

Planet's classification
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 ] :

table-test1
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 hidden

I 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

BACK TO HOME

Leave a comment ?