Handsontable example

HTML

<link rel="stylesheet" href="http://docs.handsontable.com/0.15.0-beta2/styles/samples.css">
<div id="example1" class="handsontable"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="http://docs.handsontable.com//bower_components/handsontable/dist/handsontable.full.js"></script> <link type="text/css" rel="stylesheet" href="http://docs.handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css">

JavaScript

$(document).ready(function () {

    function getCarData() {
        return [
        ["Nissan", 2009, "black", "black"], ["Nissan", 2006, "blue", "very very very very dark blue"], ["Chrysler", 2004, "yellow", "black"], ["Volvo", 2012, "white", "gray"]];
    }
    
    var dropdownRenderer = function (instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.AutocompleteRenderer(instance, td, row, col, prop, value, cellProperties);

        var textSpanWidth = instance.getColWidth(col) - 25; 
        var textSpan = document.createElement('div');
        textSpan.textContent = td.textContent.replace(td.lastElementChild.textContent, '');
        textSpan.style.width = textSpanWidth + 'px';
        textSpan.style.float = 'left';
        textSpan.style.overflow = 'hidden';

        td.innerHTML = textSpan.outerHTML + td.lastElementChild.outerHTML;
    };

    var hot = new Handsontable(document.getElementById("example1"), {
        data: getCarData(),
        colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
        colWidths: 100,
        manualColumnResize: true,
        columns: [{}, {
            type: 'numeric'
        }, {
            type: 'dropdown',
            source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
        }, {
            type: 'dropdown',
            source: ['yellow', 'red', 'orange', 'green', 'very very very very dark blue', 'gray', 'really long named colour called black', 'white']
        }],
        cells: function (row, col, prop) {
            var cellProperties = { wordWrap: false };
            if (col > 1) {
                cellProperties.renderer = dropdownRenderer;
            }
            return cellProperties;
        }
    });

});