Multiple Table updateSettings not working

Tags: #<Tag:0x00007efc61d4c038>
#1

I have multiple table use-case where I am creating multiple tables on the same page dynamically. And I on button click I am adding Column but it’s updating other table data as well.

`

//Get the instance of HTML element
let tableContainerFirst = document.getElementById(“CreateOrderTableFirst”);
let tableContainerSecond = document.getElementById(“CreateOrderTableSecond”);

 for( var index=0; index < 5; index++ ) {
    if (index === 0 ) generateTable(arrayOfObjects, tableContainerFirst, index); //Call the function for table
         if (index === 1 ) generateTable(arrayOfObjects_second, tableContainerSecond, index); //Call the function for table

generateTable(rawData, table_instance , table_index ) {
  var hot_instance = new Handsontable(table_instance, {
            language: languageCode || "en-US",
            licenseKey: "non-commercial-and-evaluation",
            //row headers without numbering
            rowHeaders: false,
            toggleAllCollapsibleSections: false,
            data: rawData,
            columns: headerConfig,
            rowHeaderWidth: 50,
            startCols: 0,
            startRows: 0,
            //Set readonly true to all cell
            readOnly: true,
            allowEmpty: true,
            //Warping
            wordWrap: true,
            autoWrapCol: true,
            contextMenu: true,
            columnSorting: false,
            allowInsertRow: true,
            rowHeights: 25,
            filters: false,
            allowInsertColumn: true,
            cells: function(row, column, prop) {
                //Nested row CSS
                var cellProperties = {className: 'htMiddle'};
                
                return cellProperties;
            },
            nestedRows: true,
            hiddenColumns: {},
            mergeCells: []
        });
        let all_row_data = hot_instance.getData();
        //Set dynamic mergeCell for table
        let mergeCells = [{row: (all_row_data.length - 3), col: 0, colspan: 6, rowspan:3}];
        hot_instance.getSettings().mergeCells = mergeCells;
        hot_instance.updateSettings(hot_instance.getSettings().mergeCells);
        //Save handsontable instace for every table
        if ( table_index == 0 ) windows.hotInstance_1 = hot_instance;
        if ( table_index == 1 ) windows.hotInstance_2 = hot_instance;
}



addColumn : function( component, event, helper ) {
        console.log( event.currentTarget.value )
        //Get the handsonTable settings with columns        
		let columnsArray = windows.hotInstance_1.getSettings().columns;
        //Header index
		let index = columnsArray.length;
        //Allow only 5 order
        if ( (index - 8) <= 5 ) {
          let add_list = new Array(index - 8); // create an empty array with length of order
          //Update the variable for view
         
          //Create the Static Column with header and data
          var item = {title: ( "Order " + (index - 8) ), data: ( "Order_" + (index - 8) ), className: "htRight", width: 80}
          //Add cloumn on specifice index
          columnsArray.splice(index - 2, 0, item);
          //Set the Column on handsonTable
          windows.hotInstance_1.getSettings().columns = columnsArray;
          //Update the settings
          windows.hotInstance_1.updateSettings(windows.hotInstance_1.getSettings());   
        }
    }`
#2

Here I created a test file in js fiddle.
Please have a look.

http://jsfiddle.net/j61a9qvz/2/

#3

Hi @anil
The updateSettings method accepts the difference to update. Calling this method with all properties from the getSettings() is not recommended way. So in your case, the recommended way to update columns configuration is:

    var columnsArray = <<put here reference to the paricular Handsontable instance>>.getSettings().columns;
    var item = {
      data: 12,
      type: 'numeric',
      title: 'Price #2'
    };

    columnsArray.push(item);

    <<put here reference to the paricular Handsontable instance>>.updateSettings({
      columns: columnsArray,
    });

In your example and the code snippet, you use a reference to the only first instance. That guides to the unpredictable changing columns by reference.

Here I adjusted your demo: https://jsfiddle.net/qmt8u4pj/

#4

Thanks for the reply.

I updated the configuration but not sure why it’s not working on the salesforce env.
Any other way to update or get the reference of the existing table or created table.
Looks like during the updateSettings it’s updating other table columns as well.

#5

I do not have access to any salesforce environment to check if there is some problem with the Handsontable. From our side, the above example on jsfiddle shows that updating the columns option works as expected, so I suppose the implementation needs more investigation.

You can ask our sales team at sales@handsontable.com to get more details on available support plans with code review on-call or consulting services.

#6