TableView

As the name suggests, TableView renders table with data. In most basic example, you can just pass an array of objects to the constructor to display. Each property of a object becomes a header.

function main(arg)
{
  var tableView = new TableView(
    [{id:1, name:'John'},
     {id:2, name:'Steve'},
     {id:3, name:'Adam'}]
  ); 
  return [tableView];
}
main(arg);

TableView - Displaying srray of objects

By default, TableView shows first 200 rows of an array. It can be changed with size parameter. In the example below, only 2 records out of 3 are displayed.

function main(arg)
{
  var tableView = new TableView(
  {
    size: 2,
    rows: [{id:1, name:'John'},
           {id:2, name:'Steve'},
           {id:3, name:'Adam'}]
    }); 
  return [tableView];
}
main(arg);

Next requirement is pagination. By default, the the next page button is always shown. The prevous page button is shown only when the current page is 2 or greater. When the next or previous button is clicked, a http get request is sent to a server and the p query string parameter is added to a url with the page number.

function main(arg)
{
   var page = arg.queryString.p ? parseInt(arg.queryString.p) : 1;
   var pageSize = 2;
   var begin = (page - 1) * pageSize;
   var end = begin + pageSize;
   
   var rows = [{id:1, name:'John'},
     	         {id:2, name:'Steve'},
               {id:3, name:'Adam'}];
 
 var tableView = new TableView(rows.slice(begin, end));
 return [tableView];
}
main(arg);

TableView - Paging

Additionally, previoustPage and nextPage properties can be used to control visibility of the next and previous button.

function main(arg)
{
   var tableView = new TableView(
   {
     previoustPage: true,
     nextPage: true,
   });
 return [tableView];
}
main(arg);

TableView - Previous Next Buttons