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();
      }

You could also look to use tabulator in Reactive Data Mode

In this mode it will update the table in real time to match the provided data array as it is changed, and vice versa it will update the array to match the table.

To do this set the reactiveData property to true in the tables constructor object.

//create table and assign data
var table = new Tabulator("#example-table", {
    reactiveData:true, //enable reactive data
    data:tableData, //assign data array
    columns:[
          {title:"Name", field:"name"},
          {title:"Age", field:"age", align:"left", formatter:"progress"},
          {title:"Favourite Color", field:"col"},
          {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
    ]
});

It will then maintain a link with the initial data source

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!