Responsive tables ( custom implementation of foundation example )

tables.coffee

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

tables.scss

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; }
      }
    }
  }
}