Simple jQuery Fixed Column Table Solution

I had problems using jQuery plugins to handle building a fixed column table on a AJAX-y page so I made my own very simple function. Feel free to take and use it as you want, but don’t forget the styling!

##The Problem This past week at work our developers built a cool timeline view of medications someone was taking. Each month in the year is a column and each medication is a row, which can lead to long and tall tables. To combat this I wanted the user to be able to scroll left, right, up, and down on the table while still being able to see the medication column (the first column). Because our application is used on both desktop and on iPads, I knew the solution had to always viewed, not just at a certain viewport.

I found several jQuery plugins that did exactly this, but they all had math to redraw the table and do other things that weren’t necessary. These plugins also were not working correctly, because the table for this page comes after the document and window has already loaded. To combat this, I set out to write my own simple and concise function that did exactly what I needed and nothing more.

##The Solution

// Pinned table JS - jQuery/JS
function pinTable() {
  var original = $("table.responsive").wrap("<div class='table-wrapper'/>");
  var copy = original.clone();
  copy.find('td:not(:first-child),th:not(:first-child)').remove();
  copy.removeClass('responsive');
  original.closest(".table-wrapper").append(copy);
  copy.wrap("<div class='pinned'/>");
  original.wrap("<div class='scrollable'/>");
  copy.find('tr').each(function(i) {
    $(this).height(original.find('tr:eq('+i+')').height());
  });
}

// Pinned table styles - SCSS
table.responsive {
  margin-bottom: 0;
    td, th {
      position: relative;
      white-space: nowrap;
      overflow: hidden;
    } 
}
table.responsive th:first-child, table.responsive td:first-child, table.responsive.pinned td {
  display: none;
}
.pinned {
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    width: 20%;
    overflow: hidden;
    overflow-x: scroll;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    table {
      border-right: none;
      border-left: none;
      width: 100%;
    }
    table th, table td {
      white-space: nowrap;
    }
    td:last-child {
      border-bottom: 0;
    }
}
div.table-wrapper {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    border-right: 1px solid #ccc;
    div.scrollable {
      margin-left: 20%;
      overflow: scroll;
      overflow-y: hidden;
    }
}

##The Nitty Gritty

Let’s break down the Javascript function line-by-line for those reading that may want to learn something and/or understand how it works.

var original = $("table.responsive").wrap("<div class='table-wrapper'/>");

I chose to add a class of responsive to the table that would be used in the pinTable() function. This makes the function reusable and doesn’t require any other setup like passing in the selector string as a parameter (though you can do it if you want). I also wrap this table.responsive in a div.table-wrapper which has special styles applied to it. I also store this in an original variable.

var copy = original.clone();

.clone() is a special jQuery manipulation that creates a deep copy of the elements matched. Deep copying means that it will copy and create the matched elements and all descendants of that element(s). I store this cloned table in a copy variable.

copy.find('td:not(:first-child),th:not(:first-child)').remove();

I then find all descendants of the copied table that are a td and th cell, but are not the first child and remove them. This leaves me with the first column of the table.

copy.removeClass('responsive');

I remove the responsive class from the cloned table.

original.closest(".table-wrapper").append(copy);

Then I find the closest element with .table-wrapper and append the cloned table to it.

copy.wrap("<div class='pinned'/>");

I wrap the cloned table in a div with a special class for the pinned column.

original.wrap("<div class='scrollable'/>");

Then wrap the original full table in a div with a special class with scrollable CSS.

copy.find('tr').each(function(i) {
  $(this).height(original.find('tr:eq('+i+')').height());
});

Lastly, I find each tr and set the height of that tr to the height of the original table’s tr that has the same index (using the eq method).

##Wrap-up

I broke down the function line-by-line to help you understand what exactly is happening and how easy it is to build something like this. Contact me if I have errors or if you don’t understand something!