title: Tabulator: how to modify local array when deleting rows?
body: <p>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.</p>
  
  <p>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?</p>
  
  <p>Here's the code I'm working with:</p>
  
  <pre><code>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();
        }
      },
  
    ],
  });
  
  </code></pre>
  
  <p>Codepen <a href="https://codepen.io/anzuj/pen/abzRejp" rel="nofollow noreferrer">here</a>.
  Would really appreciate some tips on how to make this work!</p>