Home

datakurre edited this page Dec 18, 2011 · 40 revisions
Clone this wiki locally

SoTech.TableView

For SproutCore 1.5 and 1.6.

This view creates one SC.ScrollView + SC.ListView -pair for every column and keeps them in sync by binding them to the same content, selection, scroll offset, etc… you got the idea. This might not be the optimal approach for building blazing fast tables, but on the other hand it seems to requires very little glue to give you almost all the power of SC.ListView (including editable item views).

Please, ask datakurre @ #sproutcore @ irc.freenode.net for more details.

Changes for SC 1.5 and 1.6

  • Property names have changed (see the examples for details).
  • No more resizable columns (there’s no Endash.ColumnView for SC 1.5).
  • Default branch has been changed to 1-5 (old code remains still on master).

There may be bugs, as usual, and all SC.ListView use cases may not be covered. Anyway, there’s not many LOC to learn and fix.

Installation

$ git clone git://github.com/datakurre/sotech.git frameworks/sotech

Include sotech/table_view in your Buildfile.

config :all, :required => ["sotech/table_view"]

Example

table: SoTech.TableView.design({
  layout: { top: 0, right: 0, bottom: 0, left: 0, border: 1 },
  //
  // Regular collection bindings work just like with SC.ListView
  //
  contentBinding: 'MyApp.myArrayController.arrangedObjects',
  selectionBinding: 'MyApp.myArrayController.selection',
  orderByBinding: 'MyApp.myArrayController.orderBy',
  //
  // Left icon will be inserted onto the first column
  //
  contentIconKey: 'icon',
  hasContentIcon: YES,
  //
  // Right icon will be inserted onto the last column
  //
  contentRightIconKey: 'statusIcon',
  hasContentRightIcon: YES,
  //
  // Custom properties
  //
  columnHeaders: "_FirstName _LastName _Email".w().invoke("loc"),
  columnValueKeys: "firstName lastName email".w(),
  columnWidths: [150, 150, 300],
  columnAligns: [SC.ALIGN_LEFT, SC.ALIGN_LEFT, SC.ALIGN_CENTER]
  columnOrderable: [YES, YES, NO],
  //
  // Thanks to SC.ListView, also these work
  //
  canEditContent: YES,
  canDeleteContent: YES,
  canReorderContent: NO
}),

Another Example

This example is more complicated than required, because it’s taken from an app requiring explorer-like view, but you should get the idea.

Screenshot

./my_app/resources/main_page.js

table: SoTech.TableView.design({
  layout: { width: 340, height: 180, top: 0, left: 0, border: 1 },
  classNames: "my-border-bezel".w(),
  backgroundColor: '#EFECDD',
  //
  contentBinding: 'MyApp.myTreeController.arrangedObjects',
  selectionBinding: 'MyApp.myTreeController.selection',
  orderByBinding: 'MyApp.myTreeController.orderBy',
  //
  contentIconKey: 'icon',
  hasContentIcon: YES,
  //
  columnHeaders: "_name _date _size".w().invoke("loc"),
  columnValueKeys: "name date size".w(),
  columnWidths: [180, 80, 80],
  columnAligns: [SC.ALIGN_LEFT, SC.ALIGN_CENTER, SC.ALIGN_RIGHT]
  //
  // /** other available properties and their default values are: **/
  // columnOrderable: [YES, YES, YES], // enable sort by column header click
  //
  // /** other tested SC.ListView's properties and their default values are: **/
  // delegate: null,
  // canEditContent: NO,
  // canDeleteContent: NO,
  // canReorderContent: NO,
  // isDropTarget: NO,
  // rowHeight: 18,
  // hasContentRightIcon: NO,
  // contentRightIconKey: null
}),

Note: This example uses SC.TreeController, but the view works as well with SC.ArrayController. Please, also note that SC.TreeView might not have native support for orderBy.

./my_app/resources/strings.js

SC.stringsFor('English', {
  '_name': "Name",
  '_date': "Date",
  '_size': "Size"
}) ;

./my_app/resources/table.css

.my-theme.st-table-view .sc-collection-view.alternating .sc-collection-item.even {
  background-color: #F0F0F0;
}
.my-theme.st-table-view .sc-collection-view.alternating .sc-collection-item.sel.even {
  background-color: #DDDDDD;
}
.my-theme.st-table-view .sc-collection-view.alternating.focus .sc-collection-item.sel.even {
  background-color: #2370D8;
}
.my-theme.st-table-view.my-border-bezel {
  border: 1px inset #C7C5B3;
}
.my-theme.st-table-view .st-header-view {
  border-bottom: 1px solid #C7C5B3;
}
.my-theme.st-table-view .st-header-view.sc-button-view {
  background-color: #EEEAD9;
  border-bottom: 1px solid #C7C5B3;
}
.my-theme.st-table-view .st-header-view.sc-button-view.st-order-by {
  background-color: #EEEAD9;
}
.my-theme.st-table-view .st-header-view.sc-button-view:hover {
  background-color: #FFFFFF;
}