Table Animation

Animate transition from "table" to grid layout.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://rawgithub.com/thinkpixellab/tilesjs/master/src/Tile.js"></script>
<script src="https://rawgithub.com/thinkpixellab/tilesjs/master/src/UniformTemplates.js"></script>
<script src="https://rawgithub.com/thinkpixellab/tilesjs/master/src/Grid.js"></script>
<script src="https://rawgithub.com/thinkpixellab/tilesjs/master/src/Template.js"></script>
<div class="container">
    <h1>TODO</h1>
    <h4>
        Add 
        <a class="label label-default" 
            href="https://github.com/thinkpixellab/tilesjs"
            target="_new">tiles.js</a>
        to manage layout. <a class="label label-primary" 
            href="https://www.pulse.me/app/dev"
            target="_new">Demo</a>
    </h4>
    <table style="display: none;" class="col-md-12 table table-striped">
        <thead>
            <tr>
                <th class="col-md-3 heading">Main Column</th>
                <th class="col-md-3 data">Another Column</th>
                <th class="col-md-3 data">Data Column</th>
                <th class="col-md-3 data">Last Column</th>
            </tr>
        </thead>
        <tbody>
            <tr style="position: relative">
                <td class="col-md-3 heading">Main Column</td>
                <td class="data"><div>Another Column</div></td>
                <td class="data">Data Column</td>
                <td class="data">Last Column</td>
            </tr>
            <tr>
                <td class="col-md-3 heading">Main Column</td>
                <td class="data">Another Column</td>
                <td class="data">Data Column</td>
                <td class="data">Last Column</td>
            </tr>
            <tr>
                <td class="col-md-3 heading">Main Column</td>
                <td class="data">Another Column</td>
                <td...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

th {
    font-weight: bold;
}

.grid {
    width: 95%;
    height: 600px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ddd;
    margin: 10px 0px;
    border: 10px solid #ddd;
    clear: both;
}

.grid > div {
    background-color: #fff;
    position: absolute;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */
$(function() {
    var el = document.getElementById('sample1-grid'),
        grid = new Tiles.Grid(el),
        updateGrid = function(event, ui) {

            // update the set of tiles and redraw the grid
            grid.updateTiles([1, 2, 3, 4]);
            grid.redraw(true /* animate tile movements */);
        };
    
    $('#show-table').click(function(){
        grid.template = Tiles.Template.fromJSON(TableTemplateRows);
        updateGrid();
    });

    $('#show-grid').click(function(){
        grid.template = Tiles.Template.fromJSON(GridTemplateRows);
        updateGrid();
    });

    // initial layout
    $('#show-grid').trigger('click');
});

var TableTemplateRows = [
    " A A A B B B C C C D D D "
]
var GridTemplateRows = [
    " A A A A ",
    " B B B B ",
    " C C D D "
];