Tabulator 4.9表头筛选器如何动态适配当前过滤行的可选值？

Tabulator 4.9默认的表头下拉筛选器选项只会在表格初始化时生成一次，不会随其他筛选操作动态更新，导致出现过滤后下拉框仍显示全部初始选项的问题。要实现下拉选项仅展示当前过滤行中存在的值，可以通过以下步骤处理：

• 监听过滤事件，动态生成选项：利用Tabulator的filterChanged事件，每次表格过滤完成后，从当前过滤后的行数据中提取对应列的唯一值，更新下拉筛选器的选项列表。
• 封装通用更新逻辑：把提取列值、生成选项、更新筛选器的逻辑封装成函数，方便复用在多列上。

具体代码实现 #

// 初始化表格
const table = new Tabulator("#example-table", {
  columns: [
    {
      title: "颜色",
      field: "color",
      headerFilter: "select",
      headerFilterParams: {
        values: {}, // 初始空选项，后续动态填充
        defaultValue: ""
      }
    },
    // 其他需要筛选的列...
  ],
});

// 动态更新指定列的筛选下拉选项
function updateHeaderFilterOptions(fieldName) {
  // 获取当前所有过滤后的行数据
  const filteredRows = table.getFilteredRows();
  // 提取目标列的唯一值
  const uniqueValues = [...new Set(filteredRows.map(row => row.getData()[fieldName]))];
  // 转换为Tabulator筛选器需要的键值对格式
  const options = uniqueValues.reduce((acc, val) => {
    acc[val] = val;
    return acc;
  }, {});
  // 添加"全部"选项（可选，用于清除筛选）
  options[""] = "全部";
  
  // 先清空当前筛选值，避免选项更新后状态异常
  table.getHeaderFilter(fieldName).setValue("");
  // 更新列的筛选器参数
  table.updateColumnDefinition(fieldName, {
    headerFilterParams: { values: options }
  });
}

// 表格初始化完成后，首次加载选项
table.on("tableBuilt", () => updateHeaderFilterOptions("color"));

// 每次表格过滤状态变化时，更新选项
table.on("filterChanged", () => updateHeaderFilterOptions("color"));

关键说明 #

1. getFilteredRows()：获取当前所有符合过滤条件的行，确保提取的是最新的有效数据。
2. Set去重：避免下拉选项中出现重复值，保证选项列表简洁。
3. updateColumnDefinition()：动态更新列的表头筛选器参数，替换原有选项列表。
4. 清空当前筛选值：防止选项更新后，原筛选值不存在于新选项中导致的筛选异常。

如果有多列需要实现该功能，只需在filterChanged事件中调用多次updateHeaderFilterOptions，传入对应的列字段名即可。

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