Handsontable - Excel-like table editor in HTML & jQuery | Hacker News Reader

Handsontable - Excel-like table editor in HTML & jQuery

warpech.github.com

237 pointsuptown40 comments

Nice. Try to use contentEditable for a better user experience, and auto align numbers to the right. That's it. Great job.

* Here, contentEditable cells on click, arrows up/dn for rows, tab/shft+tab for columns:

http://georgenava.appspot.com/demo/spreadsheet.html

Coincidentally I was playing with that yesterday for a project, but yours is a hundred thousand times better.

I agree with contentEditable. The textarea seems to bug out sometimes on WebKit and renders incorrectly.

contentEditable is a terrible hack and difficult to use when you only want a subset of features. You need to blacklist a bunch of events like pasting, keyboard formatting (e.g. ctrl+i, drag and drop and inserting new lines.

Would be great if browsers could provide a "black and white" contentEditable that just lets the user edit the textContent in an HTML element.

How does it do with large datasets, say 5k rows+?

There are lots of table alternatives out there, but most croak when you start working with 1000's of rows.

same question. if it works well, i'll definitely use it instead of my own frankenstein hackery

EDIT: seems like no go: 500 rows take ~10sec to render

http://jsfiddle.net/JKg33/

caution: will freeze firefox while rendering

I am the dev of the plugin. Thanks for the info, I will try to address that. Notice that the performance is much better when you turn off row/col headers.

    rowHeaders: false,
    colHeaders: false,

Example: http://jsfiddle.net/JKg33/2/

That is the newest feature and I am sure it can be optimised.

It would be the best if you could help me with the plugin by issueing a ticket in GitHub. I do this for my own startup (www.giraffeapp.com) and I have to split time between this and other tasks.

The best way I've seen this problem solved is via using a viewport, where you only render what is visible at the time.

SlickGrid does this very well, but they don't have the Excel-like features that biz people fawn over.

Neat! FYI: "minSpareRows: 0" doesn't work as expected. (Still shows 1 spare row.

UPDATE: I have just made some optimizations for large grids. Please try again the same fiddle now (clear your cache) http://jsfiddle.net/JKg33/

Still there is some work to be done but it is much faster now.

Editing row 500 in chrome melts it as well...

Is there any JS spreadsheet library that falls-back to <table>s for non JS-enabled browsers?

Spreadsheets/tables are a great way to structure data. However, JS-'enhancing' such data makes scraping the data much more difficult. I am a little bit concerned that the web has been moving more and more away from connected data and towards isolated apps.

It should be trivial for the author to put the table in the document, then use JS to transform it into the fancy version.

HTML for content, CSS and JS for presentation, it's nothing a half-decent web dev hasn't heard a million times already.

Cool, was just about to start a search of projects like this. Does anyone know of any other similar projects (besides Active Widgets)?

Datatables with the jEditable plugin.

  Datatables - http://datatables.net/

  jEditable - http://www.appelsiini.net/projects/jeditable

  How to integrate - http://datatables.net/release-datatables/examples/api/editable.html

There is also Dan Bricklin's socialcalc https://github.com/DanBricklin/socialcalc which has some relatively active forks including audreyt's ethercalc https://github.com/audreyt/ethercalc

You can see what the spreadsheets look like at http://www.ethercalc.org/

For just viewing and editing spreadsheets without social features, you can ignore the servers included, the javascript widget works just fine by itself.

Dan Bricklin co-authored VisiCalc, the first spreadsheet program for the masses.

DataTables ( http://datatables.net ) has some overlapping functionality, some of which is provided by plug-ins. For example KeyTable + Editor: http://editor.datatables.net/tutorials/keytable .

*Disclaimer - I am the author of DataTables.

DataTables is what we're phasing out in favor of SlickGrid (most likely); it simply croaks when you have 1000's of rows...too many DOM objects in the browser.

Of course, the paged option might alleviate that somewhat, but requirements won't let me use that.

Have you taken a look at the deferred rendering and/or Scroller options for DataTables ( http://tinyurl.com/cr5usea and http://datatables.net/extras/scroller/ )? These can provide a significant speed increase - depending on your data source for the table and how you want to configure the table.

No, but I will now. Thanks!

DataTables is the best single purpose javascript library I have ever used, and I used a ton. I love it.

I've been looking for something like this for a while to provide copy / paste address book import functionality from Excel or any spreadsheet program. Google Apps script was interesting because you could do complex rules like adding validation but I don't think it's really designed to be dropped in to your site to be used by anonymous users and having Google Spreadsheets as a dependency isn't ideal.

However, for simple input this looks great. What else is out there? I saw the projects listed on this project's github but those weren't the same - just start editing and pasting.

A data explorer, designed to be highly flexible: http://reclinejs.com

JavaScript makes my head hurt.

1) JSON is what is used to init the table code right? 2) If it is JSON, JSON can contain logic? As in the match logic? 3) What is the function name? Is it match? Where does it get called from? How many paths are there to call it? 4) CSS style is hard coded into the (I think) JSON string, is mixing data (JSON), programming logic (if expressions) and CSS styling really the best new way to do UI development? So back in the day before MVC when we used to mix this stuff; we were doing it 'right'?

