Excel Functionality in Javascript

At Venerite we are working with a client that requires a web app to display data in a grid. In the interest of not reinventing the wheel we started evaluating third party libraries to help us with this functionality. One such library we found was Handsontable. This library is MIT licensed and really easy to get started with.

We have a requirement to add a checkbox to a cell to control some functionality. Here is a little insight on how we accomplished this.

Fist thing we need to do is define our data model for our grid. 

var myData = [{
        Goal: '100',
        PercGoal: .08,
        Locked: true
    }, {
        Goal: '200',
        PercGoal: .08,
        Locked: true
    }, {
        Goal: '1000',
        PercGoal: .08,
        Locked: false
    }, {
        Goal: '34',
        PercGoal: .08,
        Locked: false
    }, ];

Next we instantiate an instance of the handsontable grid and pass the required options. 

The data field will associate the table with the dataset we previously defined.

The colHeaders field will define what headers we want associated with this grid.

The columns field will define how our dataset is associated with the datagrid columns.

var container = document.getElementById('example');
var hot = new Handsontable(container, {
    data: myData,
    colHeaders: ["Goal", "%Growth Goal", "Locked"],
    columns: [
        {data: "Goal"},
        {data: "PercGoal", type:'numeric', format: '0%'},
        {data: "Locked",type: 'checkbox'
            ,checkedTemplate: 'true'
            ,uncheckedTemplate: 'false'}
    ]
 });

The key to adding a checkbox to a cell is to add a "type" to the column you are wanting to have this functionality. If you do not have a dataset that uses the default values of "true" and "false" you will need to add some params ... namely checkedTemplate and uncheckedTemplate. These attributes will let you define what values you want to use for a checked checkbox and an unchecked one. 

Here is a JSFiddle project where you can play around with this functionality.