JET 4.1.0 JSFiddle
Base fiddle with Oracle JET 4.1.0
by Paul Thaden
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<h1>Users List</h1>
<oj-table id="table"
aria-label="Departments Table" data='[[dataSource]]'
columns='[
{"headerText": "Username", "field": "username"},
{"headerText": "Name", "field": "name"},
{"headerText": "Company Name", "field": "company"},
{"headerText": "Email", "field": "email"},
{"headerText": "Phone", "field": "phone"}
]'>
</oj-table>
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'
], function(ko, oj, $) {
'use strict';
var ViewModel = function() {
var self = this;
self.data = ko.observableArray();
$.getJSON("https://jsonplaceholder.typicode.com/users").
then(function(users) {
$.each(users, function() {
self.data.push({
username: this.username,
name: this.name,
company: this.company.name,
email: this.email,
phone: this.phone
});
});
});
self.dataSource = new oj.ArrayTableDataSource(
self.data, {
idAttribute: 'username'
}
);
};
ko.applyBindings(new ViewModel());
});
//RequireJS configs (usually these come first in main.js, but they don't have to)
requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/knockout/knockout-3.4.0',
'jquery': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/jquery/jquery-3.1.1.min',
'jqueryui-amd': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/jquery/jqueryui-amd-1.12.0.min',
'ojs': '//static.oracle.com/cdn/jet/v4.1.0/default/js/min',
'ojL10n': '//static.oracle.com/cdn/jet/v4.1.0/default/js/ojL10n',
'ojtranslations': '//static.oracle.com/cdn/jet/v4.1.0/default/js/resources',
'text': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/require/text',
'promise': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/es6-promise/es6-promise.min',
'hammerjs': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/hammer/hammer-2.0.8.min',
'signals': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/js-signals/signals.min',
'ojdnd': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min',
'css': '//static.oracle.com/cdn/jet/v4.1.0/3rdparty/require-css/css.min',
'customElements':...