<div ng-controller="SimpleTableTestController">
  <div class="row-fluid">
    <div class="section-header">

      <div class="section-filter">
        <input type="text" class="search-query" placeholder="Filter..." ng-model="mygrid.filterOptions.filterText">
        <i class="icon-remove clickable" title="Clear Filter" ng-click="mygrid.filterOptions.filterText = ''"></i>
      </div>

    </div>
  </div>

  <h3>hawtio-simple-table example</h3>

  <table class="table table-striped" hawtio-simple-table="mygrid"></table>

  <div class="row-fluid">
    <p>Selected folks:</p>
    <ul>
      <li ng-repeat="person in selectedItems">{{person.name}}</li>
    </ul>

    <p>
       <a class="btn" href="#/datatable/test?multi={{!mygrid.multiSelect}}">multi select is: {{mygrid.multiSelect}}</a>
    </p>
  </div>
</div>


<script type="text/javascript">
  function SimpleTableTestController($scope, $location) {
    $scope.myData = [
      { name: "James", twitter: "jstrachan" },
      { name: "Stan", twitter: "gashcrumb" },
      { name: "Claus", twitter: "davsclaus" }
    ];

    $scope.selectedItems = [];


    $scope.mygrid = {
      data: 'myData',
      showFilter: false,
      showColumnMenu: false,
      multiSelect: ($location.search()["multi"] || "").startsWith("f") ? false : true,
      filterOptions: {
        filterText: "",
        useExternalFilter: false
      },
      selectedItems: $scope.selectedItems,
      rowHeight: 32,
      selectWithCheckboxOnly: true,
      columnDefs: [
        {
          field: 'name',
          displayName: 'Name',
          width: "***"
          //width: 300
        },
        {
          field: 'twitter',
          displayName: 'Twitter',
          cellTemplate: '<div class="ngCellText">@{{row.entity.twitter}}</div>',
          //width: 400
          width: "***"
        }
      ]
    }
  }
</script>
