Get Started

animate.table is a jquery plugin(would be react component and npm package in future) which can initialize a html table by json data with animations. animate.table is also a dynamic table. you can also insert\remove\update table or rows with animation.

How easy is it to use me? Follow these steps

1. include your js at the head

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/underscore-min.js"></script>
    <script type="text/javascript" src="js/animate.table.js"></script>

2. Prepare your data and the div to draw it !

    <div id="mytable"></div>

3.Initialize table with data

    $("#yourtable").animatedTable().data(rowsData);

The data is an Array of objects like this:

    var rowsData =  [{
        "singer": "Justin Bieber",
        "name": "Sorry",
        "image": "q38875uo1kh.jpg",
        "history": "2"
    }, {
        "singer": "Adele",
        "name": "Hello",
        "image": "q42396myajr.jpg",
        "history": "1"
    }
    ...
    ];

As we can see, the table iterate each value of the object as the cell. So we can also use Arrays, like this

    var rowsData =  [[
        "Justin Bieber",
        "Sorry",
        "q38875uo1kh.jpg",
        "2"
        ],[
        "Adele",
        "Hello",
        "q42396myajr.jpg",
        "1"
        ]
    ];

The table could be generated as well. But objects are not only the nature of data, but also could be templated.We can use template wich underscore.js provide:

    <link rel="stylesheet" type="text/css" href="style/theme/monster.css">


    $("#yourtable").animatedTable({
        rowTemplates: [
            "<div class='last-week'>Last Week {{history}}</div>",
            "<div class='song'>{{singer}}</div>",
            "<div class='singer'>{{name}}</div>"
        ],
        styles: "monster"
    }).data(rowsData);

Note that we add styles: "monster" config to make it beautiful

We can also set table entrance animation or paging animation by the setting. pageEntranceAnimation and pageExistAnimation

    $("#yourtable-02").animatedTable({
        headerWidth:[100, 200, 400, 300],
        headers: ["Rank", " Last Week  ", "Singer", "Song"],
        rowTemplates: [
            " <div class='last-week'>{{_index}}</div>",
            " <div class='last-week'>{{history}}</div>",
            " <div class='song'>{{singer}}</div>",
            "<div class='singer'>{{name}}</div>"
        ],
        pageEntranceAnimation: "pt-page-moveFromTop",
        pageExistAnimation: "pt-page-moveToBottom",
        page: {
            per: 4
        },
        styles: "monster"
    }).data(rowsData);

Notice that we add a pager and header for the table. To change the animation, try animation-selector