Improved responsive tables for Bootstrap 2

table-responsive.coffee

# ==============================================
# = Improved responsive tables for Bootstrap 2 =
# ==============================================
# 
# Add .table-responsive to enable this feature for tables.
# Change $.fn.tableResponsive.defaults.media_query to support other devices.

class TableResponsive
  provide_uniq_id = (table) ->
    table.id ?= "table-responsive-#{ just.genuniq() }"
  
  constructor: (@table, options = {}) ->
    @uniq_id = '#' + provide_uniq_id @table.get(0)
    @options = $.extend {}, $.fn.tableResponsive.defaults, options
    
    if @options.mobileHeaders
      @headers = @table.find('th').map -> $(@).text()
      $('head').append @_build_style() 
    
    @table.toggleClass 'responsive-headers', @options.mobileHeaders
    @table.toggleClass 'responsive-processed', on
    
  _build_style: ->
    c = @headers.length
    """
    <style type="text/css">
      @media #{@options.media_query} {
        #{(@_column_rule eq for eq in [0...c] ).join "\n"}
      }
    </style>
    """
  
  _column_rule: (eq) ->
    """
    #{@uniq_id} td:nth-of-type(#{eq + 1}):before { content: "#{@headers[eq]}"; }
    """

$.fn.tableResponsive = ->
  @toggleClass 'table-hover', off
  @not('.responsive-processed').each -> 
    new TableResponsive $(@), $(@).data()

$.fn.tableResponsive.defaults = 
  # media_query: "(max-width: 979px)"
  media_query: "only screen and (max-width: 767px)"
  mobileHeaders: true

$ ->
  $('.table-responsive').tableResponsive() if Adaptive.isTouchDevice()  

table-responsive.css

@media only screen and (max-width: 767px) {
  /* Hide table headers (but not display: none;, for accessibility) */
  table.table-responsive, 
  table.table-responsive thead, 
  table.table-responsive tbody, 
  table.table-responsive th, 
  table.table-responsive td, 
  table.table-responsive tr {
    display: block;
  }
  table.table-responsive thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  table.table-responsive tr {
    border-top: 1px solid #ddd;
  }
  table.table-responsive td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 5px;
    padding-left: 40%;
  }
  table.table-responsive td > ul {
    margin-bottom: 0;
  }
  table.table-responsive td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 40%;
    padding-right: 10px;
    white-space: nowrap;
    font-size: 10px;
    color: #777;
  }
}

table-responsive.js

// ==============================================
// = Improved responsive tables for Bootstrap 2 =
// ==============================================
//
// Add .table-responsive to enable this feature for tables.
// Change $.fn.tableResponsive.defaults.media_query to support other devices.


var TableResponsive;

TableResponsive = (function() {
  var provide_uniq_id;

  provide_uniq_id = function(table) {
    var _ref;
    return (_ref = table.id) != null ? _ref : table.id = "table-responsive-" + (just.genuniq());
  };

  function TableResponsive(table, options) {
    this.table = table;
    if (options == null) {
      options = {};
    }
    this.uniq_id = '#' + provide_uniq_id(this.table.get(0));
    this.options = $.extend({}, $.fn.tableResponsive.defaults, options);
    if (this.options.mobileHeaders) {
      this.headers = this.table.find('th').map(function() {
        return $(this).text();
      });
      $('head').append(this._build_style());
    }
    this.table.toggleClass('responsive-headers', this.options.mobileHeaders);
    this.table.toggleClass('responsive-processed', true);
  }

  TableResponsive.prototype._build_style = function() {
    var c, eq;
    c = this.headers.length;
    return "<style type=\"text/css\">\n  @media " + this.options.media_query + " {\n    " + (((function() {
      var _i, _results;
      _results = [];
      for (eq = _i = 0; 0 <= c ? _i < c : _i > c; eq = 0 <= c ? ++_i : --_i) {
        _results.push(this._column_rule(eq));
      }
      return _results;
    }).call(this)).join("\n")) + "\n  }\n</style>";
  };

  TableResponsive.prototype._column_rule = function(eq) {
    return "" + this.uniq_id + " td:nth-of-type(" + (eq + 1) + "):before { content: \"" + this.headers[eq] + "\"; }";
  };

  return TableResponsive;

})();

$.fn.tableResponsive = function() {
  this.toggleClass('table-hover', false);
  return this.not('.responsive-processed').each(function() {
    return new TableResponsive($(this), $(this).data());
  });
};

$.fn.tableResponsive.defaults = {
  media_query: "only screen and (max-width: 767px)",
  mobileHeaders: true
};

$(function() {
  if (Adaptive.isTouchDevice()) {
    return $('.table-responsive').tableResponsive();
  }
});