MacGyver Example

Table View

Dynamic Columns

{{cell.column.colName}}	{{cell.column.colName}}	{{cell.column.colName}}
{{cell.value()}}

<table mac-table  mac-table-columns="dynamic" mac-table-resizable-columns mac-table-reorderable-columns class="table mac-table-default">
  <thead mac-table-section="header" mac-table-section-blank-row>
    <tr mac-table-row>
      <th mac-cell-template="No." mac-column-width="5%"><span>{{cell.column.colName}}</span></th>
      <th mac-cell-template="Title" mac-column-width="35%"><span>{{cell.column.colName}}</span></th>
      <th mac-cell-template="" mac-column-width="auto"><span>{{cell.column.colName}}</span></th>
    </tr>
  </thead>
  <tbody mac-table-section="body" mac-table-section-models="macGyverSeasonOne">
    <tr mac-table-row>
      <td mac-cell-template=""><span>{{cell.value()}}</span></td>
    </tr>
  </tbody>
</table>

$scope.macGyverSeasonOne = [
  {
    'No.': '1',
    'Title': '"Pilot"',
    'Directed by': 'Jerrold Freedman',
    'Written by': 'Thackary Pallor',
    'Original air date': 'September 29, 1986'
  }, { ...]

Filtered and Selectable Rows

{{cell.column.colName}}
{{cell.value()}}	{{cell.value()}}

You've selected

{{model["Title"]}}

<table
    mac-table
    mac-table-columns="['No.', 'Title', 'Original air date']"
    mac-table-resizable-columns
    mac-table-reorderable-columns
    class="table mac-table-default">
  <thead mac-table-section="header" mac-table-section-blank-row>
    <tr mac-table-row>
      <th mac-cell-template="" mac-column-width="auto"><span>{{cell.column.colName}}</span></th>
    </tr>
  </thead>
  <tbody
      mac-table-section="body"
      mac-table-section-models="macGyverSeasonOne | filter: query"
      mac-table-section-selected-models="$parent.$parent.selectedModels">
    <tr
        mac-table-row
        ng-class = "{selected: row.selected}">
      <td mac-cell-template="No." mac-table-selectable="true"><span>{{cell.value()}}</span></td>
      <td mac-cell-template=""><span>{{cell.value()}}</span></td>
    </tr>
  </tbody>
</table>

$scope.selectedModels = []

$scope.unselectAll = ->
  $scope.selectedModels = []

$scope.selectAll = ->
  $scope.selectedModels = $scope.macGyverSeasonOne.slice 0

$scope.selectRandom = ->
  length = $scope.macGyverSeasonOne.length
  models = []
  for i in [1..(length / 2)]
    index = Math.floor Math.random() * length
    model = $scope.macGyverSeasonOne[index]
    models.push model unless model in models

  $scope.selectedModels = models