Tabulator: Delete rows *pulling my hair out*

[c3pos-brother]

I cannot, for the life of me, figure out how to delete a selected row. Or how to retrieve selected rows in general. I've tried so many things its hard to go through them all. my project will be pulling data from an ajax call but Ive put this in an array per the example. How can I make the selectedRows function work?! right now when I output to selected rows to log it just shows [r,r]

 var tableData = [
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:7, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:8, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:9, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:10, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
    ]


    $("#lotLister").tabulator({
        data:tableData,
        selectable:true, //set initial table data
        columns:[
            {title:"Name", field:"name"},
            {title:"Age", field:"age"},
            {title:"Gender", field:"gender"},
            {title:"Height", field:"height"},
            {title:"Favourite Color", field:"col"},
            {title:"Date Of Birth", field:"dob"},
            {title:"Cheese Preference", field:"cheese"},
        ],
      });

     // $("#lotLister").tabulator("setData", tableData);

      $("#del-row").click(function(){
              var rows = $('#lotLister').tabulator("getSelectedRows");
              //var rows = $("#lotLister").tabulator("getRows");
              console.log(rows)
              $("#lotLister").tabulator("deleteRow", rows);
          });

[c3pos-brother]

I ended up using this method. It seems getting the selected row is not possible, it only returns [r,...]
but the selectedData does seem to work, but it doesnt deselect when deleted (the deselect command doesnt work either b/c the row index is still just 'r' which is meaningless). So to get around that I kept tabs of the removed items in a set. maybe not the best workaround, but it works. This assumes you have a unique column 'id'

var removedIndex = new Set();
     $("#del-row").click(function(){
              //selected data always return any elements that were already deleted this bypasses that
              var selectedData = $("#lotLister").tabulator("getSelectedData");
              $.each(selectedData, function( index, value ) {
                    //if the value is not already removed remove it
                    if (!removedIndex.has(value['id']))
                    {
                      $("#lotLister").tabulator("deleteRow", value['id']);
                    } 
                   removedIndex.add(value['id']);

                })
          });

[Nyut0n]

Hey,

I think the problem is that "getSelectedRows" returns an array of row components, but "deleteRow" expects a component lookup to delete a single row. You can't pass an array into that I think.

If you change your initial onclick function to this it should do the trick:

$("#del-row").click(function(){
  var rows = $('#lotLister').tabulator("getSelectedRows");
  $.each(rows, function(index, row) {
    row.delete();
  });
});

[c3pos-brother]

J
F
C.
you are right, that works. Thanks.

I ended up doing that in a round about way but your way is much simpler and is more consistent with the tabulator functions.