When working with Parent/Child method, how to show another row's data instead of the original row

ecuanaso

On MeteorJS,
Let me explain some more, so apparently function format ( d ) is the original data source for the row, right. But the way I have my schema is having a field that has a parentId. So what I want to show inside the child rows is the rows that only have parentId exists. But of course we have to filter those child rows by parent/child. Meaning I create a parent row lets say 'Products', then I create a child row and on the parentId field I choose that I want this row to be a child row to the parent->
looks something like this->
http://postimg.org/image/7zji4ndkr/

So how can I configure the format function to show rows that only have parentId that exists.

I'll show you 2 gists of where I am at right now.
This gist that shows the format function and the click event for showing and hiding child rows.

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.title+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

ReactiveTemplates.set("pages.index", 'pagesIndexReplace');
ReactiveTemplates.helpers('pages.index', {
  selector: function () {
    return { parentId: { $exists: false }}
  }
});

ReactiveTemplates.events('pages.index', {
  'click .details-control': function( event, template ) {

      console.log(format); 
      var tr = $(event.currentTarget).closest('tr');
      var table = tr.closest('table').DataTable();
      var row = table.row(tr);

      if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      } else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
      }

      console.log(table)
  }
});

And here's the gist for my defined schema and collection/columns->

orion.pages.addTemplate({
    layout: 'layout',
    template: 'pagesSimple',
    name: 'Simple',
    description: 'Simple template'
}, {
    parentId: {
        type: String,
        label: "Parent",
        optional: true,
        autoform: {
            options: function() {
                return orion.pages.collection.find().map(function(page) { 
                    return { 
                        label: page.title, value: page.title 
                    }; 
                });
            }
        }
    },
    position: {
        type: Number,
        label: 'Order',
        optional: true,
        autoValue: function(){
            var pos = this.field('position');

            if (!pos.isSet) {
                return 0;
            }
        }
    },

    image: orion.attribute('image', {
        label: 'Main Image',
        optional: true
    }),

    storeId : orion.attribute('hasMany', {
        label: 'Select Brands',
        optional: true
    }, {
        collection: Stores,
        titleField: 'name',
        publicationName: 'pagesStores'
    }),

    boxId: orion.attribute('hasMany', {
        label: 'Select Boxes',
        optional: true
    }, {
        collection: Boxes,
        titleField: 'title',
        publicationName: 'pagesBoxes'
    }),
    
    content: orion.attribute('froala', {
      label: 'Content'
    })
});

orion.pages.tabular = new Tabular.Table({
  name: 'PagesIndex',
  collection: orion.pages.collection,
  order: [[1, "desc"]],
  columns: [
    { tmpl: Meteor.isClient && Template.detailsControl },
    { data: 'title', title: i18n('pages.schema.title')},
    { data: 'url', title: i18n('pages.schema.url'), render: function(val, type, doc) { return '<a href="' + RouterLayer.pathFor('page', doc) + '">' + RouterLayer.pathFor('page', doc) + '</a>'; } },
    { data: 'position', title: 'Order',
        render: function( val, type, doc) {
          return '<input data-id="' + doc._id + '" type="number" value="' + val + '" class="order-pages">'
        }
    }, 
    { data: 'actions', className: 'center-align', orderable: false, title: 'Actions',
        render: function (val,type,doc){
          return '<a href="' + Router.path('pages.update', doc) +'" class="btn waves-effect waves-light light-blue accent-4 user-btn-action">Edit</a>'
        },
       tmpl: Meteor.isClient && Template.actionBtns
    }
  ]
});