How to use sproutcore-table

overview_controller.js

MyApp.overviewController = SC.ArrayController.create(SC.TableDelegate, {

});

yourview.js

MyApp.YourView = SC.View.extend({
  childViews: ['overviewTable'],
  
  overviewTable: SC.TableView.extend({
    layout: { top: 120, left: 10, right: 10, bottom: 10 },
    showRowNumbers: true,
    contentBinding: 'MyApp.overviewController.arrangedObjects',
    selectionBinding: 'MyApp.overviewController.selection',
    contentCheckboxKey: ['invitedForCommittee'],
    editableKeys: ['invitedForCommittee'],
    columns: [
      SC.TableColumn.create({
        label: 'Studentnr',
        key: 'candidate.studentNumber',
        width: 80
      }),
      SC.TableColumn.create({
        label: 'Naam',
        key: 'candidate.forwardName',
        width: 140
      }),
      SC.TableColumn.create({
        label: "M/V",
        key: 'candidate.gender',
        width: 40
      }),
      SC.TableColumn.create({
        label: "Totaal",
        key: 'totalScore',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Toets Totaal",
        key: 'applicationTest.bestAttempt.totalScore',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Opdrachten Totaal",
        key: 'assignmentsTotal',
        width: 80
      }),
      //
      SC.TableColumn.create({
        label: "Toets Muziek",
        key: 'testScores.muziek.percentage',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Toets Productie",
        key: 'testScores.productie.percentage',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Toets Technologie",
        key: 'testScores.technologie.percentage',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Opdracht Muzikaliteit",
        key: 'assignmentScores.musicality.percentage',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Opdracht Productie",
        key: 'assignmentScores.production.percentage',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Opdracht Technologie",
        key: 'assignmentScores.technology.percentage',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Opdracht Vakmanschap",
        key: 'assignmentScores.skill.percentage',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Opdracht Artisticiteit",
        key: 'assignmentScores.artisticity.percentage',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Opdracht Originaliteit",
        key: 'assignmentScores.originality.percentage',
        width: 80
      }),
      SC.TableColumn.create({
        label: "Uitgenodigd voor gesprek",
        key: 'invitedForCommittee',
        width: 80
      }),
      SC.TableColumn.create({
        label: 'Geboortedatum',
        key: 'candidate.birthDate',
        width: 100,
      }),
      SC.TableColumn.create({
        label: 'Specialisatie(s)',
        key: 'specialisationsString',
        width: 100
      }),
      SC.TableColumn.create({
        label: 'Ronde',
        key: 'round',
        width: 80
      }),
      SC.TableColumn.create({
        label: 'Aanmelding voor',
        key: 'applicationType',
        width: 80
      }),
      SC.TableColumn.create({
        label: 'Opmerkingen Reviewer',
        key: 'assignmentReviewerComments',
        width: 280
      })
    ]
  })
  
})