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>
Tabulator can only support importing simple HTML Tables, as the documentation states:
Note: Tabulator can only parse simple tables. Tables using multiple header rows, colspan or rowspan attributes will cause the import to fail.
That being said you can easily add column groups to a Tabulator, you just need to define your table setup using a column definition object array instead.
Full details of how to setup a tables column definition can b found in the Columns Documentation
An example of column groups in action can be found in the Column Groups Example