Um melhor plugin de tabelas de rolagem

Hoje eu precisava exibir uma tabela que pudesse ter entre 0 e algumas centenas de colunas … e fazer isso de uma forma que mantivesse a “chave primária” visível.

Peguei o experimento de tabelas responsivas do Zurbs como base e o mudei para realizar sua mágica quando a mesa era mais larga do que sua mãe (mantendo-a responsiva), para permitir que a coluna “primária” fosse trocada e para jogar bem com a roda do mouse.

Aqui está o JS:

jQuery(document).ready(function($) {
  var switched = false;
  var updateTables = function() {
    $("table.responsive").each(function(i, element) {
      if ($(element).width() > $(this).parent().width()) {
        splitTable($(element));

        $(element).find('th').click(function() {
          index = $(this).parent().children().index(this);

          $(this).parents('table').find('tr').each(function() {
            $(this).children().eq(index).prependTo($(this));
          });

          unsplitTable($(element));
          splitTable($(element));
        });
      }
    }).bind('DOMMouseScroll mousewheel', function(e) {
      if (e.originalEvent && e.originalEvent.wheelDeltaY) {
        p = $(this).parent();
        p.scrollLeft(p.scrollLeft() + (-1 * e.originalEvent.wheelDeltaY));
      }
    });
  };

  $(window).load(updateTables);
  $(window).bind("resize", updateTables);
  $(window).bind('updateTables', updateTables);

    function splitTable(original)
    {
        original.wrap("<div class='table-wrapper' />");

        var copy = original.clone();
        copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
        copy.removeClass("responsive");

        original.closest(".table-wrapper").append(copy);
        copy.wrap("<div class='pinned' />");
        original.wrap("<div class='scrollable' />");
    }

    function unsplitTable(original) {
    original.closest(".table-wrapper").find(".pinned").remove();
    original.unwrap();
    original.unwrap();
    }
});

.
E o SCSS:

 .pinned {
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    overflow: hidden;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;

    table {
        border-right: none;
        border-left: none;
        width: 100%;
        th, td {
            white-space: nowrap;
            font-weight: bold;
        }
    }

    td:last-child {
        border-bottom: 0;
    }
}

div.table-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    border-right: 1px solid #ccc;

    div.scrollable {
        overflow: scroll;
        overflow-y: hidden;
    }
}
table.responsive {
    margin-bottom: 0;

    td, th {
        position: relative;
        overflow: hidden;
        white-space: nowrap;

        &:hover {
            overflow: visible;
        }
    }
}

O original: http://www.zurb.com/playground/playground/responsive-tables/index.html