[resolved] Display simple data table

blaze
1

Hello,

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 :

Template.SampleDataTable.helpers({
  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">
  <table>
    <tr>
      {{#each header in headers}}
        <th>{{header}}</th>
      {{/each}}
    </tr>
    {{#each entry in entries}}
      <tr>
        {{#each propName in headers}}
          <td>{{entry[propName]}}</td>
        {{/each}}
      </tr>
    {{/each}}
  </table>
</template>

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

Thanks

1 Like
2

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>
{{/each}}

Template.SimpleDataTable.helpers({
 propName(entry) {
  var propName = this;
  return propName in entry ? entry[propName] : `${propName} does not exist`;
 }
});
2 Likes
3

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>
    <div class="panel-body">
      <div class="table-collapse">
        <table class="table table-condensed table-bordered">
          <thead>
          <tr>
            <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>
          </tr>
          </thead>
          <tbody>
          {{#each sortedOrders}}
            {{> orderItem}}
          {{/each}}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<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>
    <td data-label="Placed">
      {{date createdAt "short"}}<br/>({{daysFromNow createdAt}})
    </td>
    <td data-label="Status">
      <span class="label {{statusLabelClass status}}">{{OrderStatusForClient status}}</span>
    </td>
    <td data-label="Total">
      {{currency orderValue}}
    </td>
    <td data-label="Items">
      {{totalCount}}
    </td>
    <td class="col-md-4" data-label="Contents">
      {{#each lineItemsYesImages}}
        {{> orderslineItemPanelImage lineItem=this}}
      {{/each}}
      {{#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>
        <!--</p>-->
      {{/each}}
    </td>
  </tr>
</template>
1 Like