0

My question is sort of a combination of the unanswered parts of this question and this one. I'm using Meteor and trying to make a table or grid that is populated with dynamic data from MongoDB, but I'm having trouble finding a method that accomplishes everything I want it to. I currently have a grid which uses the {{#each}} tag to get the data from mongo, based on Jim Mack's answer to the question in the first link. Here is a 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 and gets all the data, but as discussed in the second link, the columns must be a fixed width, since dynamic width is not an option according to bootstrap grid documentation. If I use tags, the {{#each}} no longer works, and I can't figure out how to get my data into the table.

Does anyone have a method that could work for getting dynamic data from mongoDB to populate a table in Meteor OR some other way to achieve both dynamic-width columns and dynamic MongoDB data?

Community
  • 1
  • 1
user3345626
  • 223
  • 1
  • 3
  • 13

1 Answers1

1

Don't use bootstrap classes if you want dynamic widths, use flexbox. Get rid of the bootstrap row & instead have a div with display = flex. the flex direction will be set to row by default, so you'll achieve exactly what you want. Then all child divs will be flex children, so they'll have as much space as the require, unless you set flex on them.

Matt K
  • 4,813
  • 4
  • 22
  • 35
  • Interesting, thanks. I haven't heard of flex before.. are you talking about CSS flexbox? Meteor won't let me put "display = flex" into a div. – user3345626 Jul 21 '15 at 22:08
  • yeah, flexbox is css. – Matt K Jul 21 '15 at 22:09
  • Ah, okay. I added "display: flex" to the CSS for .projectRow and that did it. Do you know if flex can make it so there's one uniform column that's the width of the widest element? (forgive me if that should be posted as a new question--I'm not "new" to SO so I know there are strict ways of doing things, but I haven't used it much so I don't always know what they are) – user3345626 Jul 21 '15 at 22:15
  • you could consider using a table, that'll do exactly what you want. or, if you stuck with flexbox, you'd want to create project columns, not project rows & use flex-direction: column. – Matt K Jul 21 '15 at 22:23
  • Ok, I'll try that. Thank you so much for your help – user3345626 Jul 21 '15 at 22:33