DHTMLX Docs & Samples Explorer

Initialization from HTML table

A table can be converted to the grid by dhtmlXGridFromTable command:

Convert table to grid
Column 1 Column 2
value 11 value 12
value 21 value 22
value 31 value 32
value 41 value 42
value 51 value 52

Automatic initialization.

Initialize automatically from table the class attribute of which is set to "dhtmlxGrid"

The initialization by a CSS class will work only for those tables that were on page at the moment of loading.

Column 1 Column 2
value 11 value 12
value 21 value 22
value 31 value 32
value 41 value 42
value 51 value 52
Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>        
<script  src="../../codebase/dhtmlxgridcell.js"></script>    
<script  src="../../codebase/ext/dhtmlxgrid_start.js"></script>
<script>
dhtmlx.skin = "dhx_skyblue";
</script> <div><a href="javascript:void(0)" onClick="new dhtmlXGridFromTable('tblToGrid');this.style.display='none';">Convert table to grid</a></div> <table id="tblToGrid" name="grid1" gridHeight="auto" style="width:400px" imgpath="../../codebase/imgs/" border="1" lightnavigation="true"> <tr> <td type="ro">Column 1</td> <td>Column 2</td> </tr> <tr> <td>value 11</td> <td>value 12</td> </tr> <tr> <td>value 21</td> <td>value 22</td> </tr> <tr> <td>value 31</td> <td>value 32</td> </tr> <tr> <td>value 41</td> <td>value 42</td> </tr> <tr> <td>value 51</td> <td>value 52</td> </tr> </table> <br> <table class="dhtmlxGrid" gridHeight="auto" name="grid2" imgpath="../../codebase/imgs/" style="width:400px" lightnavigation="true"> <tr> <td type="ro">Column 1</td> <td>Column 2</td> </tr> <tr> <td>value 11</td> <td>value 12</td> </tr> <tr> <td>value 21</td> <td>value 22</td> </tr> <tr> <td>value 31</td> <td>value 32</td> </tr> <tr> <td>value 41</td> <td>value 42</td> </tr> <tr> <td>value 51</td> <td>value 52</td> </tr> </table>