Tabulator：删除行时如何修改本地数组？

Question

我正在尝试建立一个可由用户修改的交互式表。就我而言，原始数据集是对象的本地数组。

制表器具有buttonCross选项以删除行，但是它仅影响表的外观。如何使它找到该行提出的匹配对象并将其从tabledata数组中删除？

这是我正在使用的代码：

let tabledata = [{
    animal: "hippo",
    color: "grey"
  },

{
    animal: "puma",
    color: "black"
  },
{
    animal: "flamingo",
    color: "pink"
  }

];

let table = new Tabulator("#example-table", {
  data: tabledata,
  layout: "fitDataFill",
  addRowPos: "bottom",
  reactiveData: true,
  headerSort: false,

  columns: [ //define the table columns
    {
      title: "animal",
      field: "animal",
      editor: "input"
    },
    {
      title: "color",
      field: "color",
      editor: "input"
    },
    {
      formatter: "buttonCross",
      width: 40,
      align: "center",
      cellClick: function (e, cell) {
        cell.getRow().delete();
      }
    },

  ],
});

Codepen here。真的很感谢如何使这项工作的一些提示！

Answer 1

Working example for tabulator

Answer 2

您也可以在Reactive Data Mode中使用制表符