tabela - pesquisa por coluna

table.js

'use strict'

class XstTableCtrl {

    static get ERROR_MSG() { return 'Error on get data' }
    static get ROW_HEIGHT() { return 48 }

    static get $inject() {
        return ['$element', 'Restangular', '$mdToast', '$translate']
    }

    constructor($element, Restangular, $mdToast, $translate) {
        this.$element = $element
        this.Restangular = Restangular
        this.$mdToast = $mdToast
        this.$translate = $translate
    }

    $onInit() {
        this.query = {
            page: 1,
            limit: 5
        }

        this.columns = []

        this.options = Object.assign({
            //Default options
            dynamicResize: false
        }, this.options)

        if (this.options.dynamicResize) {
            this.calcHeight()
            $(window).resize(() => this.calcHeight())
        }

        if (this.parent) {
            this.parent.$XstTable = this
        }

        this.getList()

        this.mysrcColumns = ["displayName", "email"]
        this.search = {};
    }

    async getList() {
        try {
            if (this.endpoint) {
                this.data = (await this.Restangular.all(this.endpoint).getList()).plain()
                console.log(this.data)
            }
        } catch (error) {
            console.error(error)
            this.showMsg(XstTableCtrl.ERROR_MSG)
        }
    }

    addColumn(column) {
        this.columns.push(column)
    }

    showMsg(msg) {
        this.$mdToast.show(
            this.$mdToast.simple().textContent(msg).hideDelay(3000)
        )
    }

    get pageLabel() {
        return { page: this.$translate.instant('table.page'), of: this.$translate.instant('table.of') }
    }

    get contentHeight() {
        return this.$element.get(0).querySelector('md-card').offsetHeight
    }

    get paginationHeight() {
        return this.$element.find('.md-table-pagination').get(0).offsetHeight
    }

    get headHeight() {
        return this.$element.find('.md-head').get(0).offsetHeight
    }

    calcHeight() {
        setTimeout(() => {
            try {
                let maxSize = this.contentHeight - this.paginationHeight - this.headHeight
                this.query.limit = Math.floor(maxSize / XstTableCtrl.ROW_HEIGHT) || this.query.limit
            } catch (e) {
                console.error(e)
            }
        })
    }

}

xstTableModule.component("xstTable", {
    templateUrl: 'table.html',
    transclude: true,
    bindings: {
        options: "=?",
        endpoint: "@",
        orderby: "@",
        data: "<",
        parent: '<'
    },
    controller: XstTableCtrl,
    controllerAs: '$XstTable'
})

template.html

<md-card class="md-card">
    <md-toolbar class="md-table-toolbar md-default">
        <div class="md-toolbar-tools">
            <md-button class="md-icon-button" ng-click="loadStuff()">
                <md-icon>refresh</md-icon>
            </md-button>
            <md-button class="md-icon-button" ng-click="loadStuff()">
                <md-icon>add</md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-table-container>
        <table md-table>
            <thead md-head md-order="$XstTable.orderby">
                <tr md-row>
                    <th md-column md-order-by="{{col.attr}}" ng-repeat="col in $XstTable.columns">
                        <span>{{col.title}}</span>
                    </th>
                </tr>
                <tr md-row>
                    <th md-column ng-repeat="col in $XstTable.mysrcColumns  track by col">
                        <md-input-container>
                            <input type="text" ng-model="$XstTable.search[col]">
                        </md-input-container>
                    </th>
                    <th ng-if="pensarnacondicao..."></th>
                </tr>
            </thead>
            <tbody md-body>
                <tr md-row ng-repeat="$row in $XstTable.data | filter: $XstTable.search | orderBy: $XstTable.orderby | limitTo: $XstTable.query.limit : ($XstTable.query.page -1) * $XstTable.query.limit">
                    <td md-cell ng-repeat="col in $XstTable.columns">
                        <span ng-if="$row[col.attr]">
                            {{$row[col.attr]}}
                        </span>
                        <div ng-if="col.template" bind-html-compile="col.template"></div>
                    </td>
                </tr>
            </tbody>
        </table>
    </md-table-container>
    <md-table-pagination md-limit="$XstTable.query.limit" md-page="$XstTable.query.page" md-total="{{$XstTable.data.length}}"
        md-page-select="true" md-label="{{$XstTable.pageLabel}}"></md-table-pagination>

    <ng-transclude ng-hide="true"></ng-transclude>
</md-card>