JET 4.1.0 JSFiddle
Base fiddle with Oracle JET 4.1.0 using CDN
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<h1>Users List</h1>
<span>This demo will not run in Internet Explorer 11 because of the use of the HTML5 template element.</span>
<br/><br/>
<oj-table id='table' aria-label='Departments Table'
data='[[dataSource]]'
columns-default.sortable='disabled'
columns='[
{"headerText": "Username", "field": "ename"},
{"headerText": "Title", "field": "job"},
{"headerText": "Hire Date", "field": "hiredate"},
{"headerText": "Salary", "field": "sal"}
]'
row-renderer="[[oj.KnockoutTemplateUtils.getRenderer('row_template', true)]]">
</oj-table>
<template id="row_template">
<tr>
<td>
<oj-bind-text value="[[empno]]"></oj-bind-text>
</td>
<td>
<oj-bind-text value="[[ename]]"></oj-bind-text>
</td>
<td>
<oj-bind-text value="[[job]]"></oj-bind-text>
</td>
<td>
<oj-bind-text value="[[$parent.formatDate(hiredate)]]"></oj-bind-text>
</td>
<td>
<oj-bind-text value="[[$parent.formatSal(sal)]]"></oj-bind-text>
</td>
</tr>
</template>
CSS
@import url('//static.oracle.com/cdn/jet/v4.1.0/default/css/alta/oj-alta-min.css');
JavaScript
require(['knockout',
'ojs/ojcore',
'jquery',
'ojs/ojknockout',
'ojs/ojtable',
'ojs/ojarraytabledatasource',
'ojs/ojvalidation-datetime',
'ojs/ojvalidation-number'
], function(ko, oj, $) {
'use strict';
var ViewModel = function() {
var self = this;
// for salary fields
var salOptions = {style: 'currency', currency: 'USD'};
var salaryConverter = oj.Validation.converterFactory("number").createConverter(salOptions);
// for date fields
var dateOptions = {formatStyle: 'date', dateFormat: 'medium'};
var dateConverter = oj.Validation.converterFactory("datetime").createConverter(dateOptions);
self.formatSal = function(data){
return salaryConverter.format(data);
};
self.formatDate = function(data){
return dateConverter.format(data);
};
self.data = ko.observableArray();
$.getJSON("https://apex.oracle.com/pls/apex/oraclejet/emp/").
then(function(users) {
var tempArray = [];
$.each(users.items, function() {
tempArray.push({
empno: this.empno,
ename: this.ename,
job: this.job,
hiredate: this.hiredate,
sal: this.sal
});
});
self.data(tempArray);
});
self.dataSource = new oj.ArrayTableDataSource(
self.data, {
idAttribute: 'empno'
}
);
};
ko.applyBindings(new ViewModel());
});
function _getCDNPath(paths) {
var cdnPath = "https://static.oracle.com/cdn/jet/";
var ojPath = "v4.1.0/default/js/";
var thirdpartyPath = "v4.1.0/3rdparty/";
var keys = Object.keys(paths);
var newPaths = {};
function _isoj(key) {
return (key.indexOf('oj') === 0 && key !== 'ojdnd');
}
keys.forEach(function(key) {
newPaths[key] = cdnPath + (_isoj(key) ? ojPath : thirdpartyPath) + paths[key];
});
return newPaths;
}
requirejs.config({
paths: _getCDNPath({
'knockout': 'knockout/knockout-3.4.0',
'jquery':...