Handsontable Scroll Row Into View

by sqiudward

HTML

<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" href="http://handsontable.com/demo/css/samples.css">
<input type="button" id="scrollToLast" value="Scroll To Last" />
<div id="autos-table" style="overflow: auto;"></div>

CSS

body {
    background-color: white;
    margin: 20px;
    overflow: hidden;
}
#scrollToLast {
    margin-bottom: 8px;
}

JavaScript

var $table = $("#autos-table");

var height = $table.parent().innerHeight() - 50;
var width = $table.parent().innerWidth();

var resizeTimeout;

$(window).resize(function () {
    height = $table.parent().innerHeight() - 50;
    width = $table.parent().innerWidth();

    clearTimeout(resizeTimeout);

    resizeTimeout = window.setTimeout(function () {
        $table.handsontable('updateSettings');
        console.log('Handsontable resized to height=' + height + ', width=' + width);
    }, 200);

});

var data = [];

for (var y = 1972; y < 2015; y++) {
    data.push({
        year: y,
        kia: 10,
        nissan: 11,
        toyota: 12,
        honda: 14
    });
}

$table.handsontable({
    data: data,
    manualColumnResize: true,
    stretchH: 'last',

    height: function () {
        return height;
    },

    width: function () {
        return width;
    },

    columns: [{
        data: 'year'
    }, {
        data: 'kia'
    }, {
        data: 'nissan'
    }, {
        data: 'toyota'
    }, {
        data: 'honda'
    }, {
        // empty column will stretch
    }],

    colHeaders: function (col) {
        switch (col) {
            case 1:
                return 'Kia';
            case 2:
                return 'Nissan';
            case 3:
                return 'Toyota';
            case 4:
                return 'Honda'
            default:
                return '';
        }
    },

    onSelection: function ( /*r, c, r2, c2*/ ) {
        //turn off cell selection b/c this is a list
        $table.handsontable('deselectCell');
    }
});

$('#scrollToLast').click(function () {
    $table.handsontable('selectCell', data.length - 1, 3);
});