How to programmatically render invisible computed columns

[slimtom95]

Hi, Another computed column question again.

I have two tables, one tableA with computed columns holds most of data, the other tableB makes some data aggregation based on tableA's computed columns. (chain update solved by writing new dataRow attribute while rendering)

But I found that the computed columns got rendered when they came into view. So If I don't scroll the columns into view, tableB won't get any computed values since the computation not starts.

Similarly, if there is only one table, computed columnA is at the most right side of table which is currently hidden, computed columnB is computed using columnA(using the chain update trick) and available in current view. The columnB will render first, and lose dependence of columnA's computation.

To achieve my original purpose, I wonder is there any way to manually render the invisible columns. If there isn't any solution available, which part of code should I looking into. (Of course at last, I could try rewriting the computed columns pattern into some event listening and setData process...)

Thanks

[joneit]

@slimtom95, A much better approach to do this whole thing is to use a custom data model that knows how to aggregate data.

This could be implemented as a multi-stage data model implementing a "pipeline" of data sources and instantiate the grid with that custom data model. There are a number of ways to set up a such a data model. Setting it up prior to grid instantiation would look something like this:

var Hypergrid = require('fin-hypergrid');
var DataModelLocal = require('datasaur-local');
var dataModel = new CustomDataModel(new DataModelLocal); // the two "stages"
var myGrid = new Hypergrid({ dataModel });

This custom data model would return either the underlying data (from datasaur-local) or an indexed view of said data with possibly synthesized rows (for aggregation sums/products), based on invoking a custom data model method (or setter).

custom-data-model.js:

var DataModelIndexed = require('datasaur-indexed'); // for inheritance (unrelated to stage!)
module.exports = DataModelIndexed.extend('CustomDataModel', {
    setAggregates: function(...) { ... }
}

Note that datasaur-indexed extends from datasaur-base.

One caution is that the above assumes your build requires Hypergrid. If you are using the fin.Hypergrid pre-bundled build, it's more complicated (lmk if that's the case and we can discuss).

Btw, you don't have to use extend; you could use other methods to express prototypal inheritance such as ES6 classes (transpiled to work in older browsers):

class CustomDataModel extends DatasaurIndexed {
    constructor: {
        super();
        ...
    }
    ...
}

I wish I had some working examples to show you. I can't fix them this week; maybe next week.

[joneit]

Regarding

I wish I had some working examples to show you. I can't fix them this week; maybe next week.

note that fin-hypergrid-filtering-demo does serve as an example of a multi-stage data model. It uses datasaur-indexed to transform the data resulting in a subset of rows.

For aggregations you would want to create synthetic rows in a tree structure with drill-downs. (We had this working at one time but the code is presently out of date. It needs to be updated to work with the 3.0 data model.)

[slimtom95]

Wow, thanks for showing me this solution @joneit . I just migrated the computed columns into event driven setData solution yesterday, I'd like to solve this in a more hypergrid way and I'll look into the custom data model implementation later.

Currently I am able to require Hypergrid, and I do know this filtering-demo, thanks for mentioning it, it'll be a good material to study.

p.s. Just a reminder, there is a filter plugin related issue filed last week on datasaur-filter

p.s.2 I think there also is a working drill-down codes with 3.0 data model demo (could be wrong about this, not tested yet)