Tabulator duplicated record when using grouping column header

I use the example from the website to test the column group but it will duplicate the row record is tabulator does not support col group with HTML element ? Once I remove the col group , it will become normal thank you The test result image

My code:

   <table id="example-table">
   <thead>
        <tr>
            <th >Name</th>
            <th >Age</th>
            <th>Gender</th>
            <th>Height</th>
            <th>Driver</th>
            <th>favouritecolor</th>
            <th>dob</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Billy Bob</td>
            <td>12</td>
            <td>male</td>
            <td>1</td>
            <td>yesdrive</td>
            <td>red</td>
            <td>22/04/1994</td>
        </tr>
        <tr>
            <td>Mary May</td>
            <td>1</td>
            <td>female</td>
            <td>2</td>
            <td>yesdrive</td>
            <td>blue</td>
            <td>14/05/1982</td>
        </tr>
    </tbody>
</table>

<script>
var table = new Tabulator("#example-table", {
    columnHeaderVertAlign:"bottom", //align header contents to bottom of cell

    columns:[
    {title:"Name", field:"name", width:160},
    {//create column group
        title:"Work Info",
        columns:[
        {title:"Age", field:"age"},
        {title:"Height", field:"height"},
        {title:"Driver", field:"driver"},
        ],
    },
    {//create column group
        title:"Personal Info",
        columns:[
        {title:"Gender", field:"gender"},
        {title:"favouritecolor", field:"favouritecolor"},
        {title:"dob", field:"dob"},
        ],
    },
    ],
});
 </script>