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):
Hi,
Great content! Not enough on Grids/Tables online.
I see you’ve JSGrid and Handsontable.
I would suggest using ag-Grid, now the industry leader. Feature-rich, outstanding performance and built to deal with large data sets with ease(streams up to 100k rows with ease).
http://www.ag-grid.com
Hope to see some new content featuring ag-Grid 🙂
It’s free forever!