Why is Clicking a button intended to modify specific part of view in my vscode extension 'destroying' it

ContextLanguage used : typescriptUI toolkit svelte and bootstrap

Issue descriptionI'm currently writing a vscode extension with one of it's feature being that clicking a button update an HTML table element in the view based on which button is clicked.Here's the typescrypt code that would be executed on each click

  function updateOverview(op:string){    // First we update overview table based on op    let table:HTMLTableElement = <HTMLTableElement> document.getElementById("overview");    let newRow=table.insertRow();    newRow.classList.add("row");    let insertCell=newRow.insertCell(0);    let updateCell=newRow.insertCell(1);    let deleteCell=newRow.insertCell(2);    if(op=="update"){      insertCell.innerHTML="&nbsp;";      updateCell.innerHTML="update;";      deleteCell.innerHTML="&nbsp;";    }    else if(op=="insert"){}    else {} //Any other ops considered delete  }

Here's the HTML table that is supposed to be updated

<table class="table table-dark" id="overview"><thead><tr><th scope="col" colspan="3" align="center">Overview</th><th scope="col">&nbsp;</th><th scope="col">&nbsp;</th></tr><tr><th scope="col">Insert</th><th scope="col">Update</th><th scope="col">Delete</th></tr></thead><tbody></tbody></table>

Here's the button snippet

<button  on:click={()=>{updateOverview("update")}}>Update <i class="fa fa-refresh" aria-hidden="true"></i></button>

Here's the relevant part of my view, there are a lot more things in itHere's what I get when clicking the button

What I tried

• Using preventDefault event modifier
• displaying a simple alert() on click

Update following brunnerh suggestion

added the following method to formdata holder class

public addAffectectedTable(name:string,what:string,count:number):void {    if(this._tables){        if(this._tables.length===0){            let table:AffectedTable;            this._tables[0].name=name;            this._tables[0].what=what;            this._tables[0].howMany=count;        }        else{            for (let index = 0; index < this._tables.length; index++) {                const element = this._tables[index];                if(element.name===name&&element.what===what){element.howMany+=count;};            }            let newRowIndex=this._tables.length+1;            this._tables[newRowIndex].name=name;            this._tables[newRowIndex].what=what;            this._tables[newRowIndex].howMany=count;        }    }}

My svelte template table segment now is

<tbody>            {#if formElements._tables}              {#each formElements._tables as table}<tr>{#if table.what==="insert"}<td>{table.name} -{table.howMany} </td><td>&nbsp;</td><td>&nbsp;</td>                {/if}                {#if table.what==="update"}<td>&nbsp;</td><td>{table.name} -{table.howMany} </td><td>&nbsp;</td>            {/if}            {#if table.what==="delete"}<td>&nbsp;</td><td>&nbsp;</td><td>{table.name} -{table.howMany} </td>                {/if}</tr>              {/each}            {/if}</tbody>

The button snippet now looks like

<button  on:click={()=>{formElements.addAffectectedTable("test","update",3)}}>Update <i class="fa fa-refresh" aria-hidden="true"></i></button>

Still, the issue occurs....

What I expectedThe 'overview' table part of my extension view to be update on each click.

There must be some things I don't get about vscode extension lifecycle and view rendering....Should I encapsulate my overview table as a nested viewPanel inside my extension main view ?

Any help and tips would be greatly appreciated :)

Thank you!