var table = fattable({
  "painter": painter,    // your painter (see below)
  "model": model,          // model describing your data (see below)
  "nbRows": 1000000,     // overall number of rows
  "rowHeight": 35,       // constant row height (px)
  "headerHeight": 100,   // height of the header (px)
  "columnWidths": [300, 300, 300, 300] // array of column width (px) 
})  

var painter = {
    
    "setupHeader": function(headerDiv) {
        /* Setup method are called at the creation
           of the column header. That is during
           initialization and for all window resize
           event. Columns are recycled. */
    }
,
    "setupCell": function(cellDiv) {
        /* The cell painter tells how 
           to fill, and style cells.
           Do not set height or width.
           in either fill and setup methods. */
    }
,
    "fillHeader": function(headerDiv, data) {
        /* Fills and style a column div.
           Data is whatever the datalayer
           is returning. A String, or a more
           elaborate object. */
        colHeaderDiv.textContent = data;
    }
,
    "fillCell": function(cellDiv, data) {
        /* Fills and style a cell div.
           Data is whatever the datalayer
           is returning. A String, or a more
           elaborate object. */
        cellDiv.textContent = data;
    }
,
    "fillHeaderPending": function(headerDiv) {
        /* Mark a column header as pending.
           When using an asynchronous.
           Its content is not in cache
           and needs to be fetched */
        cellDiv.textContent = "NA";
    }
,
    "fillCellPending": function(cellDiv) {
        /* Mark a cell content as pending
           Its content is not in cache and 
           needs to be fetched */
        cellDiv.textContent = "NA";
    }
};

{
  "getCellSync": function(i,j) {
    return "cell " + i + "," + j;
  },
  "getHeaderSync": function(i,j) {
    return "col " + j;
  }
}

{
  "cellPageName": function(i,j) {
      // returns a string which stands for the id of 
      // the page the cell (i,j) belongs to.
      var I = (i / 128) | 0;
      var J = (j / 29) | 0;
      return JSON.stringify([I,J]);
  },
  "fetchCellPage": function(pageName, cb) {
      // Async method to return the page of 
      var coords = JSON.parse(pageName);
      var I = coords[0];
      var J = coords[1];
      getJSON("data/page-" + I + "-" + J + ".json", function(data) {
          cb(function(i,j) {
              return {
                  rowId: i,
                  content: data[i-I*128][j-J*29]
              };
          });
      });
  },
  "headerCellPage" : function(j) {
   // Same as for cellPageName but for cells.
  },
  "fetchHeaderPage" : function(j) {
    // Same as for fetchCellPage but for headers
  }
}

{
  hasCell: function(i,j) {
    // returns true if getting the data of the cell (i,j )
    // does not require an async call false if it does need it.
  },
  hasHeader: function(j) {
    // ... same thing for column header j
  },
  getCell: function(i,j,cb) {
      // fetch data associated to cell i,j 
      // and call the callback method cb with it
      // as argument
  },
  getHeader: function(j,cb) {
      // ... same thing for column header j
  }
}