Handsontable example

by Aman Middha

HTML

<div id="hot"></div>

CSS

</style>
<link rel="stylesheet" type="text/css" href="http://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="http://handsontable.com/static/css/main.css">
<script src="http://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>

JavaScript

var dataObject = [
        {
            id: 1,
            flag: 'EUR',
            currencyCode: 'EUR',
            currency: 'Euro',
            level: 0.9033,
            units: 'EUR / USD',
            asOf: '08/19/2015',
            onedChng: 0.0026
        },
        {
            id: 22,
            flag: 'PHP',
            currencyCode: 'PHP',
            currency: 'Philippine Peso',
            level: 46.3108,
            units: 'PHP / USD',
            asOf: '08/19/2015',
            onedChng: 0.0012
        }
    ];
    var currencyCodes = ['EUR', 'JPY', 'GBP', 'CHF', 'CAD', 'AUD', 'NZD', 'SEK', 'NOK', 'BRL', 'CNY', 'RUB', 'INR', 'TRY', 'THB', 'IDR', 'MYR', 'MXN', 'ARS', 'DKK', 'ILS', 'PHP'];

   

    var hotElement = document.querySelector('#hot');
    var hotSettings = {
    data: dataObject,
    columns: [
        {
            data: 'id',
            type: 'numeric',
            width: 40
        },
       
        {
            data: 'currencyCode',
            type: 'text'
        },
        {
            data: 'currency',
            type: 'text'
        },
        {
            data: 'level',
            type: 'numeric',
            format: '0.0000'
        },
        {
            data: 'units',
            type: 'text'
        },
       
        {
            data: 'onedChng',
            type: 'numeric',
            format: '0.00%'
        }
    ],
    colHeaders: [
        'ID',
        'Country',
        'Code',
        'Currency',
        'Level',
        'Units',
        'Date',
        'Change'
    ],
};

    var hot = new Handsontable(hotElement, hotSettings);