如何以编程方式删除 Tabulator 表中的自定义操作按钮？

Question

I created a Tabulator table which has a custom action button to execute an action and then updates the row on which the button was clicked. This it does successfully.

What I want to do is to also dynamically remove the row's link/buttonthat was clicked - only for the row whose button was clicked - as soon as the row data is updated. I've tried to resolve this for hours and checked the tabulator documentation, and I still don't know how I can go about doing this.

Your help is much appreciated.

The code is as follows:

var tableData =[
   {
      "id":30,
      "position":201,
      "category":"onel",
      "name":"One Thing",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   },
   {
      "id":31,
      "position":202,
      "category":"onel",
      "name":"Two things",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   },
   {
      "id":32,
      "position":203,
      "category":"onel",
      "name":"Three things",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   },
   {
      "id":33,
      "position":204,
      "category":"onel",
      "name":"Four things",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   },
   {
      "id":34,
      "position":205,
      "category":"onel",
      "name":"Five things",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   }
];
var actButton = (cell, params, onRendered) => {                        
    var myId = cell.getRow().getData().id;
    clickFunction = (p_id) => {  
        cell.getTable().updateData(
          [
            { id: p_id
             , completed_at: '2021-12-31 13:59:00'
             , completed_by: 'Womble'
             , completed_by_email: 'wimbledon@common.org.uk'
            }
          ] 
          // <--- here, I want to remove this row's action button as defined below
        );
    };
    /**
     * This renders the buttons at initialisation but doesn't respond to dynamic in-situ data-changes
     */
    if ( null == cell.getRow().getData().completed_at ) {
        return "<a href='javascript: clickFunction(" + myId + ")' data-toggle='tooltip' title='Execute'><i class='fas fa-camera' style='color:#9691ce;'></i></a>";
    } else {
        return "";
    }                
};
var myTable = new Tabulator(
    "#divTable",
    {
        data: tableData,
        columns: [
            {title:"Position", field:"position"},
            {title:"Category", field:"category"},                    
            {title:"Name", field:"name"},
            {title:"Completed", field:"completed_at", formatter:"datetime", formatterParams:{inputFormat:"YYYY_MM_DD HH:mm:ss", outputFormat:"DD/MM/YYYY HH:mm:ss", invalidPlaceholder:""} },
            {title:"By", field:"completed_by", sorter:"string"},
            {title:"Email", field:"completed_by_email", sorter:"string"},
            {title:"Action", field:"id", sortable:false, formatter:actButton},
        ],
        layout: "fitColumns",
        pagination: "local",
        paginationSize: "15",
        tooltips:true,
        tooltipsHeader:true,
        reactiveData:true, //turn on data reactivity
    }
);

Answer 1

I was looking to the Tabulator component object model for the solution, when it was best answered by the DOM.

Assumptions:

• the action button column is assigned the field 'id' - this doesn't affect the dynamic table's layout or interaction

Using a fragment of the above code as a starting point, the solution would be:

var actButton = (cell, params, onRendered) => {                        
    var myId = cell.getRow().getData().id;
    clickFunction = (p_id) => {  
        cell.getTable().updateData(
          [
            { id: p_id
             , completed_at: '2021-12-31 13:59:00'
             , completed_by: 'Womble'
             , completed_by_email: 'wimbledon@common.org.uk'
            }
          ]
        ).then (
          () => {
             /**
              * Remove the action button
              */
            [...document.querySelectorAll("div.tabulator-cell")]
                .filter(item => item.getAttribute('title')==p_eventId)[0]
                    .childNodes[0].remove();
          }
        );
    };
    /**
     * This renders the buttons at initialisation but doesn't respond to dynamic in-situ data-changes
     */
    if ( null == cell.getRow().getData().completed_at ) {
        return "<a href='javascript: clickFunction(" + myId + ")' data-toggle='tooltip' title='Execute'><i class='fas fa-camera' style='color:#9691ce;'></i></a>";
    } else {
        return "";
    }                
};