Tabulator: how to modify local array when deleting rows?

Question

I'm trying to build an interactive table that could be modified by the user. In my case, the original dataset is a local array of objects.

Tabulator has the buttonCross option to delete rows, but it only affects the table visuals. How can I make it find the matching object the row presents and delete it from the tabledata array?

Here's the code I'm working with:

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. Would really appreciate some tips on how to make this work!

Answer 1

Working example for tabulator

the filter function is used to remove the current item for the collection filter Filter API.

First filter the object you don't need and then assign it to tabledata.

 cellClick: function (e, cell) {
        debugger;
        var animalToDelete={ animal:cell.getRow().getData().animal,
               color:cell.getRow().getData().color
              };
        var filtered=tabledata.filter(function(x){
          debugger;
          return x.animal!=animalToDelete.animal 
              && x.color!=animalToDelete.color;
        });
        tabledata=filtered;
        cell.getRow().delete();
      }