Tabulator使用分组列头时出现行记录重复问题咨询

Tabulator 完全支持搭配原生 HTML 表格元素使用列分组功能，你遇到的行重复问题是配置冲突导致的，冲突点如下：

• 你同时在 HTML 中定义了<thead>表头，又在 Tabulator 初始化参数中传入了自定义columns列配置。Tabulator 加载现有 HTML 表格时会默认读取原有表头的列定义，两套列定义叠加会导致列映射错误，触发行重复问题。
• 你当前 JS 中配置的列顺序和 HTML 每行<td>的顺序不匹配，即使移除表头也会出现数据错位的问题。

二选一即可，推荐第一种：

方案1：统一列定义入口 #

1. 删除 HTML 表格中的<thead>整段内容，所有列定义统一使用 JS 中的columns配置
2. 调整 HTML 每行<td>的顺序，和你columns中定义的列顺序完全对应，匹配你当前的列分组配置，每行<td>的顺序应该为：Name → Age → Height → Driver → Gender → favouritecolor → dob

方案2：禁止导入原有表头 #

如果需要保留 HTML 中的<thead>内容，可以在 Tabulator 初始化参数中添加importHeader: false配置，禁止 Tabulator 读取原有表头的列定义，同时调整 HTML 中<td>的顺序和自定义列的顺序保持一致。

<table id="example-table">
    <tbody>
        <tr>
            <td>Billy Bob</td>
            <td>12</td>
            <td>1</td>
            <td>yesdrive</td>
            <td>male</td>
            <td>red</td>
            <td>22/04/1994</td>
        </tr>
        <tr>
            <td>Mary May</td>
            <td>1</td>
            <td>2</td>
            <td>yesdrive</td>
            <td>female</td>
            <td>blue</td>
            <td>14/05/1982</td>
        </tr>
    </tbody>
</table>

var table = new Tabulator("#example-table", {
    columnHeaderVertAlign:"bottom",
    columns:[
        {title:"Name", field:"name", width:160},
        {
            title:"Work Info",
            columns:[
                {title:"Age", field:"age"},
                {title:"Height", field:"height"},
                {title:"Driver", field:"driver"},
            ],
        },
        {
            title:"Personal Info",
            columns:[
                {title:"Gender", field:"gender"},
                {title:"favouritecolor", field:"favouritecolor"},
                {title:"dob", field:"dob"},
            ],
        },
    ],
});

内容的提问来源于stack exchange，提问作者user2782396