OJET Table with Serverside data

gistfile1.txt

<link rel="stylesheet" href="../node_modules/@oracle/oraclejet/dist/css/alta/oj-alta-min.css"/>


<script type="text/javascript" src="../node_modules/requirejs/require.js"></script>
<script type="text/javascript" src="main.js"></script>

<oj-table data="[[datasource]]"
  columns='[[columns]]'
  row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_tmpl", true)]]'>
</oj-table>

<script type="text/html" id="row_tmpl">    
  <tr>
    <td data-bind="text:id"></td>
    <td data-bind="text:name"></td>
    <td data-bind="text:age"></td>
	</tr>
</script>


<script>
require(['ojs/ojcore', 'knockout',
'jerry/user', 'jerry/users',
'ojs/ojmodel', 'ojs/ojtable',
'ojs/ojcollectiontabledatasource',
'ojs/ojknockout', 'ojs/ojbutton'], function(oj, ko, User, Users) {
	function ViewModel() {
		var self = this;
		this.columns = [
			{"headerText": "Id", "field": "id", "sortable": "disabled"},
			{"headerText": "Name", "field": "name", "sortable": "disabled"},
			{"headerText": "Age", "field": "age", "sortable": "disabled"}
		];
		this.users = new Users();
		this.datasource = ko.observable();
		this.datasource(new oj.CollectionTableDataSource(this.users));

		this.users
			.fetch()
			.then(function(data){
				console.log(data);
			})
			.catch(function(error){
				console.log(error);
			})	
	}

	ko.applyBindings(new ViewModel());
});
</script>