Handsontable - Excel-like table editor in HTML & jQuery

http://warpech.github.com/jquery-handsontable/index.html

by uptown • 14 years ago

237 40 14 years ago

warpech.github.com

columbo• 14 years ago

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

colinm2• 14 years ago

Seems to be optional.

netnichols• 14 years ago

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

jon_wu• 14 years ago

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.

crandles• 14 years ago

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

theallan3• 14 years ago

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.

k3n4• 14 years ago

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.

mahmud• 14 years ago

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

paulfitz• 14 years ago

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.

zephod• 14 years ago

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

Kilimanjaro• 14 years ago

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.

notb• 14 years ago

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

underwater• 14 years ago

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.

_urga• 14 years ago

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

lukasb• 14 years ago

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?

showerst• 14 years ago

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.

adamt• 14 years ago

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

edwinyzh• 14 years ago

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

k3n4• 14 years ago

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.

micaeked• 14 years ago

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

warpech2• 14 years ago

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.

gouranga• 14 years ago

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

warpech2• 14 years ago

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.

clyfe• 14 years ago

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

theallan3• 14 years ago

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

systematical• 14 years ago

Pretty slick, thanks.

mkopinsky• 14 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.

SjuulJanssen• 14 years ago

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.

zekenie• 14 years ago

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...

sidchilling• 14 years ago

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

naitbit• 14 years ago

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)

skardan• 14 years ago

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?

raphman• 14 years ago

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.

wisty• 14 years ago

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.

tfb• 14 years ago

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.

jebblue• 14 years ago

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.

Handsontable - Excel-like table editor in HTML & jQuery

Related Stories