制表符更新数据过滤的列定义

Question

我想知道是否可以更新数据过滤的列定义。

这是一支代码笔，充分展示了我的情况。

let tableData = [
  {
    name: "Donna Summer",
    gender: "female"
  },
  {
    name: "Oli Bob",
    gender: "male",
    filed_male: "1"
  },
  {
    name: "Mary May",
    gender: "female",
    filed_female: "2"
  },
  {
    name: "Christine Lobowski",
    gender: "female",
    filed_female: "2"
  },
  {
    name: "Brendon Philips",
    gender: "male",
    filed_male: "1"
  }

我有不同字段的表数据，在这种情况下，性别为“female”的行有一个非公共字段“filed_female”，性别为“male”的行有一个非公共字段“filed_male”。

我想更新筛选性别为女性/男性的行的列定义，以显示列filed_female/filed_male。

我已经尝试了一种解决方案，仅使用过滤后的行更新表数据，但我无法删除过滤器以再次显示所有行。

还有其他解决办法吗？非常感谢！

Answer 1

你可以试试这个

let tableData = [
  {
    name: "Donna Summer",
    gender: "female"
  },
  {
    name: "Oli Bob",
    gender: "male",
    filed_male: "1"
  },
  {
    name: "Mary May",
    gender: "female",
    filed_female: "2"
  },
  {
    name: "Christine Lobowski",
    gender: "female",
    filed_female: "2"
  },
  {
    name: "Brendon Philips",
    gender: "male",
    filed_male: "1"
  }
];

let table = new Tabulator("#example-table", {
  data: tableData,
  autoColumns: true,
  movableRows: true,
  columnDefaults: {
    headerVertical: "flip",
    headerHozAlign: "center",
    hozAlign: "center",
    minWidth: 100,
    headerFilter: "list",
    headerFilterParams: {
      valuesLookup: true,
      clearable: true
    }
  }
});

const updateColumns = (gender) => {
  let columns = [
    { title: "Name", field: "name" },
    { title: "Gender", field: "gender" }
  ];

  if (gender === 'female') {
    columns.push({ title: "Filed Female", field: "filed_female" });
  } else if (gender === 'male') {
    columns.push({ title: "Filed Male", field: "filed_male" });
  }

  table.setColumns(columns);
};

// Simulate filtering for female
updateColumns('female');

// Simulate filtering for male
updateColumns('male');