如何使用Tabulator JS将嵌套数组作为可搜索列正常展示？

问题背景 #

给定如下JSON数据，需要用Tabulator JS生成类似图1的表格（嵌套数组作为普通列展示），但误用dataTree相关配置后生成了树形结构的图2效果，现需正确实现方案：

[
  {
    id: 1,
    name: "john",
    phone_numbers: [
      {title: "cell", phone_number: "123-456-789"},
      {title: "home", phone_number: "987-654-321"},
      {title: "office", phone_number: "987-654-321"},
    ],
    locations: [
      {title: "home", code: 123, address: "us"},
      {title: "office", code: 321, address: "canada"},
    ]
  },
  {
    id: 2,
    name: "alex",
    phone_numbers: [
      {title: "cell", phone_number: "123-456-789"},
      {title: "home", phone_number: "987-654-321"},
    ],
    locations: [
      {title: "home", code: 123, address: "us"},
      {title: "office", code: 321, address: "canada"},
    ]
  },
]

预期效果：
实际错误效果：

解决方案 #

核心思路 #

不要使用dataTree相关配置（该配置用于生成树形层级表格），而是通过自定义列格式化器渲染嵌套数组内容，同时配置自定义搜索函数实现嵌套字段的搜索匹配。

具体实现代码 #

<div id="example-table"></div>

<script>
// 自定义格式化器：将嵌套数组渲染为带样式的列表
function nestedArrayFormatter(cell, formatterParams, onRendered) {
  const data = cell.getValue();
  if (!data || !Array.isArray(data)) return '';

  let html = '<div class="nested-container">';
  data.forEach(item => {
    if (formatterParams.type === 'phone') {
      html += `<div class="phone-item"><strong>${item.title}:</strong> ${item.phone_number}</div>`;
    } else if (formatterParams.type === 'location') {
      html += `<div class="location-item"><strong>${item.title}:</strong> ${item.address} (编码: ${item.code})</div>`;
    }
  });
  html += '</div>';
  return html;
}

// 自定义搜索函数：匹配嵌套数组中的字段
function nestedSearchFunction(headerValue, rowValue, rowData, filterParams) {
  if (!rowValue || !Array.isArray(rowValue)) return false;
  return rowValue.some(item => {
    if (filterParams.type === 'phone') {
      return item.title.toLowerCase().includes(headerValue.toLowerCase()) || 
             item.phone_number.includes(headerValue);
    } else if (filterParams.type === 'location') {
      return item.title.toLowerCase().includes(headerValue.toLowerCase()) || 
             item.address.toLowerCase().includes(headerValue.toLowerCase()) ||
             item.code.toString().includes(headerValue);
    }
    return false;
  });
}

// 初始化表格
const table = new Tabulator("#example-table", {
  data: yourData, // 替换为你的JSON数据变量
  layout: "fitColumns",
  columns: [
    { title: "ID", field: "id", sorter: "number" },
    { title: "姓名", field: "name", sorter: "string" },
    { 
      title: "电话号码", 
      field: "phone_numbers", 
      formatter: nestedArrayFormatter,
      formatterParams: { type: "phone" },
      sorter: "string",
      headerFilter: "input",
      headerFilterFunc: nestedSearchFunction,
      headerFilterParams: { type: "phone" }
    },
    { 
      title: "地址", 
      field: "locations", 
      formatter: nestedArrayFormatter,
      formatterParams: { type: "location" },
      sorter: "string",
      headerFilter: "input",
      headerFilterFunc: nestedSearchFunction,
      headerFilterParams: { type: "location" }
    }
  ]
});
</script>

<style>
.nested-container {
  padding: 4px;
}
.phone-item, .location-item {
  margin: 2px 0;
  font-size: 0.9em;
}
</style>

关键说明 #

1. 关闭树形模式：移除dataTree: true、dataTreeStartExpanded: true等配置，回到普通表格模式。
2. 格式化器自定义渲染：通过formatter函数将嵌套数组转为HTML结构，可根据需求调整样式（比如改成小表格、带分隔线的列表等）。
3. 嵌套字段搜索：通过headerFilterFunc自定义搜索逻辑，遍历嵌套数组中的每个对象，检查指定字段是否匹配搜索关键词。

内容的提问来源于stack exchange，提问作者Kemal Ellamî