Excel-like HTML table manipulation with Handsontable

I continually stress the importance of web programming skills to the data scientists’ repertoire, due to the fact that most users of data interact with it through a web browser. (See my previous post “Data Scientist Makes Peace with Web Programming”). Therefore I periodically showcase web development techniques from a data scientist’s perspective.

Today I’m demonstrating Handsontable, which places an Excel-like grid within a webpage that users can edit in Excel-like ways (e.g., copy and paste, drag down/sideways). The tool was created by Marcin Warpechowski and is available at http://handsontable.com/.

Like I did with jqGrid, I’ll show here how to set the display features and cell values from the server side:

On the client side, we get the table data as JSON:

$.getJSON('get_json/', function(data) {
$('#my_div').handsontable({
data: data['table_data'],
startCols: data['start_cols'],
startRows: data['start_rows'],
colHeaders: true
});
});

On the server side (Django in this case), we deliver the data in JSON format:

def get_JSON(request):
    data = {'table_data' : [
                ('Window Size', 'Method', 'Group', 'Classifier Score'),
                (3,1,'A',0.59),
                (3,1,'B',0.66),
                (3,1,'C',0.3),
                (3,1,'D',0.43),
                (3,1,'E',0.43),
                (3,1,'F',0.37),
                (3,1,'G',0.3),
                (3,1,'H',0.36),
                (3,1,'I',0.54),
                (3,2,'A',0.22),
                (3,2,'B',0.65),
                (3,2,'C',1.0),
            ],
    'start_cols' : 6,
    'start_rows' : 30,
    }
    response = HttpResponse(dumps(data), mimetype='application/json')
    response['Cache-Control'] = 'no-cache'
    return response

The result is an HTML table that displays the data supplied by the server application.

The next two screenshots show dragging a column in the resulting table to a new column. (It is hard to show mouse movement with static images, but bear with me):