Handsontable example

by dsgnr

HTML

<h2>Preview of built-in and custom cell types</h2>


<div id="example1" class="handsontable"></div>
Col to hide<input id="add" type="int">
Col to show<input id="show" type="int">

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
<script src="http://handsontable.com/lib/jquery.min.js"></script>
<script src="http://handsontable.com/lib/jquery-ui/js/jquery-ui.custom.min.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/lib/jquery-ui/css/ui-bootstrap/jquery-ui.custom.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

$(document).ready(function() {
    var colsToHide = [];

    var data = [{
        id: 1,
        name: "Ted",
        isActive: true,
        color: "orange",
        date: "2008-01-01"
    }, {
        id: 2,
        name: "John",
        isActive: false,
        color: "black",
        date: null
    }, {
        id: 3,
        name: "Al",
        isActive: true,
        color: "red",
        date: null
    }, {
        id: 4,
        name: "Ben",
        isActive: false,
        color: "blue",
        date: null
    }];

    var globalColumns = [{
        data: "id",
        type: 'text'
    }, {
        data: "name"
    }, {
        data: "isActive",
        type: 'checkbox'
    }, {
        data: "date",
        type: 'date'
    }, {
        data: "color",
        type: 'autocomplete',
        source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
    }];

    var globalHeaders = [1, 2, 3, 4, 5];

    function updateSettings() {
        var newCols = [];
        var newHeaders = [];

        for (var i = 0; i < globalColumns.length; i++) {
            if (colsToHide.indexOf(i) === -1) {
                newCols.push(globalColumns[i]);
                newHeaders.push(globalHeaders[i]);
            }
        }
        hot1.updateSettings({
            columns: newCols,
            colHeaders: newHeaders
        });
    }

    $("#add").on("change", function(e) {
        var val = this.value;
        this.value = "";
        var intVal = parseInt(val);
        if (intVal >= 0) {
            if (colsToHide.indexOf(intVal) === -1) {
                colsToHide.push(intVal);
            }
        }
        updateSettings();

    })

    $("#show").on("change", function(e) {
        var val = this.value;
        this.value = "";
        var intVal = parseInt(val);
        if (intVal >= 0) {
            var indexToRemove = colsToHide.indexOf(intVal);
            if (~indexToRemove) {
                colsToHide.splice(indexToRemove, 1);
       ...