src/app/core/table/table.html

<!--<div ng-show="vm.data.length > 0 && vm.loader == false">-->
    <div class="row" ng-if="vm.config.filter == 'fulltext'">
        <div class="col-xs-12">
            <input
                    class="form-control"
                    placeholder="Type to search.."
                    type="text"
                    ng-model="vm.query"/>
        </div>
    </div>
    <table ng-class="vm.classes">
        <thead>
        <tr>
            <th ng-repeat="col in vm.columns">
                {{col.label}}
                <span ng-if="vm.config.order">
                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
                      <i class="fa fa-chevron-up"></i>
                    </a>
                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
                      <i class="fa fa-chevron-down"></i>
                    </a>
                  </span>
            </th>
            <th ng-if="vm.config.actions">Actions:</th>
        </tr>
        </thead>
        <tbody ng-if="vm.config.filter == 'field'">
        <tr>
            <td ng-repeat="col in vm.columns">
                <input
                        ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
                        class="form-control"
                        placeholder="Type to search by {{col.label}}"
                        type="text"
                        ng-model="vm.query[col.prop]"/>
                <select
                        ng-if="col.type === 'boolean'"
                        class="form-control"
                        ng-model="vm.query[col.prop]">
                    <option value="">-</option>
                    <option value="true">True</option>
                    <option value="false">False</option>
                </select>
            </td>
            <td ng-if="vm.config.actions"></td>
        </tr>
        </tbody>
        <tbody>
        <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse track by $index">
            <td ng-repeat="col in vm.columns">
                <span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
                <span ng-if="col.type === 'boolean'">
                    <i class="fa"
                       ng-class="{'fa-ok': item[col.prop], 'fa-remove': !item[col.prop]}">
                    </i>
                  </span>
                <span ng-if="col.type === 'date'">
                    {{item[col.prop] | date:'H:mm MMM d, yyyy'}}
                  </span>
                <span ng-if="col.type === 'array'">
                    {{item[col.prop] | arrayToList}}
                  </span>
                <span ng-if="col.type === 'object'">
                    <dl class="dl-horizontal">
                      <span ng-repeat="(k,v) in item[col.prop]">
                        <dt>{{k}}</dt>
                        <dd>{{v}}</dd>
                      </span>
                    </dl>
                  </span>
                <span ng-if="col.type === 'custom'">
                    {{col.formatter(item)}}
                  </span>
                <span ng-if="col.type === 'icon'">
                    <i class="fa fa-{{col.formatter(item)}}">
                    </i>
                  </span>
            </td>
            <td ng-if="vm.config.actions">
                <a href=""
                   ng-repeat="action in vm.config.actions"
                   ng-click="action.cb(item)"
                   title="{{action.label}}">
                    <i
                            class="fa fa-{{action.icon}}"
                            style="color: {{action.color}};"></i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
<!--</div>-->
<!--<div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">-->
    <!--<xos-alert config="{type: 'info'}">-->
        <!--No data to show.-->
    <!--</xos-alert>-->
<!--</div>-->
<!--<div ng-show="vm.loader == true">-->
    <!--<div class="loader"></div>-->
<!--</div>-->