performance degrade

Hi guys,

There was 1 painful problem bothering me recently days when I found performance issue on smart table.

I've 1 table without any pagination, filters, just a normal static table, and within it (the table has only 4 columns), there are 2 custom column:

sequence: {
title: 'No.',
type:'custom',
filter: false,
sort: false,
width:'10%',
renderComponent: SequenceComponent,
onComponentInitFunction: (instance:any)=>{
instance.actions.subscribe(row => {
.....// process some logic here....
this.source.load(this.form.steps);
}
});
}
},
action: {
title: 'Step Action',
type:'custom',
filter: false,
sort: false,
width:'40%',
renderComponent: StepComponent,
onComponentInitFunction: (instance:any)=>{
instance.actions.subscribe(row => {
.....// process some logic here....
this.source.load(this.form.steps);
});
},
},

The SequenceComponent and StepComponent has their own template which used nbPopover which comes from ngx-admin.

I've another methods to append/update/insert row with specific position in Table/exchange the order of 2 rows......, every time I need to use this.source.load() to refresh the changes.......

After I added over 30 rows inside table... I found that the page seems 'freezed', such as mouse click on element of page are very slow... the more rows I added, the slower I found....

If I changed the 2 'custom' component on table's settings to 'text', and removed its renderComponent and onComponentInitFunction properties, the problem disappeared, but this is not what I want.

I also upgrade the ng2-smart-table component with latest version (1.3.5), and my environment is ngx-admin 2.2.0 which used Angular 6.0.0, but the issue still exist.

Could anyone has idea/solution for this? Thanks in advance