Documented field formatters
diff --git a/views/ngXosLib/xosHelpers/spec/ui/table.test.js b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
index 9550afa..52c8b6c 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/table.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
@@ -216,10 +216,10 @@
});
it('should render a list of key-values', () => {
let td = $(element).find('tbody tr:first-child')[0];
- let ageLabel = $(td).find('dl > dt')[0];
- let ageValue = $(td).find('dl > dd')[0];
- let heightLabel = $(td).find('dl > dt')[1];
- let heightValue = $(td).find('dl > dd')[1];
+ let ageLabel = $(td).find('dl dt')[0];
+ let ageValue = $(td).find('dl dd')[0];
+ let heightLabel = $(td).find('dl dt')[1];
+ let heightValue = $(td).find('dl dd')[1];
expect($(ageLabel).text().trim()).toEqual('age');
expect($(ageValue).text().trim()).toEqual('20');
expect($(heightLabel).text().trim()).toEqual('height');
@@ -238,7 +238,7 @@
label: 'Categories',
prop: 'categories',
type: 'custom',
- formatter: val => 'Formatted Content'
+ formatter: () => 'Formatted Content'
}
]
}
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
index c2fe85d..2d3a061 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
@@ -44,7 +44,8 @@
* @element ANY
* @scope
* @example
-
+
+ # Basic usage
<example module="sampleTable1">
<file name="index.html">
<div ng-controller="SampleCtrl1 as vm">
@@ -53,6 +54,9 @@
</file>
<file name="script.js">
angular.module('sampleTable1', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
.controller('SampleCtrl1', function(){
this.config = {
columns: [
@@ -80,7 +84,8 @@
});
</file>
</example>
-
+
+ # Filtering
<example module="sampleTable2" animations="true">
<file name="index.html">
<div ng-controller="SampleCtrl2 as vm">
@@ -89,6 +94,9 @@
</file>
<file name="script.js">
angular.module('sampleTable2', ['xos.uiComponents', 'ngAnimate'])
+ .factory('_', function($window){
+ return $window._;
+ })
.controller('SampleCtrl2', function(){
this.config = {
columns: [
@@ -129,7 +137,8 @@
});
</file>
</example>
-
+
+ # Pagination
<example module="sampleTable3">
<file name="index.html">
<div ng-controller="SampleCtrl3 as vm">
@@ -138,6 +147,9 @@
</file>
<file name="script.js">
angular.module('sampleTable3', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
.controller('SampleCtrl3', function(){
this.config = {
columns: [
@@ -176,6 +188,129 @@
});
</file>
</example>
+
+ # Field formatter
+ <example module="sampleTable4">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl as vm">
+ <xos-table data="vm.data" config="vm.config"></xos-table>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleTable4', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
+ .controller('SampleCtrl', function(){
+ this.config = {
+ columns: [
+ {
+ label: 'First Name',
+ prop: 'name'
+ },
+ {
+ label: 'Enabled',
+ prop: 'enabled',
+ type: 'boolean'
+ },
+ {
+ label: 'Services',
+ prop: 'services',
+ type: 'array'
+ },
+ {
+ label: 'Details',
+ prop: 'details',
+ type: 'object'
+ }
+ ]
+ };
+
+ this.data = [
+ {
+ name: 'John',
+ enabled: true,
+ services: ['Cdn', 'IpTv'],
+ details: {
+ c_tag: '243',
+ s_tag: '444'
+ }
+ },
+ {
+ name: 'Gili',
+ enabled: false,
+ services: ['Cdn', 'IpTv', 'Cache'],
+ details: {
+ c_tag: '675',
+ s_tag: '893'
+ }
+ }
+ ]
+ });
+ </file>
+ </example>
+
+ # Custom formatter
+ <example module="sampleTable5">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl as vm">
+ <xos-table data="vm.data" config="vm.config"></xos-table>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleTable5', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
+ .controller('SampleCtrl', function(){
+ this.config = {
+ columns: [
+ {
+ label: 'Username',
+ prop: 'username'
+ },
+ {
+ label: 'Features',
+ prop: 'features',
+ type: 'custom',
+ formatter: (val) => {
+
+ let cdnEnabled = val.cdn ? 'enabled' : 'disabled';
+ return `
+ Cdn is ${cdnEnabled},
+ uplink speed is ${val.uplink_speed}
+ and downlink speed is ${val.downlink_speed}
+ `;
+ }
+ }
+ ]
+ };
+
+ this.data = [
+ {
+ username: 'John',
+ features: {
+ "cdn": false,
+ "uplink_speed": 1000000000,
+ "downlink_speed": 1000000000,
+ "uverse": true,
+ "status": "enabled"
+ }
+ },
+ {
+ username: 'Gili',
+ features: {
+ "cdn": true,
+ "uplink_speed": 3000000000,
+ "downlink_speed": 2000000000,
+ "uverse": true,
+ "status": "enabled"
+ }
+ }
+ ]
+ });
+ </file>
+ </example>
**/
.directive('xosTable', function(){
@@ -241,9 +376,11 @@
{{item[col.prop] | arrayToList}}
</span>
<span ng-if="col.type === 'object'">
- <dl class="dl-horizontal" ng-repeat="(k,v) in item[col.prop]">
- <dt>{{k}}</dt>
- <dd>{{v}}</dd>
+ <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'">
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
index 46c4460..70399a9 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
@@ -23,4 +23,16 @@
opacity:1;
animation: 0.5s slideInRight ease-in-out;
}
+
+ td dl {
+ margin-bottom: 0;
+
+ dt {
+ width: 50px !important;
+ }
+
+ dd {
+ margin-left: 60px !important;
+ }
+ }
}
\ No newline at end of file