Post
Ask Question

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.
  1. <table id="mytable" cellpadding="5" border="1" cellspacing="0" width="100%">  
  2.      <thead>  
  3.          <tr>  
  4.              <th>  
  5.                  Employee Code  
  6.              </th>  
  7.              <th>  
  8.                  Employee Name  
  9.              </th>  
  10.              <th data-hide="phone">  
  11.                  Employee Age  
  12.              </th>  
  13.              <th data-hide="phone,tablet">  
  14.                  Designation  
  15.              </th>  
  16.              <th data-hide="phone,tablet">  
  17.                  Experience  
  18.              </th>  
  19.          </tr>  
  20.      </thead>  
  21.      <tbody>  
  22.          <tr>  
  23.              <td>  
  24.                  10011  
  25.              </td>  
  26.              <td>  
  27.                  Rajeev  
  28.              </td>  
  29.              <td>  
  30.                  31  
  31.              </td>  
  32.              <td>  
  33.                  Developer  
  34.              </td>  
  35.              <td>  
  36.                  6  
  37.              </td>  
  38.          </tr>  
  39.          <tr>  
  40.              <td>  
  41.                  10012  
  42.              </td>  
  43.              <td>  
  44.                  Sandhya  
  45.              </td>  
  46.              <td>  
  47.                  27  
  48.              </td>  
  49.              <td>  
  50.                  Tester  
  51.              </td>  
  52.              <td>  
  53.                  2  
  54.              </td>  
  55.          </tr>  
  56.          <tr>  
  57.              <td>  
  58.                  10013  
  59.              </td>  
  60.              <td>  
  61.                  Ramesh  
  62.              </td>  
  63.              <td>  
  64.                  25  
  65.              </td>  
  66.              <td>  
  67.                  Designer  
  68.              </td>  
  69.              <td>  
  70.                  1  
  71.              </td>  
  72.          </tr>  
  73.          <tr>  
  74.              <td>  
  75.                  10014  
  76.              </td>  
  77.              <td>  
  78.                  Sanjay  
  79.              </td>  
  80.              <td>  
  81.                  32  
  82.              </td>  
  83.              <td>  
  84.                  Developer  
  85.              </td>  
  86.              <td>  
  87.                  5  
  88.              </td>  
  89.          </tr>  
  90.          <tr>  
  91.              <td>  
  92.                  10015  
  93.              </td>  
  94.              <td>  
  95.                  Ramya  
  96.              </td>  
  97.              <td>  
  98.                  23  
  99.              </td>  
  100.              <td>  
  101.                  Developer  
  102.              </td>  
  103.              <td>  
  104.                  1  
  105.              </td>  
  106.          </tr>  
  107.      </tbody>  
  108.  </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 -
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head id="Head1" runat="server">  
  4.     <meta charset="utf-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.     <title>Responsive Table using Footable</title>  
  8.     <link href="footable.core.css" rel="stylesheet" type="text/css" />  
  9.     <script src="jquery-1.10.2.min.js" type="text/javascript"></script>  
  10.     <script src="footable.js" type="text/javascript"></script>  
  11. </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.
  1. <thead>  
  2.     <tr>  
  3.         <th>  
  4.             Employee Code  
  5.         </th>  
  6.         <th>  
  7.             Employee Name  
  8.         </th>  
  9.         <th data-hide="phone">  
  10.             Employee Age  
  11.         </th>  
  12.         <th data-hide="phone,tablet">  
  13.             Designation  
  14.         </th>  
  15.         <th data-hide="phone,tablet">  
  16.             Experience  
  17.         </th>  
  18.     </tr>  
  19. </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.
  1. (function ($, w, undefined) {  
  2.     w.footable = {  
  3.         options: {  
  4.             delay: 100, // The number of millseconds to wait before triggering the react event  
  5.             breakpoints: { // The different screen resolution breakpoints  
  6.                 phone: 480,  
  7.                 tablet: 720  
  8.             },  
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.
  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.             $('#mytable').footable();  
  4.         });  
  5. </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!


Similar Articles