CODEWITHSUNDEEP
angularng2-smart-table
Marcus V. B. Siqueira
Marcus V. B. Siqueira

Reputation: 73

Refresh ng2-smart-table when array changes

Hello and good afternoon,

I have been informed by the creator of ng2-smart-table to open a post here instead of e-mailing, so other programmers can have the benefit of this question too. What I am trying to do, is to refresh the datatable when the array used to bind it is modified. The porpuse behind it, is a filter that works directly on the array, removing elements or adding elements. Here is a simple example of how it's working now:

let arr = [];
//fill arr with data
let arrayData = arr;

Like this, it works since in the html I have [data]='arrayData'

The problem is that it turns out to be a slow filter and I always create the table with all its elements. I have changed the filter's method to just add or remove the necessary elements from the array using splice to remove and push to add, so i would not recreate the array everytime with all elements needed. The array does change, and it is working as intended, but the problem is that the modified array has no effect on the datatable, it keeps showing it's old state, as if the array had no modification. I have come across some solutions on the git hub forum of the datatable, but none of them works for my case. I believe i have some difference in this project. I have component created that uses the databale, as a generic table, used by some pages. The filter I am appling belongs to a specific page. In that page, i have something like this in my HTML : 

<app-datatable id="tableSpecific" class="last-fixed" [(columns)]="columns" [data]="arrayData"[paging]='false' (emmitClick)="apply($event.data)"></app-datatable>

The app-datatable component has the following HMLT:

<ng2-smart-table [settings]="config" [source]="data" (userRowSelect)="clickEmmiter($event)"></ng2-smart-table>

So, the implementation of my filter that modifies the array is on a different page. The only thing biding these 2 together is the 

[data]= array

What can i do to force a refresh or something on the datatable?

Upvotes: 0

Views: 5152

Answers (1)

than
than

Reputation: 887

Had a look into ng2-smart there's no way of it knowing that you have updated the array outside, only way is to pass in a new array, which you can do like so

arrayData = [...arrayData];

ng2-smart-table has a wrapper class which you can utilize to update your array though.

import { LocalDataSource } from 'ng2-smart-table';

You can use pass your array into this wrapper and manipulate your array using its functions, check out the code https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/lib/data-source/local/local.data-source.ts

It has functions to prepend, append, remove, etc.

Example usage on how to pass your array into LocalDataSource wrapper https://akveo.github.io/ng2-smart-table/#/examples/using-filters

Upvotes: 3

Related Questions