JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<table id="pagerTable" data-bind="foreach: Tables">
    <tbody>
        <tr data-bind="foreach: $data">
            <!-- have to create table row for every 10 elements -->
            <td> <a data-bind="attr:{ 'id': $index }, text: $data "></a> 
            </td>
        </tr>
    </tbody>
</table>

JavaScript

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    
    this.Pages= ko.observableArray();
    this.Tables = ko.observableArray(); //TableModel(this.Pages());
    //console.log(this);
};
//Convert your table to Chunk of Arrays
function TableModel(pages) {

    var longArray = pages;
    var smallerArrays = []; // will contain the sub-arrays of 10 elements each
    var arraySize = 10;
    for (var i = 0; i < Math.ceil(longArray.length / arraySize); i++) {
        smallerArrays.push(longArray.slice(i * arraySize, i * arraySize + arraySize));
    }
    return smallerArrays;
};

var AppViewModelVM;

$(document).ready(function(){
  
    AppViewModelVM= new AppViewModel();
    for(var i=0; i<23; i++)
    {
        AppViewModelVM.Pages.push(i);
    }
   
    var testArr= TableModel(AppViewModelVM.Pages());
    
    AppViewModelVM.Tables(testArr);
     alert("test: "+ AppViewModelVM.Tables()[2]);
    // Activates knockout.js
    ko.applyBindings(AppViewModelVM);

});