Search code examples
tabulator

Exclude deleted columns from Tabulator JSON download


I'm trying to capture the JSON of my Tabulator table through the downloadReady method. The JSON however includes columns which were deleted with table.deleteColumn(). How do I exclude these columns from the exported JSON?

// pseudocode:
// delete bind
$("#deleteColumn").click(function(){
   table.deleteColumn(field);
 });

// download bind
$("#download-json").click(function(){
   table.download("json", "data.json");
});

var table = new Tabulator("#table, {
   downloadReady:function(fileContents, blob){
      $.post( "saveJson.php", { 
         json: fileContents
      });
   return false;
}
});

I expect the JSON to represent the actual table but it includes columns which have been deleted.


Solution

  • That is because you are misusing the download function.

    The download function is designed for creating files for the user to download. The data passed into that function is the data to be used in a custom downloader and contains all row data.

    It is not intended to be used to send ajax requests.

    The correct solution would be to implement your own function that calls the getData function, which would return the data from the table, and then pass that data into a ajax request handling function.

    You would need to itterate through and filter out any properties out from the trow data that you don't want there. Tabulator will give you all the data in each of the rows

    function sendData(){
        var data = table.getData(true);
        var columns = table.getColumns();
    
        var filteredData = [];
    
        data.forEach(function(row){
            var outputRow = {};
    
            columns.forEach(function(col){
               var field = col.getField();
    
               if(col.getVisibility()){
                   outputRow[field] = row[field];
               }
            });
    
            filteredData.push(outputRow);
        });
    
        //send your data via ajax
        $.post( "saveJson.php", { 
             json: filteredData
        });
    }