Backgrid: A featureful grid UI for Backbone.js | Hacker News Reader

Backgrid: A featureful grid UI for Backbone.js

wyuenho.github.com

129 pointsjashkenas28 comments

Project author here. Ask me anything, constructive criticism much appreciated!

And much thanks goes Jeremy for writing Backbone.js and posting this!

(BTW, I'm looking for a job, so if anyone is interested, please email me myhnhandle [at] googlesmailservice dot com)

Looks excellent! I don't have an excuse to play with this right now, but I'm forwarding to a colleague that is going to love it. Can't say much more than big thanks for sharing your work.

Hey, great work! One thing I found - your MomentCell example seems to steal focus from the document. You can't blur it by clicking elsewhere, which means any other keystrokes (except escape or enter) on the page go directly to it.

Stealing focus is intentional because I want you to correct your mistakes, this is the same for all other cell types that do validation.

But not giving up focus by clicking elsewhere is not. File me a bug and thanks!

This is great, I think this is going to come in pretty handy for an upcoming project at work. What a great method of job hunting, I hope it works out!

Can it handle say 1 million rows, by lazily creating the DOM elements when the scroll into view (like, say, SlickGrid)

Can you read 1 million rows at a time like Neo :P

Jokes aside, no it cannot, not yet anyway. This is version 0.1 and I really have no intension of cloning SlickGrid. That said, the infrastructure is here

http://www.reddit.com/r/javascript/comments/176tvf/backgridj...

and avoiding DOM repainting is on the top of my list for version 0.2.

https://github.com/wyuenho/backgrid/issues/26

This should take only 3 lines of code.

PR welcome!

Love it. Really! How difficult would it be to embed a D3 chart in one of the columns? Would that be something tricky to add or could it be made into a column type easily?

Probably would be best implemented as an extension that can display a chart in a lightbox or something. Probably something akin to this:

http://wyuenho.github.com/backgrid/#api-text-cell

This is really useful. Thank you. With the scrolling list would it be possible to make the header row stay in place? Some people prefer to scroll with large amounts of data so that they can just use ctr+f to quickly find the links to what they want.

It's in the works

https://github.com/wyuenho/backgrid/issues/4

PR welcome!

Crashes safari on my iPhone 4s, iOS 5.1.1.

Yeah the gh-pages website has too many grids and codemirror instances opened up at once. The examples really need to load lazily on mobile. Any help would be greatly appreciated.

Chrome 24 / Win 7 - clicking in cells in the Date or Population columns changes the column width.

That's something I have to work on:

https://github.com/wyuenho/backgrid/issues/5

https://github.com/wyuenho/backgrid/issues/6

I am interested in the way you used your project to get possible job offers. Did it work? Please let me know, that way I can follow suit.

1000s of people have done before. Why don't u do it anyway and find out?

Are you looking for a job in SF?

Yes

Hey this looks really cool! The last time I rendered some data in a table I used d3.js, but this looks much simpler for the more advanced stuff.

Do you have cvs support? That would be nifty because large table datasets are usually in csv not in json, so it would be nice to skip this intermediate step.

By the way, how did you make the documentation? It looks really nice.

No csv support. I didn't intent to make a full-blown web-based spreadsheet (but you never know :) ). The documentation is just plain old hand-coded HTML styled with Bootstrap + some well chosen header fonts. The code editor (not much of an editor now that I've put it in read only mode) is codemirror.

Looks awesome. I wrote Backbone.grid last year, basically some view extensions with a much lower level approach and many unresolved issues. This is were backbone (and other MVC) shines I think. Hope to see similar stuff in ember.js angular.js and so on with nifty gems for easy generation of admin section. kudos

Awesome work man, saw this last night and definitely want to get it hooked up with LayoutManager https://github.com/tbranyen/backbone.layoutmanager

Thanks! I saw you saw it last night :D backbone.layoutmanager looks great too. Can't wait to see what awesome sauce the 2 projects can come up with!

Hmm if I knew this existed literally a week ago I might have gone with backbone instead of Angular. Do you by accident know of an ediable-grid with angular directives and proper bindings?

Try ng-grid http://angular-ui.github.com/ng-grid/ -- to get editable cells, you just make your own cell template. Fairly straightforward. I just built something with this, and it worked out nicely.

Examples does not show up on Chrome on Android 4.2.1. It shows a blank area instead of the grid.

I don't have an Android on hand to play with, is there an error log u can send me?

Reply on news.ycombinator.com