Question

I am working on a project based on SproutCore 1.8. My app has to display lots of data in a sophisticated table view. In fact, the table view will be one of the central elements of the app’s interface. Also, I will probably need an outline/tree view, allowing me to display hierarchical data in a table view-like interface component.

I initially tried using SC.TableView, but this seems to be deprecated as of v1.6 of the SproutCore framework. I got a console output suggesting to use a community tableview, but didn’t find that much.

I found some hints in the SC Google Groups suggesting that one should consider using SlickGrid and that someone wrote a small SproutCore wrapper around SlickGrid which you could plug into your SproutCore app. I have to admit, I didn’t try this yet.

However, as my app is not a big experiment and I am not really willing to put much effort into standard UI components that I expect being readily available in a sophisticated UI framework, I would like to ask whether there is any solution that is reliable and works ‘out of the box’ in the SproutCore framework?

Answer 1

However, as my app is not a big experiment and I am not really willing to put much effort into standard UI components that I expect being readily available in a sophisticated UI framework, I would like to ask whether there is any solution that is reliable and works ‘out of the box’ in the SproutCore framework?

Unfortunately, the short answer is no. Sproutcore is a good framework with a lot of advantageous, but the honest truth is there is no good table view that works out of the box.

Your best option is to use SlickGrig as suggested on the google groups. If that external library meets all of your needs, its not too difficult to get it working with SC. You would create an SC.View. Implement the didAppendToDocument method and in it initialize slick grid according to its instructions. From there, use SC.Event.add to listen for events on the slick grid dom, and in your handlers invoke your app logic. Be sure to wrap in an SC.run(function(){...}) so you get a runloop. So basically, you are writing a view which proxies a slick grid instance. The biggest challenges you will face are browser computability issues, keeping SC representation of the data in sync with SG’s internal representation (for sorting and whatnot), and if you intend to leverage a lot of SG’s functionality, it can be a bit of code.

Another option would be to roll your own grid. But that’s a lot more work.

Really, if the SG path seems too difficult, practically speaking, you are better off going with a framework which has a grid.