JavaScript is good for some things but WebGL and Excel-like spreadsheets are too much if not just for performance then also for maintainability, IMO.

I had a summer internship in high school that foundered when we realized that we needed a grid tool to display and edit data in a web browser. The rest of the summer was spent trying to build this tool in Java.

Where were you guys 16 years ago?

What I would like is a super-easy server-side library that allows persistence for a table like this. Since I had a crap day at work where I got no development work done, maybe I'll bang this out tonight at home.

This is what you're talking about. http://obeleh.thruhere.net/ Wait for it to load. It's connecting to the database ;)

NOTE Still in development ;)

What I've done is I wanted to have a Ms Access like application on the web. Everything "real time". As datagrid i use SlickGrid. Every change is being sent to a nodeJs webserver using NowJs. The change is then saved to a mongoDb database. When a change is saved all clients that are viewing that table get an update with the new data. On the right is my "meta" table. This table describes all columns that are in the database. The data in the meta table is only saved when you click save. But all the data in the left table is real time.

To see the real "power" of the application open two browsers and make sure you can see both. If you have two separate PC's this will also work. So now you have the same datagrid twice. Now when you do a change in one datagrid you will see that that change has been pushed to the other datagrid as well.

The datagrid has multi-column-sorting, selection, copy-paste and delete. I'm working now on having Comboboxes so that you can have a Cities table and a Persons table and you can select the right city for each person. The thing is, I need to keep my combobox options in sync with the database as well. And I want to store the ObjectID and not the CityName for example. Because names can change. ID's don't.

can't do any excel type formulas or functions... that's a limitation...

very cool that you can copy and paste though. I've often wanted a way for users to copy excel data into an app as opposed to making them inport a csv...

Looks great! But a word to anyone out there creating a jQuery Plugin - Please list your browser support somewhere obvious!

Maybe I'm missing it but I can't see it anywhere in the Docs.

On that note it doesn't work (doesn't bring up keyboard) on iOS browsers.

SlickGrid is somewhat similar: https://github.com/mleibman/SlickGrid/wiki/Examples

This just saved me a ton of time! I'd been planning doing implementing something similar to this in my startup's webapp. The flexibility this provides is just awesome and should hopefully make things much easier.

Thank you Marcin Warpechowski / Giraffe for creating this and uptown for submitting this.

This is why I read HN daily.

This is really nice work! The grid looks superb and the inline editing display is really slick.

Can one do excel like formulas? Or any other library which can provide such a functionality?

I don't think that linked table supports equation. It should be possible to add them. You don't have to look further than google docs that it is possible. I did write excel like language in the past and it was quite simple. Obviously there is performance hit when comparing js to native, but it should be fast enough. Sorry but I cannot give you my code because it was written as my job, but as I said writing something like that should not be a big challenge.

(Edited to improve readability)

This is great! Especially it seems to be working good when the page is zoomed out.

I am curious about other table/grid editors for other JS libraries (for example ExtJS, Dojo, Kendo UI, Google Closure, ZK). Could you share your experience?

Why do you need to specify the initial number of rows/cols? Or is that optional?

Seems to be optional.

Pretty slick, thanks.

Reply on news.ycombinator.com