iamisti/md-data-table

<div class="filter-dropdown">
    <div class="md-whiteframe-z2">
        <md-content class="md-body-1">
            <div layout="row" layout-align="end center" class="b-b p-smd md-caption" ng-if="::headerRowData.columnSort.isEnabled">
                <a href="#" ng-click="sortingCallback($event, sortingData)">Sort A-Z <mdt-sorting-icons size="20" data="sortingData" class="p-l-sm"></mdt-sorting-icons></a>
            </div>

            <div class="p-md filter__scroll">
                <md-chips ng-model="selectedItems"
                          md-require-match="true">

                    <md-autocomplete md-delay="300"
                                     md-autofocus="true"
                                     md-search-text="searchText"
                                     md-items="item in headerRowData.columnFilter.valuesProviderCallback(searchText)"
                                     md-item-text="transformChip(item)"
                                     placeholder="{{placeholderText}}">

                        <span md-highlight-text="searchText">{{transformChip(item)}}</span>

                        <md-not-found>
                            No results found.
                        </md-not-found>
                    </md-autocomplete>

                    <md-chip-template>
                        <span>
                          <strong>{{transformChip($chip)}}</strong>
                        </span>
                    </md-chip-template>

                </md-chips>
            </div>

            <div class="p-b-sm p-t-sm p-l-sm" layout="row" layout-align="start center">
                <md-button class="md-raised md-primary" ng-click="confirmCallback({selectedItems: selectedItems, sortingData: sortingData, event: $event})">Ok</md-button>
                <md-button class="md-raised" ng-click="cancelCallback({event: $event})">Cancel</md-button>
            </div>
        </md-content>
    </div>
</div>