Handsontable Demo (reference branch)

by garethrwilliams

HTML

<script src="http://handsontable.com/lib/bootstrap-typeahead.js"></script>
<script src="http://handsontable.com/lib/jquery.autoresize.js"></script>
<script src="http://handsontable.com/lib/jQuery-contextMenu/jquery.contextMenu.js"></script>
<script src="http://handsontable.com/lib/jQuery-contextMenu/jquery.ui.position.js"></script>
<link rel="stylesheet" href="http://handsontable.com/lib/jQuery-contextMenu/jquery.contextMenu.css">
<link rel="stylesheet" href="http://handsontable.com/jquery.handsontable.css">
<link rel="stylesheet" href="http://handsontable.com/demo/css/demo.css">
<script src="https://raw.github.com/warpech/jquery-handsontable/reference/jquery.handsontable.js"></script>
<link rel="stylesheet" media="screen" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
        <script src="https://unpkg.com/sheetclip"></script>

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

JavaScript

var myData = [
    { area_name: "Area 1", ind_name: "one", ind_id: 22, el1_id: 2, el2_id:44, value:"12" },
    { area_name: "Area 2", ind_name: "two", ind_id: 32, el1_id: 32, el2_id:344, value:"56.4" },
    { area_name: "Area 3", ind_name: "three", ind_id: 422, el1_id: 42, el2_id:444, value:"" },
    { area_name: "Area 1", ind_name: "one", ind_id: 22, el1_id: 2, el2_id:44, value:"12" },
    { area_name: "Area 2", ind_name: "two", ind_id: 32, el1_id: 32, el2_id:344, value:"56.4" },
    { area_name: "Area 3", ind_name: "three", ind_id: 422, el1_id: 42, el2_id:444, value:"12" },
    { area_name: "Area 1", ind_name: "one", ind_id: 22, el1_id: 2, el2_id:44, value:"12" },
    { area_name: "Area 2", ind_name: "two", ind_id: 32, el1_id: 32, el2_id:344, value:"56.4" },
    { area_name: "Area 3", ind_name: "three", ind_id: 422, el1_id: 42, el2_id:444, value:"12" },
    { area_name: "Area 3", ind_name: "three", ind_id: 422, el1_id: 42, el2_id:444, value:"12" }
    ];

$("#exampleGrid").handsontable({
    data: myData,
    rows: 10,
    cols: 2,
    colHeaders: false,
    rowHeaders: false,
    autoWrapRow: true,
    columns: [
        {data: "area_name"},
        {data: "ind_name"},
        {data: "value"}
    ],
    contextMenu: false,
    legend:[
                {
                    match:function (row, col, data) {
                        return (row%2 == 0);
                    },
                    style: {
                        backgroundColor: "#f4f4f4"
                    }
                }            
    ]
});