angular-dynamic-table/sample/modules/dynamic-table/dynamic-table.min.js

Dynamic table component for AngularJS applications

!function(){"user strict";function DynamicTableCtrl($filter,$element){function headerClicked(a){ctrl.reverseSort=!ctrl.reverseSort,ctrl.orderBy=a.field,ctrl.onHeaderClick({orderBy:ctrl.orderBy,reverseSort:ctrl.reverseSort})}function optionClicked(a,b){ctrl.onOptionClick({item:a,index:b})}function columnChanged(){ctrl.onColumnListChange({columnList:ctrl.columnList})}function isDisabled(a){if(0===ctrl.limitWidth)return!1;var b=$element[0].children[0].offsetWidth;return!a.visible&&b>ctrl.limitWidth}function evalElement(contentItem,column){var item=eval("contentItem."+column.field);return null===item?"":(column.nestedField&&(item=eval("contentItem."+column.nestedField)),column.isDateField&&(item=$filter("date")(item,"dd/MM/yy H:mm")),item.toString())}var ctrl=this;ctrl.headerClicked=headerClicked,ctrl.optionClicked=optionClicked,ctrl.columnChanged=columnChanged,ctrl.isDisabled=isDisabled,ctrl.evalElement=evalElement}angular.module("alpez.dynamictable",[]).component("dynamicTable",{bindings:{columnList:"<",contentList:"<",orderBy:"@",reverseSort:"<",limitWidth:"<",optionGlyphicon:"@",optionTitle:"@",onHeaderClick:"&",onColumnListChange:"&",onOptionClick:"&"},transclude:!0,controller:DynamicTableCtrl,template:'<table id="dynTab" class="table table-striped" style="font-size:smaller"><thead><tr><th class="list-header" style="text-align:center" ng-repeat="column in $ctrl.columnList | filter:{visible:true}"><a ng-if="column.sortableField!==false" href="" ng-click="$ctrl.headerClicked(column)">{{column.header}}  <span ng-show="$ctrl.orderBy === column.field"><span ng-hide="$ctrl.reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="$ctrl.reverseSort" class="glyphicon glyphicon-chevron-down"></span></span></a><span ng-if="column.sortableField===false" translate="">{{column.header}}</span></th><th uib-dropdown auto-close="outsideClick" style="text-align:center"><button type="button" class="btn btn-default btn-xs" uib-dropdown-toggle><span class="glyphicon glyphicon-eye-open" style="color:inherit"></span></button><ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown"><li ng-repeat="column in $ctrl.columnList" style="color:#000;font-weight: normal;"><label ng-click="$ctrl.columnChanged()" style="width:100%;font-size:small;font-weight:normal;margin:0;padding:2px 10px;text-align:left"><input type="checkbox" ng-model="column.visible" ng-disabled="$ctrl.isDisabled(column)">   {{column.header}}</label></li></ul></th></tr></thead><tbody><tr ng-repeat="contentItem in $ctrl.contentList"><td style="text-align:center" ng-repeat="column in $ctrl.columnList | filter:{visible:true}">{{$ctrl.evalElement(contentItem, column)}}</td><td class="options" style="font-size:medium;text-align:center"><a href="" title="{{$ctrl.optionTitle}}" ng-click="$ctrl.optionClicked(contentItem, $index)"><i class="{{$ctrl.optionGlyphicon}}"></i></a></td></tr></tbody></table>'}),DynamicTableCtrl.$inject=["$filter","$element"]}();