How To Set Row Index From Database on Newly Created Row

How do I set the row index on a newly created row after obtained id from the database insert? I am able to add row with the Tabulator successfully but I am unable to update the row id coming from the database. This is my code that I have:

var table = new Tabulator("#example-table", {
            index:"id", //set the index field to the "id" field.
            height:805, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
            addRowPos:"top",
            data:tabledata, //assign data to table
            layout:"fitColumns", //fit columns to width of table (optional)
            reactiveData:true, 
            columns:[ //Define Table Columns
                    {/* delete button ---> */ formatter:"buttonCross", width:60, align:"center", headerSort:false,
                        cellClick:function(e, cell){
                            if(confirm("Are you sure you want to delete row " + cell.getData().id + "?")) cell.getRow().delete();
                            // This callback is called any time a cell is deleted.
                            $.ajax({
                              url: ("cotmdb_ajax_response_request.php?action=delete"), //+ cell.getIndex()
                              data: cell.getRow().getData(), // sends this row record to $_REQUEST
                              type: "post",
                              success: function(response, textStatus, xhr){
                                alert("AJAX result: " + response + "; status: " + textStatus);
                              },
                              error: function(XMLHttpRequest, textStatus, error){
                                alert("AJAX error: " + textStatus + "; " + error);
                              }
                            })
                        }
                    },
                    {title:"market expert", field:"market_expert", width:150, editor:"input"},
                    {title:"territory name", field:"territory_name", width:150, editor:"input"},
                    {title:"first name", field:"first_name", width:150, editor:"input"},
                    {title:"initials", field:"initials", width:150, editor:"input"},
                    {title:"last name", field:"last_name", width:150, editor:"input"},
                    {title:"contact type", field:"contact_type", width:150, editor:"input"},
                    {title:"specialty", field:"specialty", width:150, editor:"input"},
                    {title:"office name or home", field:"office_name_or_home", width:150, editor:"input"},
                    {title:"address", field:"address", width:150, editor:"input"},
                    {title:"suite", field:"suite", width:150, editor:"input"},
                    {title:"town", field:"town", width:150, editor:"input"},
                    {title:"state", field:"state", width:150, editor:"input"},
                    {title:"zip", field:"zip", width:150, editor:"input"},
                    {title:"phone", field:"phone", width:150, editor:"input"},
                    {title:"fax", field:"fax", width:150, editor:"input"},
                    {title:"email", field:"email", width:150, editor:"input"},
                    {title:"comments", field:"comments", width:3050, editor:"input"}
            ],
            cellEdited:function(cell){
                // This callback is called any time a cell is edited.
                $.ajax({
                  url: ("cotmdb_ajax_response_request.php?action=update"),
                  data: cell.getRow().getData(), // sends this row record to $_REQUEST
                  type: "post",
                  success: function(response, textStatus, xhr){
                    alert("AJAX result: " + response + "; status: " + textStatus);
                  },
                  error: function(XMLHttpRequest, textStatus, error){
                    alert("AJAX error: " + textStatus + "; " + error);
                  }
                })
              },
        });

       // Add row on "Add Row" button click
        $("#add-row").click(function(){
            table.addRow({})
            .then(function(row){
                $.ajax({
                  url: ("cotmdb_ajax_response_request.php?action=insert"), //+ cell.getIndex()
                  data: row.getData(), //cell.getRow().getData(),
                  type: "post",
                  success: function(responseid, textStatus, xhr){
                    alert("AJAX result: " + responseid + "; status: " + textStatus);
                    tabledata.push( {id:responseid,market_expert:"",territory_name:"",first_name:"",initials:"",last_name:"",contact_type:"",specialty:"",office_name_or_home:"",address:"",suite:"",town:"",state:"",zip:"",phone:"",fax:"",email:"",comments:"",deleted:"0"});
                  },
                  error: function(XMLHttpRequest, textStatus, error){
                    alert("AJAX error: " + textStatus + "; " + error);
                  }
                })
            });

I have been a few days trying to figure this out and I have looked at other posts cannot find the answer to my question on how to set the id of the newly created row in the Tabulator which comes from the database.

[bioscorpion]

Thank you very much for all your help gentlemen and gentleladies! It is working very well now!

[olifolkerd]

Hey @bioscorpion

Thanks for getting in touch,

There are a couple of ways to do this:

You could use a Mutator to assign an id to a rows data when it is added to the table (the mutator will be called on any row that is added to the table so you would want to check that the row dosnt have an id already before assigning one).

You could use the Row Added Callback to trigger the setting of an id when the row is added.

I hope that points you in the right direction.

Cheers

Oli 😃