It had been over year since I last looked at DataTables, a jQuery table plugin for creating tables with advanced features. I used it for my Django app, GlucoseTracker, and it worked great. But one thing that was bothering me was it wasn't responsive. It was the only element in my app that wasn't responsive and looked horrible when viewing on a phone in portrait mode.

Over the weekend I decided to check it out again to see if there were any updates and I was pleasantly surprised to see a ' Responsive' extension available! The best part is that the implementation is as easy as adding CSS classes to the table.

The way the table data are displayed is also much more user friendly than simply giving you scrollbars. It provides a button you can tap or click that will expand/collapse the row to show more information.

Let me show you an example from my Django app.

# templates/core/dashboard.html

{% load staticfiles %}

<!-- stuff -->

{% block extracss %}

<link href="{% static 'datatables/media/css/jquery.dataTables.css' %}" rel="stylesheet">
<link href="{% static 'datatables/extensions/Responsive/css/dataTables.responsive.css' %}" rel="stylesheet">
<link href="{% static 'datatables/extensions/TableTools/css/dataTables.tableTools.css' %}" rel="stylesheet">

{% endblock %}

<!-- Glucose Data Table -->

  <div class="panel panel-default">
    <div class="panel-body">
      <table id="glucose-table" class="display responsive" width="100%">
        <thead>
          <tr>
            <th class="all"><center>Value</center></th>
            <th class="all">Category</th>
            <th class="min-tablet">Date</th>
            <th class="min-tablet">Time</th>
            <th class="min-desktop">Notes</th>
            <th class="min-desktop">Tags</th>
            <th class="all"></th>
          </tr>
        </thead>
      </table>
  </div>

<!-- End Glucose Data Table -->

{% block extrajs %}

<script src="{% static 'datatables/media/js/jquery.dataTables.js' %}"></script>
<script src="{% static 'datatables/extensions/Responsive/js/dataTables.responsive.js' %}"></script>
<script src="{% static 'datatables/extensions/TableTools/js/dataTables.tableTools.js' %}"></script>

{% endblock %}

As you can see, all you have to do is reference the DataTables CSS and JS files, then use the CSS classes as explained here in your table.

The responsive class in the main table tag enables the plugin. The classes in the table headers allow you to specify the breakpoints, i.e. specify which columns will be visible depending on the screen size.

In my setup above, regardless of screen size, the 'Value', 'Category', and the last columns will always be visible. The 'Date' and 'Time' columns are shown only if the screen size is at least that of a tablet (whether in portrait or landscape), and the 'Notes' and 'Tags' are only shown when viewing on at least a typical desktop-sized screen.

Here's what this will look like on an iPhone 6 Plus screen in portrait mode:

That's really all there is to it, very little extra work. I already have plans to use this for my other projects. :)

For those wondering what my JavaScript looks like (note that I'm using server-side processing):

    var oTable = $('#glucose-table').dataTable( {
        "sDom": 'T<"clear">lrtip',
        "tableTools": {
            "sSwfPath": "{% static 'datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf' %}",
            "aButtons": [ "csv", "pdf", "print" ]
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "{% url 'glucose_list_json' %}",
        "aaSorting": [ [2,'desc'], [3,'desc'] ],

        // Disable sorting for the Tags and Actions columns.
        "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 5, 6 ] } ]
    } );