<html ng-app="demo">
<head>
<link rel="stylesheet" href="angular-table.css" />
<link rel="stylesheet" href="demo.css" />
</head>
<body ng-controller="demoController">
<angular-table model="listOfNumbers" default-sort-column="id" class="demoTable" style="padding-bottom: 1px;">
<header-row>
<header-column sortable="true" sort-field-name="id" class="demoHeaderColumn">
<div class="demoHeaderText">Id</div>
<sort-arrow-ascending></sort-arrow-ascending>
<sort-arrow-descending></sort-arrow-descending>
</header-column>
<header-column sortable="false" sort-field-name="name" class="demoHeaderColumn">Name</header-column>
<header-column sortable="true" sort-field-name="street" class="demoHeaderColumn">
<div class="demoHeaderText">Street</div>
<sort-arrow-ascending></sort-arrow-ascending>
<sort-arrow-descending></sort-arrow-descending>
</header-column>
</header-row>
<row on-selected="handleRowSelection(row)" selected-color="#87cefa" even-color="#ffffff" odd-color="#eeeeee">
<column>{{ row.id }}</column>
<column>{{ row.name }}</column>
<column>{{ row.street }}</input></column>
</row>
</angular-table>
<div class="demoDetailPane">
<div class="demoDetailInnerPane">
<p>Id: {{ selectedRow.id }}</p>
<p>Name: <input type="text" ng-model="selectedRow.name"></input></p>
<p>Street: <input type="text" ng-model="selectedRow.street"></input></p>
<p><button ng-click="addRows(1)">Add Row To End</button></p>
<p><button ng-click="listOfNumbers.pop()">Remove Last Row</button></p>
<p><button ng-click="listOfNumbers = []">Remove All Rows</button></p>
<p><button ng-click="addRows(50)">Add 50 Rows</button></p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="angular-table.min.js"></script>
<script src="demo.js"></script>
</body>
</html>
body {
font-family: arial;
margin: 0;
}
.demoTable {
float: left;
margin: 0;
vertical-align: top;
height: 70%;
width: 70%;
border-bottom: 1px solid black;
}
.demoDetailPane {
float: left;
border: 1px solid black;
margin: 0;
width: 20%;
height: 70%;
background-color: #87cefa;
vertical-align: top;
}
.demoDetailInnerPane {
padding: 5px;
}
.demoRow {
font-size: 16px;
}
.demoHeaderColumn {
background-color: #cccccc;
border-bottom: 0;
}
.demoFarRightHeaderColumn {
background-color: #cccccc;
border-bottom: 0;
border-right: 0;
}
.demoHeaderText {
display: inline-block;
}
.demoFarRightColumn {
border-right: 0;
}
.angularTableColumn {
padding: 5px;
border-bottom: 0;
}
.angularTableContainer {
width: 100%;
}
.angularTableHeaderTableContainer {
width: 100%;
}
.angularTableTableContainer {
height: 100%;
width: 100%;
overflow-y: auto;
}
.angularTableHeaderTable {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
.angularTableTable {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
.angularTableHeaderRow {
}
.angularTableRow {
cursor: pointer;
}
.angularTableHeaderColumn {
padding: 5px;
border: 1px solid black;
cursor: pointer;
}
.angularTableColumn {
padding: 5px;
border: 1px solid black;
}
.angularTableDefaultSortArrowAscending {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
display: inline-block;
vertical-align: middle;
}
.angularTableDefaultSortArrowDescending {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
display: inline-block;
vertical-align: middle;
}
angular.module("angular-table",[]).directive("angularTable",["ScrollingContainerHeightState","JqLiteExtension","SortState","ResizeHeightEvent","TemplateStaticState","Instrumentation",function(f,a,c,b,d,g){return{restrict:"E",compile:function(a,h){c.sortExpression=h.defaultSortColumn;d.instrumentationEnabled=h.instrumentationEnabled;a.addClass("angularTableContainer");var j=a[0].outerHTML.replace("<angular-table","<div"),j=j.replace("</angular-table>","</div>");a.replaceWith(j);return function(a,c){a.ResizeHeightEvent=
b;var e=function(){f.outerContainerComputedHeight=c[0].clientHeight;g.log("angularTable","outer container computed height measured",f.outerContainerComputedHeight)};a.$watch("ResizeHeightEvent",function(){e()},!0);e()}},scope:{model:"="}}}]).directive("headerRow",["ManualCompiler","ScrollingContainerHeightState","JqLiteExtension","SortState","ResizeHeightEvent","ResizeWidthEvent","Instrumentation",function(f,a,c,b,d,g,e){return{restrict:"E",controller:["$scope","$parse",function(a){a.SortState=b;
a.setSortExpression=function(a){b.sortExpression=a;b.sortDirectionToColumnMap[b.sortExpression]=!b.sortDirectionToColumnMap[b.sortExpression]}}],compile:function(a,b){f.compileRow(a,b,!0);return function(a,b){a.ResizeHeightEvent=d;a.ResizeWidthEvent=g;a.$watch("ResizeWidthEvent",function(){var a=c.getComputedWidthAsFloat(b.next()[0]);b.css("width",a+"px");e.log("headerRow","header width set",a+"px")},!0)}}}}]).directive("row",["ManualCompiler","ResizeHeightEvent","$window","Debounce","TemplateStaticState",
"RowState","SortState","ScrollingContainerHeightState","JqLiteExtension","Instrumentation","ResizeWidthEvent",function(f,a,c,b,d,g,e,h,j,l,k){return{restrict:"E",controller:["$scope",function(a){a.sortExpression=e.sortExpression;a.handleClick=function(b,c,e){c=c.replace("(row)","");"undefined"!==e&&(g.previouslySelectedRow.rowSelected=!1,b.rowSelected=!0,g.previouslySelectedRow=b);if("undefined"!==c)a.$parent[c](b)};a.getRowColor=function(a,b){return b.rowSelected?d.selectedRowColor:0===a%2?d.evenRowColor:
d.oddRowColor}}],compile:function(d,m){g.rowSelectedBackgroundColor=m.selectedColor;f.compileRow(d,m,!1);return function(d,f){d.ScrollingContainerHeightState=h;d.SortState=e;angular.element(c).bind("resize",b.debounce(function(){d.$apply(function(){a.fireTrigger=!a.fireTrigger;k.fireTrigger=!k.fireTrigger;l.log("row","debounced window resize triggered")})},50));d.$watch("ResizeHeightEvent",function(){var a=j.getComputedHeightAsFloat(f.parent()[0]),b=j.getComputedHeightAsFloat(angular.element(f.parent().children()[0])[0]),
a=a-b;f.css("height",a+"px");l.log("row","scrolling container height set",a+"px")},!0);d.$watch("SortState",function(){f[0].scrollTop=0},!0);d.$watch("model",function(){a.fireTrigger=!a.fireTrigger;k.fireTrigger=!k.fireTrigger},!0)}}}}]).service("Debounce",function(){this.debounce=function(f,a,c){var b,d;return function(){var g=this,e=arguments,h=c&&!b;clearTimeout(b);b=setTimeout(function(){b=null;c||(d=f.apply(g,e))},a);h&&(d=f.apply(g,e));return d}};return this}).service("JqLiteExtension",["$window",
function(f){var a=this;a.getComputedPropertyAsFloat=function(a,b){var d=f.getComputedStyle(a).getPropertyValue(b).replace("px","");return parseFloat(d)};a.getComputedWidthAsFloat=function(c){return a.getComputedPropertyAsFloat(c,"width")};a.getComputedHeightAsFloat=function(c){return a.getComputedPropertyAsFloat(c,"height")};return a}]).service("ManualCompiler",["TemplateStaticState",function(f){this.compileRow=function(a,c,b){var d="",g="";b&&(d="Header",g="header-");a.addClass("angularTable"+d+
"Row");a.children().addClass("angularTable"+d+"Column");b&&angular.forEach(a.children(),function(a){"true"===angular.element(a).attr("sortable")&&(angular.element(a).find("sort-arrow-descending").attr("ng-show","SortState.sortExpression == '"+angular.element(a).attr("sort-field-name")+"' && !SortState.sortDirectionToColumnMap['"+angular.element(a).attr("sort-field-name")+"']").addClass("angularTableDefaultSortArrowAscending"),angular.element(a).find("sort-arrow-ascending").attr("ng-show","SortState.sortExpression == '"+
angular.element(a).attr("sort-field-name")+"' && SortState.sortDirectionToColumnMap['"+angular.element(a).attr("sort-field-name")+"']").addClass("angularTableDefaultSortArrowDescending"),angular.element(a).attr("ng-click","setSortExpression('"+angular.element(a).attr("sort-field-name")+"')"),angular.element(a).removeAttr("sort-field-name"))});if(b)var e=a[0].outerHTML.replace("<header-row","<tr"),e=e.replace("/header-row>","/tr>");else e=a[0].outerHTML.replace("<row","<tr"),e=e.replace("/row>","/tr>");
e=e.replace(RegExp(g+"column","g"),"td");if(b)e=e.replace(/sort-arrow-descending/g,"div"),e=e.replace(/sort-arrow-ascending/g,"div");else{b="";f.selectedRowColor=c.selectedColor;f.evenRowColor=c.evenColor;f.oddRowColor=c.oddColor;if("undefined"!==typeof c.selectedColor||"undefined"!==typeof c.evenColor||"undefined"!==typeof c.oddColor)b='ng-style="{ backgroundColor: getRowColor($index, row) }"';e=e.replace("<tr",'<tr ng-repeat="row in model | orderBy:SortState.sortExpression:SortState.sortDirectionToColumnMap[SortState.sortExpression]" '+
b+" ng-click=\"handleClick(row, '"+c.onSelected+"', '"+c.selectedColor+"')\" ")}a.replaceWith('<div class="angularTable'+d+'TableContainer"><table class="angularTable'+d+'Table">'+e+"</table></div>")}}]).service("ResizeHeightEvent",function(){this.fireTrigger=!1;return this}).service("ResizeWidthEvent",function(){this.fireTrigger=!1;return this}).service("ScrollingContainerHeightState",function(){this.headerComputedHeight=this.outerContainerComputedHeight=0;return this}).service("TemplateStaticState",
function(){this.oddRowColor=this.evenRowColor=this.selectedRowColor="";return this}).service("RowState",function(){this.previouslySelectedRow={};this.previouslySelectedRowColor="";return this}).service("SortState",function(){this.sortExpression="";this.sortDirectionToColumnMap={};return this}).service("Instrumentation",["TemplateStaticState","$log",function(f,a){this.log=function(c,b,d){f.instrumentationEnabled&&(a.log("Source: "+c),a.log("Event: "+b),a.log("Value: "+d),a.log("------------------------\n"))};
return this}]);
angular.module('demo', ['angular-table'])
.controller('demoController', ['$scope', function($scope) {
$scope.selectedRow = {};
$scope.listOfNumbers = [];
$scope.addRows = function(numberOfRowsToAdd) {
var startIndex = $scope.listOfNumbers.length;
var endIndex = $scope.listOfNumbers.length + numberOfRowsToAdd;
for(var i = startIndex; i < endIndex; i++) {
$scope.listOfNumbers.push({
id: i,
name: 'name ' + i,
street: 'street ' + i
});
}
};
$scope.handleRowSelection = function(row) {
$scope.selectedRow = row;
};
$scope.addRows(50);
}]);