smart-table/smart-table-ng

How to access the data from a directive

Closed this issue · 2 comments

I want to build an autofilter directive that scans an attribute of the table and offers the unique values for filtering. Similar to the "Job" in your smart-table-ng-tutorial-1 on Stackblitz, except that the values in the dropdown are autogenerated and multiple values can be selected.

How do I access the original data for scanning? The data seems to be hidden behind many layers of cleverness, i.e. in factories.ts from() in const dataArray: T[] = [];
I can't even find the data in the Chrome debugger.

I could probably load the data manually, scan it for the values and then call use() to populate the table, but I want the autofilter directive to be self-contained, only requiring the table and the pointer.

Should the NgSmartTable interface also provide an accessor to the data (getData())?
Or should there be a "data changed" event emitted when the data is reloaded, where the event listener gets the new data?

How do I access the original data for scanning? The data seems to be hidden behind many layers of cleverness, i.e. in factories.ts from() in const dataArray: T[] = []; I can't even find the data in the Chrome debugger.

Yes that is by design. I want to preserve the encapsulation otherwise users will start to mess with it and the synchronization with the table state will be broken leading to many bugs. Of course if you know what you are doing there are quite few easy ways to access it.

I could probably load the data manually, scan it for the values and then call use() to populate the table, but I want the autofilter directive to be self-contained, only requiring the table and the pointer.

You don't need to go that far: just make your data source (the one you pass to the factory) injectable and that's it: you can inject it into your directive.

Should the NgSmartTable interface also provide an accessor to the data (getData())?
Or should there be a "data changed" event emitted when the data is reloaded, where the event listener gets the new data?

No again, I think it would lead to many bugs. However you can use the eval method as a getter if you want a copy of the data by passing the default table state.

table.eval({sort:{},slice:{page:1},search:{},filter:{}}) // returns a promise with the whole data set

And if you want the reference and know what you are doing, you can create an extension and pass it to the factory.

SmartTable.of(data, tableState, ({data} => ({getData(){
return data;
}}));

Thanks for the help. As I want the directive to be self contained and working for tables with different data sources, the injectable method won't work, but I'll try the eval method.