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>