Recently I am looking for some JavaScript grid components to use. Preferably to work like Excel or Calc in OpenOffice.org.

Googling tells about a product called dhtmlxGrid, which has the version 1.4 release one week ago. I downloaded, but the documentation sucks. Hence I wrote my own below.

The site said it is distributed in GPL. However, I found some Yahoo! produced code inside which said it is in BSD. They are not compatible, however!

But I just use it anyway, un-seriously.

## Initialization

The simplest case of use is as follows:

<script type="text/javascript" src="js/dhtmlXCommon.js"></script>
<script type="text/javascript" src="js/dhtmlXGrid.js"></script>
<script type="text/javascript" src="js/dhtmlXGridCell.js"></script>

<div id="gridbox"></div>
<script>
<!--
// Note: Must set the height
document.getElementById('gridbox').style.height = "600px";
// Create the grid
var mygrid = new dhtmlXGridObject('gridbox');
// Columns' width
mygrid.setInitWidths("100px,100px,100px,100px,100px,100px");

Which will show the grid on the DIV with id grid. The height is essential because it controls how many rows to display. If not specified, only the column headers will be shown!
The column headers is essential because it counts how many columns to display. The loadXML() function can actually pass on a very big table but only the first few columns are shown. If the headers are not specified, no columns will be displayed and hence you get a null grid.