Reactivity on computed from query

#1

Hello,

I’ve made a table from a complexe mongo document.
Header & first collumn values are computed from a query result. Unfortunately my table is not reactive.

Name X1 X2
foo
bar

Here is a sample of code

Template.Table.onCreated(function () {
    
  this.header = new ReactiveVar([]);
  this.firstcolumn = new ReactiveVar([]);
  
  const instance = Template.instance();

  this.autorun(function() {
      const subscription = instance.subscribe('table');
      if(subscription.ready()) {
        updateTable();
      }
  });

 function updateTable() {
    const instance = Template.instance();
    const samples = SampleData.find({})
  
    const header = new Set();
    const firstcolumn = new Set();
  
    // Do some stuff, filling Set
  
    //Avoid infinite loop
    Tracker.nonreactive(() => {
      instance.header.set(Array.from(header));
      instance.firstcolumn.set(Array.from(firstcolumn);
    });
});

Could you tell me how could I re-run updateTable() when SampleData.find({}) changes please ?
Thanks

#2

Do you need to process the entire collection before rendering the table, or does each document correspond to an individual row?

#3

I need to process the entire collection (I’ve done filtering in publicating already), because each cell could contains a nested document that I need to place in the table in the proper line and column

#4

There are a couple of things I would change in your code, but I don’t think they’d affect the running of the recomputation. However, you haven’t shown how you’re rendering the table. Is the problem with the (re)rendering, or with the reactive updateTable()?

#5

This is just a sample of code, I can’t publish the real code behind this because not my own.
The rendering seems to works well. Additionnaly, I listen events to move columns to the right/left in UI only, that’s why I use ReactiveVar and this part works.

But I agree there are some optimisations to do, because changing columns order will need re-rendering, that will need to query database. And I’m not sure these database calls are clientside only.

#6

Well, other than some very general suggestions, I can’t do much more:

  1. Use a ReactiveVar for the table data as well as the headers, or …
  2. Use a local, client-only collection for the table and make use of standard helpers.