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