title: Google App Maker: How to add pagination and sorting to a table widget bound to a calculated datasource?
body: <p>I have "Calculated" model called "Groups" in which I have added the following server script to load the google groups that are part of my domain and display them in a table widget when the user lands on the page. The data displays fine on the first page, but when I click to see the next page, I see the same subset of records and clicking the headers to sort the table does not work either. I'd appreciate some guidance here.</p>
  
  <p>Calculated Model Server script:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var groupList = [];  
  var pageToken;
   var page;
    do {
      page = AdminDirectory.Groups.list({
        customer: 'my_customer',
        maxResults: 5,
        pageToken: pageToken
      });
  
      var groups = page.groups;
      if (groups) {
        for (var i = 0; i &lt; groups.length; i++) {
          var group = groups[i];
          var record = app.models.Groups.newRecord();
          
          record.id = group.id;
          record.name = group.name;
          record.email = group.email;
          record.directMembersCount = group.directMembersCount;
          
          groupList.push(record);
                 
        }
      } else {
        console.log('No groups found.');
      }
      pageToken = page.nextPageToken;
      } while (pageToken);
  return groupList;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've configured the model the following way:
  <a href="https://i.stack.imgur.com/qVT0b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qVT0b.png" alt="enter image description here"></a></p>