Skip to content

Instantly share code, notes, and snippets.

@brentkirby
Created May 29, 2013 23:21
Show Gist options
  • Save brentkirby/5674626 to your computer and use it in GitHub Desktop.
Save brentkirby/5674626 to your computer and use it in GitHub Desktop.
Responsive tables ( custom implementation of foundation example )
class RTable
orig: null
wrap: null
pinned: null
constructor:(table)->
@orig = $(table)
@orig.addClass('modified')
.wrap("<div class='table-wrapper'></div>")
@wrap = @orig.parent('div.table-wrapper')
@split()
@orig.data('rtable', @)
@
split: =>
copy = @orig.clone()
copy.removeClass('responsive').removeAttr('id')
@orig.closest(".table-wrapper").append(copy)
@orig.wrap('<div class="scrollable"></div>')
copy.appendTo(@wrap)
.wrap("<div class='pinned' />")
@pinned = $('div.pinned table', @wrap)
reset:=>
$('> table', @pinned).html( @orig.html() )
$.fn.responsiveTable = ()->
this.each (i, el)->
node = $(el)
if node.data('rtable') isnt undefined
klass = node.data('rtable')
klass.reset()
else new RTable(node)
this
div.table-wrapper{
div.pinned{ display:none; }
}
@media only screen and (max-width: 767px) {
table.responsive { margin-bottom: 0;
td, th { position: relative; white-space: nowrap; overflow: hidden; }
th:first-child, td:first-child, td:first-child{ display: none; }
}
div.table-wrapper{ position: relative; margin-bottom:1em; overflow:hidden; border-right: 1px solid #ccc;
table{ zoom:.9; }
div.pinned { display:block; position: absolute; left: 0; top: 0; bottom:0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
div.pinned table { border-right: none; border-left: none; width: 100%;
td:not(:first-child), th:not(:first-child){ display:none; }
}
div.pinned table th, div.pinned table td { white-space: nowrap; }
div.pinned td:last-child { border-bottom: 0; }
div.scrollable { margin-left: 35%; overflow: scroll; overflow-y: hidden;
table{
th:first-child, td:first-child, td:first-child{ display: none; }
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment