Responsive Tables Using Footable

In this article, we will learn how to make an HTML table responsive using a jQuery based footable plug-in.

I hope everyone is familiar with the term responsive websites. These are websites which are compatible with different devices with different screen resolutions like desktop, laptop, tablet, mobile, etc.

The website will be adapted to have the best view experience in all the above devices without any horizontal scrollings. This is achieved mainly with the help of CSS, HTML5, and jQuery. Sometimes, we may have to rely on jQuery based plugins for making our site more attractive and responsive.

So, here is a plugin which helps to make an HTML table element responsive.

First, we create an HTML table as below.

<table id="mytable" cellpadding="5" border="1" cellspacing="0" width="100%">
<thead>
<tr>
<th>
Employee Code
</th>
<th>
Employee Name
</th>
<th data-hide="phone">
Employee Age
</th>
<th data-hide="phone,tablet">
Designation
</th>
<th data-hide="phone,tablet">
Experience
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
10011
</td>
<td>
Rajeev
</td>
<td>
31
</td>
<td>
Developer
</td>
<td>
6
</td>
</tr>
<tr>
<td>
10012
</td>
<td>
Sandhya
</td>
<td>
27
</td>
<td>
Tester
</td>
<td>
2
</td>
</tr>
<tr>
<td>
10013
</td>
<td>
Ramesh
</td>
<td>
25
</td>
<td>
Designer
</td>
<td>
1
</td>
</tr>
<tr>
<td>
10014
</td>
<td>
Sanjay
</td>
<td>
32
</td>
<td>
Developer
</td>
<td>
5
</td>
</tr>
<tr>
<td>
10015
</td>
<td>
Ramya
</td>
<td>
23
</td>
<td>
Developer
</td>
<td>
1
</td>
</tr>
</tbody>
</table>

Which, when viewed in desktop browser, will be like below.

And on the mobile, it will be like below.

We can clearly see that on the mobile device, all the data is not visible on the screen. We have to scroll horizontally to see the last columns. So now, we are going to make this fit to mobile screens as well.

For this, first, we add the CSS and jQuery reference for footable plugin in the head section of our page as below -

<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Table using Footable</title>
<link href="footable.core.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="footable.js" type="text/javascript"></script>
</head>

Note the use of meta tag with name "viewport" in the head section. It is mandatory for the site to be responsive on small devices. Now, the important concept of footable is that we can specify which all columns has to be hidden in which all resolutions.

For that, we have to specify a "data-hide" attribute in table header column with breakpoint names as below.

<thead>
<tr>
<th>
Employee Code
</th>
<th>
Employee Name
</th>
<th data-hide="phone">
Employee Age
</th>
<th data-hide="phone,tablet">
Designation
</th>
<th data-hide="phone,tablet">
Experience
</th>
</tr>
</thead>

Here, phone & tablet are breakpoints given in footable plugin JS file. We can edit the breakpoint names and values or add new breakpoints as we like.

(function ($, w, undefined) {
w.footable = {
options: {
delay: 100, // The number of millseconds to wait before triggering the react event
breakpoints: { // The different screen resolution breakpoints
phone: 480,
tablet: 720
},

In the above script from footable JS file, we can clearly see the value assigned to the breakpoint's phone and tablet. It refers to the width of the screen in pixels at which the columns with the above values in the data-hide attribute will be hidden.

Here if you want to hide a column in both breakpoints, that is in phone and tablet then we have to specify both those names in the data-hide attribute with comma separation (phone, tablet).

Now we will initialize the footable property for this table.

<script type="text/javascript">
$(document).ready(function () {
$('#mytable').footable();
});
</script>

Now, running our page, we can see our table as below.

In desktop - No Change

In tablet - Last 2 columns are hidden

In mobile - Last 3 columns are hidden

Clicking on the plus symbol, we can see the hidden column values.

That's it. Our table is now responsive. We can view it on all devices without any horizontal scrolling.

Reference

https://fooplugins.github.io/FooTable/index.html

Summary

This article covers the basic functionality of footable plugin to make the HTML table responsive. There are a lot more functionalities available in footable like sorting, paging, filtering, etc.. Please go through the footable site and explore more. Hope this will be helpful!