Draw each element of array in new row with DataTables (Meteor Tabular)

Question

I am using the Meteor Tabular package which implements DataTables. I am trying to create a table from a Mongo collection. The collection has one document of the form

{
  input: Array[365],
  output: Array[365],
  date: Array[365]
}

I define the table in Meteor with the following code

TabularTables.MyTable = new Tabular.Table({
    name: "MyTable",
    collection: MyTable,
    columns: [
        {data: "input", title: "Input", searchable: false},
        {data: "output", title: "Output", searchable: false},
        {data: "date", title: "Date", searchable: false}
    ],
    order: [[1, "desc"]],
    pageLength: 10
});

The problem is that when this is drawn, all 365 elements of each variable end up in a single cell, so I have one massive row. I want each element to be created in a separate row, i.e.

Input      Output      Date
input[0]   output[0]   date[0]
input[1]   output[1]   date[1]

whereas it is currently

Input            Output            Date
input[0...364]   output[0...364]   date[0...364]

Answer 1

You will need to transform your data and then put it into a local collection, since that package doesn't accept arrays (in contrary to what I thought earlier).

This seems to work:

TabularTables = {};
local =  new Meteor.Collection();

var data = MyTable.findOne();
if (data) {
    local.find().forEach(function(x) { local.remove(x._id) });
    for (var i in data.input) {
        local.insert({
            input: data.input[i],
            output: data.output[i],
            date: data.date[i]
        });
    }
}

TabularTables.MyTable = new Tabular.Table({
    name: "MyTable",
    collection: local,
    columns: [
        {data: "input", title: "Input", searchable: false},
        {data: "output", title: "Output", searchable: false},
        {data: "date", title: "Date", searchable: false}
    ],
    order: [[1, "desc"]],
    pageLength: 10
});

Note that this may no longer be reactive. But I'm assuming that your data in those big arrays is not going to change either, or else you would probably change your schema to be more compatible with meteor to begin with. So hopefully that's not a problem.

Answer 2

Since TabularTables doesn't allow for arrays, you could try and use the aslagle:reactive-table Meteor package instead. The example on the package's git page shows how you can use mongo's syntax on your array.