Dynamic Columns with Pagination

Setting columns in an ojTable with dynamic data

by peppertech

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<h1>Users List</h1>

<table data-bind="ojComponent: {component: 'ojTable', 
            data: pagingDatasource,
            columns: dynamicCols}">
</table>
<div id="paging" data-bind="ojComponent: {component: 'ojPagingControl', data: pagingDatasource, pageSize: 5}">

CSS

@import url('//static.oracle.com/cdn/jet/v3.2.0/default/css/alta/oj-alta-min.css');

JavaScript

require(['knockout',
  'ojs/ojcore',
  'jquery',
  'ojs/ojknockout',
  'ojs/ojtable',
  'ojs/ojarraytabledatasource', 
  'ojs/ojpagingcontrol', 
  'ojs/ojpagingtabledatasource'
], function(ko, oj, $) {
  'use strict';

  var ViewModel = function() {
    var self = this;
    self.pagingDatasource = ko.observable();
    self.dynamicCols = ko.observableArray([]);

    function getUrl() {
      var url = "https://apex.oracle.com/pls/apex/oraclejet/emp/";
//      var url = "https://apex.oracle.com/pls/apex/oraclejet/m/emp/";
      return url;
    }
    
    self.getCols = function () {
      var url = getUrl();
      $.getJSON(url).then(function (data) {
        var tempCols = [];
        for (var property in data.items[0]) {
          if (data.items[0].hasOwnProperty(property)) {
            tempCols.push({headerText: property, field: property});
          }
        }
        self.dynamicCols(tempCols);
        self.pagingDatasource(new oj.PagingTableDataSource(new oj.ArrayTableDataSource(data.items, {idAttribute: 'empno'})));
      })
      .fail(function(req, status, error) { alert('getJSON failed: ' + status); })
    }
    
    self.getCols();

  };
  
  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/v3.2.0/3rdparty/knockout/knockout-3.4.0',
    'jquery': '//static.oracle.com/cdn/jet/v3.2.0/3rdparty/jquery/jquery-3.1.1.min',
    "jqueryui-amd": "//static.oracle.com/cdn/jet/v3.2.0/3rdparty/jquery/jqueryui-amd-1.12.0.min",
    "promise": "//static.oracle.com/cdn/jet/v3.2.0/3rdparty/es6-promise/es6-promise.min",
    "hammerjs": "//static.oracle.com/cdn/jet/v3.2.0/3rdparty/hammer/hammer-2.0.8.min",
    "ojdnd": "//static.oracle.com/cdn/jet/v3.2.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min",
    "ojs": "//static.oracle.com/cdn/jet/v3.2.0/default/js/debug/",
    "ojL10n":...