Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
35 lines (22 sloc) 2.04 KB


This is a table view for Sproutcore.

Design Goals:

  • Use the existing Sproutcore API -- no modifications to Sproutcore are necessary.
  • Be intuitive and responsive from a user's perspective. (Includes rendering quickly, so the row view rendering is kept intentionally simple.)
  • Be easy to plug in from a developer's perspective.

Current Limitations:

  • Currently unstyled (hopefully it will get a good default theme soon!)
  • Currently read-only, with plans to add a row-editing mode.
  • It's fast, but I haven't put a whole lot of effort into making it as fast as it could be yet.


  • Sproutcore (Versions 1.4-stable through 1.8.0, though styling is currently a bit off due to Sproutcore theme changes I haven't caught up to yet.)

Demo App

Check out a demo app project here And a build you can play with here

How to Use

The main view provided by this project is SCTable.TableView (in views/table.js).

  • Row content: Bind an array or ArrayController full of your row objects (any SC.Object instances) to the 'content' property.
  • Row Selection: The 'selection' property gives you an SC.SelectionSet of selected rows.
  • Column Definitions: Bind an array or ArrayController full of column descriptor objects (any SC.Object instances mixing in SCTable.Column) to the 'columns' property. The order of these objects determines the order the columns are shown in the table.
  • Column Selection: You can select one or more columns - if you do, an SC.SelectionSet at the 'columnSelection' property will match it.

The table view header subclasses SC.CollectionView, and the table body subclasses SC.ListView, so both your content and columns array controllers can have full collection view delegate power if you wish to implement it.

Jump to Line
Something went wrong with that request. Please try again.