// row data is a simple 2-dimensional array
    var rows = [["Kimberly", "Hodges", "Centennial", "887-527-3183"], ... ];

    // instantiate and render a new table
    $(document).ready(function () {
        new ATable({
            dataFunction : function (atable) {
                atable.receivedData(rows);
            },
            columns : [
                {name : "first", label : "First Name"},
                {name : "last", label : "Last Name"},
                {name : "city", label : "City"},
                {name : "phone", label : "Phone #"}
            ],
            el : "#staticDataCallback",
            // height in pixels is required
            height : 400
        }).render();
    }

    filterTable = new ATable({
        dataFunction : function (atable) {
            atable.receivedData(rows);
        },
        columns : [
            // Disable sorting on this column
            {name : "first", label : "First Name", sortable : false},

            // Set an explicit width of 200px and disable resizing this column
            {name : "last", label : "Last Name", width : 200, resizable : false},

            // Leave out the label property, and the column's name is displayed. Values in this column are also editable.
            {name : "City", editable : true},

            // Don't render this column in the table
            {name : "phone", label : "Phone #", visible : false}
        ],
        el : "#columnProps",
        height : 400
    }).render();

    <!-- This text input will filter the table by the first name column -->
    <input id="filterFirst" type="text" class="input-medium search-query" onkeyup="filterTable.filter('first', this.value);">

    new ATable({
        dataFunction : function (atable) {
            var date = new Date();
            date.setFullYear(2008, 11, 24);
            var date2 = new Date();
            date2.setFullYear(2009, 4, 15);
            atable.receivedData([
                ["Jessica Student", 3.674, date],
                ["Bill Average", 2.53, date],
                ["Pete Perfect", 4.0, date2]
            ]);
        },
        cellClasses : "italic",  // Apply the italic class to all cells in the table
        formatter : function (val, row, col, colName) {
            if (colName === "name") {
                var parts = val.split(" ", 2);
                return parts[1] + ", " + parts[0];
            }
            else if (colName === "gpa") {
                return (Math.round(val * 10) / 10).toFixed(1);
            }
            else if (colName === "graddate") {
                return val.toDateString();
            }
            return val;
        },
        columns : [
            {name : "name", label : "Name", width : 100},
            {name : "gpa", label : "GPA", width : 50},
            // Apply the bold and yellow classes to cells in this column (overriding the italic class)
            {name : "graddate", label : "Grad Date", width : 150, cellClasses : "bold yellow"}
        ],
        el : "#formatAndStyle",
        // height in pixels is required
        height : 400
    }).render();

    new ATable({
        // fetchStockData references the script/function below
        dataFunction: "fetchStockData",
        columns: [
            {name: "symbol", label: "Symbol"},
            {name: "company", label: "Company Name"},
            {name: "close", label: "Prev. Close"},
            {name: "bid", label: "Bid"},
            {name: "ask", label: "Ask"}
        ],
        el: "#dynamicDataWorker",
        height: 400
    }).render();

    <script type="text/javascript" id="fetchStockData">
        // dummy stock data
        var stocks = {MSFT : ["Microsoft Corporation", 27.85], ... ];
    
        // id of the script tag and the name of the data function must be the same
        function fetchStockData() {
            getDataSet();
            var interval = setInterval(function () {
                getDataSet();
            }, 3000);
        }

        function getDataSet() {
            var data = [];
            var signs = [1, -1];
            for (var sym in stocks) {
                var sign = signs[Math.floor(Math.random() * 2)];
                var close = Math.round(stocks[sym][1] * 100) / 100;
                var bid = close + Math.random() * (close * .05) * sign;
                bid = Math.round(bid * 100) / 100;
                var ask = Math.round((bid + close * .002) * 100) / 100;
                data.push([sym, stocks[sym][0], close, bid, ask]);
            }
            // Call self.postMessage to return data to the main thread
            self.postMessage({data : data});
        }
    </script>

    new ATable({
        dataFunction : function (atable) {
            var data = [];
            for (var i = 1; i < 400000; i += 4) {
                data.push([i, i + 1, i + 2, i + 3]);
            }
            atable.receivedData(data);
        },
        columns : [
            {name : "Column 1"},
            {name : "Column 2"},
            {name : "Column 3"},
            {name : "Column 4"}
        ],
        el : "#bigTable",
        height : 400
    }).render();

    new ATable({
        dataFunction : function (atable) {
            var count = 1;
            var getDataSet = function () {
                var data = [];
                for (var i = count; i < count + 4; i += 2) {
                    data.push([i, i + 1]);
                }
                count += 4;

                // Append rows instead of replacing them
                atable.receivedData(data, true);
            }
            getDataSet();
            var interval = setInterval(function () {
                getDataSet();
                if (count > 1000) clearInterval(interval);
            }, 2000);
        },
        columns : [
            {name : "Column 1"},
            {name : "Column 2"}
        ],
        el : "#appendRows",
        height : 400
    }).render();