Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Improved responsive tables for Bootstrap 2
# ==============================================
# = 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()
@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;
}
}
// ==============================================
// = 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();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment