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) {
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'),
    '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):

Leave a Reply

Your email address will not be published.