This example demonstrates how to populate a grid from an HTML table. In this case, the table whose data is to be loaded into the grid has an id="ex1", and the table's body element is passed to the buffer constructor which then loads the data.

Rico.onLoad( function() {
  var opts = {
    frozenColumns: 1,
    defaultWidth : 90,
    useUnformattedColWidth: false,
    columnSpecs  : ['specQty']  // display first column as a numeric quantity
  var buffer=new Rico.Buffer.Base($('ex1').tBodies[0]);
  var ex1=new Rico.LiveGrid ('ex1', buffer, opts); Rico.GridMenu();


Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10Column 11Column 12Column 13Column 14Column 15
1Cell 1:2Cell 1:3Cell 1:4Cell 1:5Cell 1:6Cell 1:7Cell 1:8Cell 1:9Cell 1:10Cell 1:11Cell 1:12Cell 1:13Cell 1:14Cell 1:15
2Cell 2:2Cell 2:3Cell 2:4Cell 2:5Cell 2:6Cell 2:7Cell 2:8Cell 2:9Cell 2:10Cell 2:11Cell 2:12Cell 2:13Cell 2:14Cell 2:15
3Cell 3:2Cell 3:3Cell 3:4Cell 3:5Cell 3:6Cell 3:7Cell 3:8Cell 3:9Cell 3:10Cell 3:11Cell 3:12Cell 3:13Cell 3:14Cell 3:15
4Cell 4:2Cell 4:3Cell 4:4Cell 4:5Cell 4:6Cell 4:7Cell 4:8Cell 4:9Cell 4:10Cell 4:11Cell 4:12Cell 4:13Cell 4:14Cell 4:15
5Cell 5:2Cell 5:3Cell 5:4Cell 5:5Cell 5:6Cell 5:7Cell 5:8Cell 5:9Cell 5:10Cell 5:11Cell 5:12Cell 5:13Cell 5:14Cell 5:15
6Cell 6:2Cell 6:3Cell 6:4Cell 6:5Cell 6:6Cell 6:7Cell 6:8Cell 6:9Cell 6:10Cell 6:11Cell 6:12Cell 6:13Cell 6:14Cell 6:15
7Cell 7:2Cell 7:3Cell 7:4Cell 7:5Cell 7:6Cell 7:7Cell 7:8Cell 7:9Cell 7:10Cell 7:11Cell 7:12Cell 7:13Cell 7:14Cell 7:15
8Cell 8:2Cell 8:3Cell 8:4Cell 8:5Cell 8:6Cell 8:7Cell 8:8Cell 8:9Cell 8:10Cell 8:11Cell 8:12Cell 8:13Cell 8:14Cell 8:15
9Cell 9:2Cell 9:3Cell 9:4Cell 9:5Cell 9:6Cell 9:7Cell 9:8Cell 9:9Cell 9:10Cell 9:11Cell 9:12Cell 9:13Cell 9:14Cell 9:15
10Cell 10:2Cell 10:3Cell 10:4Cell 10:5Cell 10:6Cell 10:7Cell 10:8Cell 10:9Cell 10:10Cell 10:11Cell 10:12Cell 10:13Cell 10:14Cell 10:15