Meteor dynamic tables with template


#1

I am using the handsontables Meteorjs package, tables are inserted into a div onRendered. I want to use the same template multiple time depending on how many names are enters previously.

I created dynamic name on the the tables div like so

<template name="Dividends">
    <div id="dividends{{tName}}" class="table-container table-group"></div>
    <div id="payments{{tName}}" class="table-container"></div>
 </template>

the tName returns the template name that is passed in creation.


{{>Dividends tName="dividends"}}
<hr>
<h5>Corporation Tax</h5>
{{>Dividends tName="corpTax"}}

My issue is in js


Template.Dividends.onCreated(function() {
    var self = this;
    self.autorun(() => {
        self.subscribe('dividendsData');
        self.subscribe('dividendsPayments');
    });
});

Template.Dividends.onRendered(function() {
    var tempData = Session.get('data');
    var div_data = [];
    var pay_data = [];

    var div_container = document.getElementById('dividends');
    var pay_container = document.getElementById('payments');



    console.log(this.data.tName)
    var div_table = new Handsontable(div_container, {
        data: div_data,
        minSpareCols: 0,
        minSpareRows: 0,
        minCols: 1,
        rowHeaderWidth: 210,
        maxCols: 1,
        minRows: 2,
        maxRows: 2,
        rowHeaders: ['Opening Dividends ', 'Rate'],
        colHeaders: ['Opening'],
        columns: [
        {
            data: 'opening',
        }],
        cells: function(row, col, prop, value) {
            var cellProperties; 
            if(row == 0){
                cellProperties = {
                    type: 'numeric',
                    format: '$0.00'
                };
            }else if(row == 1){
                cellProperties = {
                    type: 'numeric',
                    format: '0.00%'
                };
            };
            return cellProperties;
        },
        afterChange: function(change, source) { // "change" is an array of arrays. 
            if (source !== "loadData") { // Don't need to run this when data is loaded
                for (i = 0; i < change.length; i++) { // For each change, get the change info and update the record
                    var rowNum = change[i][0]; // Which row it appears on Handsontable
                    var row = div_data[rowNum]; // Now we have the whole row of data, including _id
                    var key = change[i][1]; // Handsontable docs calls this "prop"
                    var oldVal = change[i][2];
                    var newVal = change[i][3];
                    Meteor.call('upsertDividendsData', tempData._id , rowNum, key, newVal);
                }
            }
        },
    });

    var pay_table = new Handsontable(pay_container, {
        data: pay_data,
        minSpareCols: 0,
        minSpareRows: 0,
        rowHeaderWidth: 210,
        minCols: 12,
        maxCols: 12,
        minRows: 2,
        maxRows: 2,
        rowHeaders: ['Payments - opening ', 'Payments - current'],
        colHeaders: ['M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12'],
        stretchH: 'all',
        columns: [
        {
            data: 'M0',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M1',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M2',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M3',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M4',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M5',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M6',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M7',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M8',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M9',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M10',
            type: 'numeric',
            format: '0.00%'
        }, {
            data: 'M11',
            type: 'numeric',
            format: '0.00%'
        }, ],
        afterChange: function(change, source) { // "change" is an array of arrays. 
            if (source !== "loadData") { // Don't need to run this when data is loaded
                for (i = 0; i < change.length; i++) { // For each change, get the change info and update the record
                    var rowNum = change[i][0]; // Which row it appears on Handsontable
                    var row = pay_data[rowNum]; // Now we have the whole row of data, including _id
                    var key = change[i][1]; // Handsontable docs calls this "prop"
                    var oldVal = change[i][2];
                    var newVal = change[i][3];
                    Meteor.call('upsertDividendsPayments', tempData._id , rowNum, key, newVal);
                }
            }
        },

    });


    Tracker.autorun(function() { // Tracker function for reactivity
        tempData = Session.get('data');
        div_data = DividendsData.find({fileId: tempData._id}).fetch(); // Tie in our data
        pay_data = DividendsPayments.find({fileId: tempData._id}).fetch();
        div_table.loadData(div_data);
        pay_table.loadData(pay_data);
    });

});

Template.Dividends.helpers({
    getID: function(){
        return this.id;
    }
});

As you can the issue is my table name like

var div_table

&

var div_table

I need these to be dynamic like the html id’s. I have tried a few things like id and so on but noting worked correct for me . Another thing i noticed is the onRendered function only seems to fired once.

If someone could please educate me and how to approach this would be great.