

Handsontable - Excel-like table editor in HTML & jQuery - uptown
http://warpech.github.com/jquery-handsontable/index.html

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

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

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

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

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

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

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

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

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

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

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

~~~
k3n
No, but I will now. Thanks!

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

------
lukasb
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?

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

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

------
showerst
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
On that note it doesn't work (doesn't bring up keyboard) on iOS browsers.

------
clyfe
SlickGrid is somewhat similar:
<https://github.com/mleibman/SlickGrid/wiki/Examples>

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

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

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

~~~
naitbit
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)

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

------
skardan
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?

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

~~~
colinm
Seems to be optional.

------
systematical
Pretty slick, thanks.

