Tabulator中autoColumnsDefinitions函数未生效，无法渲染HTML及添加表头过滤器

环境配置 #

• Bootstrap 5
• Tabulator 5.4.4（搭配tabulator_bootstrap5.css）
• macOS Ventura系统下的Brave浏览器

需求 #

默认将所有单元格视为HTML内容处理

尝试方案 #

使用autoColumnsDefinitions函数将所有单元格格式化为HTML单元格，参考Tabulator官方文档的自动列配置章节。

预期效果 #

• HTML链接和格式能正确渲染
• 表头过滤器可正常使用

实际结果 #

• HTML代码被转义后直接显示
• 无表头过滤器
• autoColumnsDefinitions函数代码似乎从未执行

错误信息 #

• 无

HTML 表格代码 #

<table class="table table-hover table-sm" id="table-1">
    <thead class="thead-light">
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Type</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="/some/path/">Row 1</a></td>
            <td>plain</td>
            <td><i>running</i></td>
        </tr>
        <tr>
            <td><a href="/some/path/">Row 2</a></td>
            <td>nice</td>
            <td><b>walking</b></td>
        </tr>
    </tbody>
</table>

Tabulator 配置代码 #

var tableOne = new Tabulator("#table-1", {
    autoColumns: true,
    autoColumnsDefinitions: function(definitions) {
        //definitions - array of column definition objects
        definitions.forEach((column) => {
            column.headerFilter = true; // add header filter to every column
            column.formatter = "html";
        });
        return definitions;
    },
});

渲染结果 #

问题根源：直接从已有HTML表格初始化Tabulator时，autoColumns和autoColumnsDefinitions不会触发。这两个配置仅针对JSON/数组类型的数据源，用于自动生成列结构；而从DOM表格初始化时，Tabulator会直接读取DOM中的表头和单元格内容，不走自动列定义的逻辑。

提供两种可行解决方式：

方式一：手动定义列配置 #

直接指定每个列的格式和过滤器，同时开启从DOM加载数据：

var tableOne = new Tabulator("#table-1", {
    columns: [
        { title: "Name", field: "Name", formatter: "html", headerFilter: true },
        { title: "Type", field: "Type", formatter: "html", headerFilter: true },
        { title: "Status", field: "Status", formatter: "html", headerFilter: true },
    ],
    dataFromDOM: true, // 从原DOM表格加载数据
});

方式二：先提取DOM数据为数组，再用自动列配置 #

先把原HTML表格的内容转换成数组格式，再让Tabulator基于这个数组使用自动列配置，确保autoColumnsDefinitions生效：

// 提取DOM表格数据为数组
const tableData = [];
document.querySelectorAll("#table-1 tbody tr").forEach(tr => {
    const row = {};
    tr.querySelectorAll("td").forEach((td, index) => {
        const headerText = document.querySelectorAll("#table-1 thead th")[index].textContent.trim();
        row[headerText] = td.innerHTML; // 保留单元格的HTML内容
    });
    tableData.push(row);
});

// 初始化Tabulator
var tableOne = new Tabulator("#table-1", {
    data: tableData,
    autoColumns: true,
    autoColumnsDefinitions: function(definitions) {
        definitions.forEach(column => {
            column.headerFilter = true;
            column.formatter = "html";
        });
        return definitions;
    },
});

两种方式都能实现HTML内容正确渲染、表头过滤器生效的需求，可根据实际场景选择。

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