Table Lite Demo

this fiddle allows you to play with ad-table-lite directive

by Danny Michaelis

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.19/angular-sanitize.js"></script>
<script src="http://adaptv.github.io/adapt-strap/dist/adapt-strap.js"></script>
<script src="http://adaptv.github.io/adapt-strap/dist/adapt-strap.tpl.js"></script>
<link rel="stylesheet" href="http://adaptv.github.io/adapt-strap/dist/adapt-strap.css">
<div ng-app="adaptv.adaptStrapDocs" ng-controller="tableliteCtrl">
    
    <!-- ========== template files ========== -->
    <script type="text/ng-template" id="src/tablelite/docs/buyCell.html">
        <button class="btn btn-primary btn-xs" ng-click="buyCar(item)">
            Buy
        </button>
    </script>
    
    <script type="text/ng-template" id="src/tablelite/docs/carMoreInfo.html">
        <div>
          <h4>More Info</h4>
          <p><strong>Model: </strong>{{ item.name }}</p>
          <p><strong>Year: </strong>{{ item.year }}</p>
          <p><strong>Price: </strong>{{ item.year }}</p>
          <p><a ng-click="buyCar(item)">Click here</a> to buy it.</p>
        </div>
    </script>

  <!-- ========== Usage ========== -->
  <ad-table-lite table-name="carsForSale"
                 enable-column-search="true"
                 column-definition="carsTableColumnDefinition"
                 local-data-source="models.carsForSale"
                 page-sizes="[7, 20]"
                 pagination-btn-group-classes="pagination pagination-sm"
                 table-classes="table table-bordered"
                 draggable="true"
                 on-drag-change="onChange"
                 on-click-sort-direction="DEC"
                 items-not-found-message="Cars Not Found"
                 selected-items="models.selectedCars"
                 snug-sort-icons="true"
                 search-text="models.searchText"
                 row-class-provider="checkRowSelected"
                ...

JavaScript

// ========== initialize documentation app module ========== //
angular.module('adaptv.adaptStrapDocs', [
  'ngSanitize',
  'adaptv.adaptStrap'
])

// ========== controllers ========== //
.controller('tableliteCtrl', ['$scope', function ($scope) {
$scope.models = {
      changeInfo: [],
      searchText: '',
      selectedCars: [
        {
          id: 1,
          name: 'Audi A4',
          modelYear: 2009,
          price: 34000
        }
      ],
      carsForSale: [
        {
          id: 1,
          name: 'Audi A4',
          modelYear: 2009,
          price: 34000
        },
        {
          id: 2,
          name: 'BMW 328i',
          modelYear: 2012,
          price: 39000
        },
        {
          id: 3,
          name: 'Audi A6',
          modelYear: 2012,
          price: 44000
        },
        {
          id: 4,
          name: 'Audi S8',
          modelYear: 2014,
          price: 100000
        },
        {
          id: 5,
          name: 'Audi A4',
          modelYear: 2009,
          price: 34000
        },
        {
          id: 6,
          name: 'BMW 328i',
          modelYear: 2012,
          price: 39000
        },
        {
          id: 7,
          name: 'Audi A6',
          modelYear: 2012,
          price: 44000
        },
        {
          id: 8,
          name: 'Audi S8',
          modelYear: 2014,
          price: 100000
        },
        {
          id: 9,
          name: 'Audi A6',
          modelYear: 2012,
          price: 44000
        },
        {
          id: 10,
          name: 'Audi S8',
          modelYear: 2014,
          price: 100000
        },
        {
          id: 11,
          name: 'Audi A6',
          modelYear: 2012,
          price: 44000
        },
        {
          id: 12,
          name: 'Audi S8',
          modelYear: 2014,
          price: 100000
        }
      ]
    };

    $scope.carsTableColumnDefinition = [
      {
        columnHeaderDisplayName: 'Model',
        displayProperty:...