Default Handsontable Demo

by navindian

HTML

<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" href="http://handsontable.com/demo/css/samples.css">
<h2>Handsontable Extension</h2>

<div id="exampleGrid" class="dataTable"></div>

CSS

body {
    background-color: white;
    margin: 20px;
}
h2 {
    margin: 20px 0;
}

JavaScript

var myData =

[
        ["Contacts", " ", " ", " "],
        ["Handling", " ", " ", " "],
        ["FTE", " ", " ", " "],
        ["Headcount", " ", " ", " "]
      ];

var contactsData = [
                        {group: "Contacts Offered  ",week1: 0,week2: 1,week3: 2,week4: 3,week5: 4,week6: 6,week7: 7,}, 
                        {group: "Contacts Handled  ",week1: 0,week2: 1,week3: 2,week4: 3,week5: 4,week6: 6,week7: 7,}, 
                        {group: "Contacts Abandoned",week1: 0,week2: 1,week3: 2,week4: 3,week5: 4,week6: 6,week7: 7,}
                       ];


$("#exampleGrid").handsontable({
    data: myData,

    columns: 
    [
        {
            type: 'handsontable',
            handsontable: 
            {
                 colHeaders: ['', 'week1', 'week2','week3','week4','week5','week6','week7'],

                data: contactsData
            }
        }, 
    ]
});