[resolved] Display simple data table



I am trying to display a simple data table before moving further in Blaze templating.
I don’t want to use 3rd party libs like Tabular because I want to improve my meteor understanding from this sample. I use global publish/subscribtion at the moment and my data seems to be correctly visible from clientside according to msavin:mongol.

I currently got a table of [object Object] like :

_id name value key
[object Object] [object Object] [object Object] [object Object]

for the following data :

    "_id": "okDp6tMQJCBsJg3Wj",
    "name": "Hello",
    "value": "A default value",
    "key": "AD0125K"

And here is my code :

  headers() {
    const re = Object.keys(SampleData.findOne({}) || {});

    console.log(JSON.stringify(re, null, 2));
    return re;
  entries() {
    const re = SampleData.find({});
    console.log(JSON.stringify(re.fetch(), null, 2));
    return re;
<template name="SampleDataTable">
      {{#each header in headers}}
    {{#each entry in entries}}
        {{#each propName in headers}}

Could you mind telling what I miss ?
I’ve try to use entry.[propName] instead but its returns an empty value



you need to create a helper to get propName from entry, something like this (from memory, didn’t try the code)

{{! it is important that each iteration gets assigned to this}}
{{#each headers}}
 <td>{{propName entry}}</td>

 propName(entry) {
  var propName = this;
  return propName in entry ? entry[propName] : `${propName} does not exist`;


here’s a snippet from our production code if it helps

<template name="orderList">
  <!-- order table -->
  <div class="hpanel hgreen">
    <div class="panel-heading hbuilt">
      <span class="panel-title">{{mf 'orders_header'}}</span>
    <div class="panel-body">
      <div class="table-collapse">
        <table class="table table-condensed table-bordered">
            <th>{{mf 'orders_order_number' 'Order #'}}</th>
            <th>{{mf 'orders_placed' 'Placed'}}</th>
            <th>{{mf 'orders_status' 'Status'}}</th>
            <th>{{mf 'orders_total' 'Total'}}</th>
            <th>{{mf 'orders_items' 'Items'}}</th>
            <th>{{mf 'orders_contents' 'Contents'}}</th>
          {{#each sortedOrders}}
            {{> orderItem}}

<template name="orderItem">
  <tr class="{{rowStyle status}}">
    <td data-label="Order #">
      <a href="{{pathFor 'order'}}" class="text-info">{{orderNumber}}</a><br>
      <a class="m-b-xs btn btn-sm btn-outline btn-success"
         href="{{pathFor 'order'}}">{{mf 'orders_view_details_button' 'Details'}}</a>
    <td data-label="Placed">
      {{date createdAt "short"}}<br/>({{daysFromNow createdAt}})
    <td data-label="Status">
      <span class="label {{statusLabelClass status}}">{{OrderStatusForClient status}}</span>
    <td data-label="Total">
      {{currency orderValue}}
    <td data-label="Items">
    <td class="col-md-4" data-label="Contents">
      {{#each lineItemsYesImages}}
        {{> orderslineItemPanelImage lineItem=this}}
      {{#each lineItemsNoImages}}
        <!--<p style="margin-bottom: 0px; white-space: nowrap; width: 250px; overflow: hidden; text-overflow: ellipsis;">-->
        <div class="block-when-small">{{quantityRequested}}&nbsp; x &nbsp;{{productName}}</div>