如何在Tabulator子表格行含多行单元格时自动展开子表格？

问题背景 #

我用Tabulator实现了带**子表格（Subtable）**的主表格，主表格加载完成后子表格同步加载数据。子表格部分行的数据通过异步请求获取，拿到数据后调用row.update({...})触发单元格格式化器，将内容渲染为两行。此时子表格的行高已适配内容，但子表格和主表格的整体高度未更新，导致子表格出现滚动条。

尝试过以下方法均无效：

• 在cellFormatter的onRendered回调中调用cell.checkHeight()和cell.getRow().normalizeHeight()
• 列定义中设置variableHeight: true
• 多种CSS调整方案

若在cellFormatter的onRendered中调用cell.getTable().redraw()或cell.getRow().reformat()会触发无限循环。

需求：子表格自动展开高度，同时带动主表格同步调整高度。

解决方案 #

核心思路是在子表格内容更新后，安全触发主表格的高度重计算，同时通过防抖避免循环和频繁重绘：

1. 为子表格添加dataChanged事件监听，捕捉数据和行高变化
2. 使用防抖函数控制主表格重绘的触发频率，避免无限循环
3. 确保主表格和子表格都开启variableHeight属性，支持可变行高计算

修改后的完整代码 #

HTML #

<script src="https://unpkg.com/tabulator-tables@6.2.0/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@6.2.0/dist/css/tabulator.min.css" rel="stylesheet" />
<div id="table"></div>

JavaScript #

var tableData = [{
  name: "qwerty",
  subtable: [{
    name: "single line value"
  }]
}];

// 防抖函数：限制高频事件触发频率
function debounce(func, delay) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

function childTableCellFormatter(cell) {
  if (cell.getData().loaded) {
    // 用容器包裹内容，确保多行渲染高度被正确计算
    return `<div>${cell.getValue()}</div>`;
  }

  setTimeout(() => {
    cell.getRow().update({
      name: "multi line <br> value",
      loaded: true
    });
  }, 1000);

  return cell.getValue();
}

function rowFormatter(row) {
  var holderEl = document.createElement("div");
  holderEl.style.paddingLeft = "20px";
  row.getElement().appendChild(holderEl);

  var subtable = new Tabulator(holderEl, {
    layout: 'fitDataFill',
    data: row.getData().subtable,
    columns: [{
      title: "Name",
      field: "name",
      formatter: childTableCellFormatter,
      variableHeight: true // 开启列可变高度
    }],
    // 子表格数据/布局变化后，防抖触发主表格重绘
    dataChanged: debounce(() => {
      row.getTable().redraw(true); // true参数强制重绘布局
    }, 100)
  });
}

var table = new Tabulator("#table", {
  layout: 'fitDataFill',
  data: tableData,
  columns: [{
    title: "Name",
    field: "name"
  }],
  rowFormatter: rowFormatter,
  variableHeight: true // 主表格开启可变行高
});

关键修改说明 #

• 防抖函数：避免子表格数据更新时频繁触发主表格重绘，既优化性能又防止无限循环
• dataChanged事件：监听子表格的所有数据和布局变化，确保行高更新后能及时通知主表格
• variableHeight属性：主表格和子表格列都启用该属性，让Tabulator自动计算并适配行高
• HTML容器包裹内容：确保多行内容的渲染高度被Tabulator正确识别

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