Cool, can actually browse the projects already.

frontend/src/js/component/wb-app.js

@@ -2,12 +2,16 @@ import { h, Component } from 'preact';
 import WBTabs from 'wb-tabs';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
+import WBProjectListing from 'wb-project-listing';
 
 class WBApp extends Component {
   render() {
     return (
       <div>
         <h1>WBApp</h1>
+        <WBProjectListing arvHost="api.arkau.roche.com"
+          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9" />
+        <WBPagination numPages={ 0 } activePage={ 0 } />
         <WBPagination numPages={ 100 } activePage={ 0 }
           onPageChanged={ idx => alert(idx) } />
         <WBTable

frontend/src/js/component/wb-project-listing.js

@@ -1,20 +1,63 @@
 import { h, Component } from 'preact';
 import makeArvadosRequest from 'make-arvados-request';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
 
 class WBProjectListing extends Component {
 
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+    this.state.numPages = 0;
+    this.state.activePage = 0;
+  }
+
   componentDidMount() {
+    this.setActivePage(0);
+  }
+
+  prepareRows(items) {
+    return items.map(item => [
+      item['name'],
+      item['description'],
+      item['owner_uuid']
+    ]);
+  }
+
+  setActivePage(i) {
+    this.state.activePage = i;
     let filters = [
-      [ 'group_class', '=', 'project' ],
-      [ 'owner_uuid', '=', this.props.ownerUuid ]
+      [ 'group_class', '=', 'project' ]
     ];
-    let req = makeArvadosRequest(his.props.arvHost, this.props.arvToken,
-      '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)))
+    if (this.props.ownerUuid !== null)
+      filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
+    let prom = makeArvadosRequest(this.props.arvHost, this.props.arvToken,
+      '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
+      '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
+    prom = prom.then(xhr =>
+      this.setState({
+        'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
+        'rows': this.prepareRows(xhr.response['items'])
+      }));
   }
 
-  render({ arvHost, arvToken, ownerUuid }) {
+  render({ arvHost, arvToken, ownerUuid }, { rows, numPages, activePage }) {
     return (
-      <div>Project Listing</div>
+      <div>
+        <WBTable columns={ [ 'Name', 'Description', 'Owner' ] }
+          rows={ rows } />
+        <WBPagination numPages={ numPages }
+          activePage={ activePage }
+          onPageChanged={ i => this.setActivePage(i) } />
+      </div>
     );
   }
 }
+
+WBProjectListing.defaultProps = {
+  'itemsPerPage': 100,
+  'ownerUuid': null
+};
+
+export default WBProjectListing;

frontend/src/js/misc/make-arvados-request.js

@@ -1,5 +1,5 @@
 
-makeArvadosRequest(arvHost, arvToken, endpoint, method='GET', data=null,
+function makeArvadosRequest(arvHost, arvToken, endpoint, method='GET', data=null,
   contentType='application/json;charset=utf-8', responseType='json') {
 
   let xhr = new XMLHttpRequest();

frontend/src/js/widget/wb-pagination.js

@@ -6,16 +6,17 @@ class WBPagination extends Component {
 
     let begActChnk = activePage - Math.floor(chunkSize / 2);
     let endActChnk = activePage + Math.floor(chunkSize / 2) + 1;
-    for (let i = begActChnk; i < endActChnk; i++)
+    for (let i = Math.max(0, begActChnk); i < Math.min(numPages, endActChnk); i++)
       visible[i] = true;
 
-    for (let i = 0; i < chunkSize; i++)
+    for (let i = 0; i < Math.min(numPages, chunkSize); i++)
       visible[i] = true;
 
     for (let i = Math.max(numPages - chunkSize, 0); i < numPages; i++)
       visible[i] = true;
 
     visible = Object.keys(visible).map(n => Number(n));
+    visible.sort();
 
     let res = [];
     let prev = 0;
@@ -27,7 +28,8 @@ class WBPagination extends Component {
       </li>
     ));
 
-    for (let i in visible) {
+    for (let idx in visible) {
+      let i = visible[idx];
       if (i > prev + 1)
         res.push((
           <li class="page-item">