title: tabulator delete row c#
body: <p>I am using c# .net core api and tabulator for a small web app</p>
  
  <p>I am having trouble understanding how to delete a row. The documentation has a specific row in the demo associated with the button. </p>
  
  <p>here's the documentation:</p>
  
  <p><a href="http://tabulator.info/examples/4.6?#adddel" rel="nofollow noreferrer">http://tabulator.info/examples/4.6?#adddel</a></p>
  
  <p>the documentation/interactive demo shows just "remove row oli bob"...it does not show the user just clicking on the row and deleting the row...so I'm confused on how to go about an ad hoc delete</p>
  
  <p>My user wants to delete rows ad hoc.</p>
  
  <p>Here's my class file/html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Customers Admin Panel&lt;/title&gt;
      &lt;link href="https://unpkg.com/tabulator-tables@4.6.2/dist/css/tabulator.min.css" rel="stylesheet"&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.5.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.2/dist/js/tabulator.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="initTable()"&gt;
      &lt;button onclick="loadCustomers()"&gt;Refresh Data&lt;/button&gt;
      &lt;table id="customers"&gt;
  
      &lt;/table&gt;
  
      &lt;script&gt;
          var table;
  
  
          function handleCellUpdated (cell) {
              console.log(cell);
              console.log(cell.getRow());
              console.log(cell.getRow().getData());
              var record = cell.getRow().getData();
  
              $.ajax({
                  url: "api/SalesTrackerCustomers/" + record.id,
                  data: JSON.stringify(record),
                  contentType: 'application/json',
                  type: "PUT",
                  success: function(response, textStatus, xhr){
                      console.log("success")
                  },
                  error: function(XMLHttpRequest, textStatus, error){
                      console.log("error")
                  }
              });
  
          }
  
  
          function initTable() {
  
              //Build Tabulator
              table = new Tabulator("#customers", {
                  height: "90vh",
                  placeholder: "Loading...",
                  addRowPos: "bottom",
                  columns: [
                      { title: "Customer ID", field: "custId", width: 150, editor: "input" },
                      { title: "Customer Type", field: "custType", width: 130,  editor: "input" },
                      { title: "Customer Name", field: "customerName",  editor: "input" },
                      { title: "Group ID", field: "groupId", editor: "number" }
                  ],
                  cellEdited: handleCellUpdated
              });
  
              loadCustomers();
          }
  
  
  
          function loadCustomers(){
              console.log("loading data");
              $.ajax({
                  url: "/api/SalesTrackerCustomers",
                  method: "GET"
              }).done(function (result) {
  
                  table.setData(result);
  
  
              });
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>