Datatables functionality in aldeed:tabular (add row)

Can anyone help me get started with Tabular? I’ve got the code below and trying to add a row but I know I’m missing something. Jquery somehow doesn’t pick up the table. I’m brand new here (to coding). Meteor and these packages are making things much easier than I expected, but I can’t see how to combine the tabular readme with the Datatables instructions. Thanks all.


    <button id="addRow">Add new row</button>
    {{> tabular table=TabularTables.Transactions id="transactions" class="table table-striped table-bordered table-condensed"}}


Template.Transactions.rendered = function () {
var t = Tabular.Transactions;
$('#addRow').on( 'click', function () {
    t.row.add( [
    ] ).draw();


TabularTables.Transactions = new Tabular.Table({
name: "Transactions",
collection: Transactions,
columns: [
{data: "target", title: "Target"},
{data: "acquirer", title: "Acquirer"},
{data: "enterpriseValue", title: "Enterprise Value"},
    tmpl: Meteor.isClient && Template.precedentSelectCell

My use case is fairly simple - creating a table and populating it with arrays of financial data selected from collections of either companies or transactions. Then using averages of information in one column to create SVG shapes (mimicking a chart, but with added interactivity). As per the conversation on Autoform here, am I using something too complex? I actually tried just using Datatables itself but had trouble reconciling their instructions with Meteor.

I continued to work on the helper code and realized some errors, but still can’t make it run.

Template.Transactions.rendered = function () {
var t = $('TabularTables.Transactions').DataTable();
$("#addRow").click(function() {
    t.row.add( [
    ] ).draw();

I realized my issue was that my Tabular datatable was tied to a collection (the example on hardcodes the data in the table construction) that is not populated. So there was nothing to add. If I link to a populated collection, I at least see the data. Now I need to write the selectors to choose what gets added and what does not

Hey, what do you mean by linking to a populated collection?

It was just an illustration of how new I was (and still am) to writing code. My original issue was that the data was not displaying on the client. What I didn’t take into account was that I hadn’t yet added any data to the Transactions collection, so there was nothing to display. Once I did, it all appeared fine.

Ok, would this work if I’m trying to add lets say a tree table view to the rows?
SOmething that looks like this →

@ecuanaso, I ended up not using datatables (too extensive for what I needed), so I’m not sure.