html - Populate bootstrap table in meteor with dynamic data using {{#each}} OR create dynamic column width in bootstrap grids -

my question sort of combination of unanswered parts of this question , this one. i'm using meteor , trying make table or grid populated dynamic data mongodb, i'm having trouble finding method accomplishes want to. have grid uses {{#each}} tag data mongo, based on jim mack's answer question in first link. here bit of sample code:

<template name="projectlist">     {{#each projects}}         {{> projectrow }}     {{/each}} </template>  <template name='projectrow'>     <div class='row span12'>     <div class="projectrow">         {{#each row }}             {{> projectitem}}         {{/each}}     </div>     </div> </template>  <template name="projectitem">     <div class="span6 projectitem nameitem"> {{name}}</div>     <div class="span6 projectitem numberitem">{{number}}</div> </template> 

this works great , gets data, discussed in second link, columns must fixed width, since dynamic width not option according bootstrap grid documentation. if use tags, {{#each}} no longer works, , can't figure out how data table.

does have method work getting dynamic data mongodb populate table in meteor or other way achieve both dynamic-width columns , dynamic mongodb data?

don't use bootstrap classes if want dynamic widths, use flexbox. rid of bootstrap row & instead have div display = flex. flex direction set row default, you'll achieve want. child divs flex children, they'll have space require, unless set flex on them.