How to create table using Templates dynamically

Question

I creating a template for tables, they are going to be populated with content from the DB, so the number of columns and rows may vary. So far this is the template that I have:

<!-- T_table.html -->
<template name="T_table">
    <table class="table table-striped table-bordered">
        <thead>
            {{>tableHeader header}}
        </thead>
        <tbody>
            {{>tableRow body}}
        </tbody>
    </table>
</template>

<template name="tableHeader">
    <tr>
        {{#each info}}
            <th>{{header}}</th>
        {{/each}}
    </tr>
</template>

<template name="tableRow">
    {{#each row}}
        <tr>
            {{#each info}}
                <td>{{data}}</td>
            {{/each}}
        </tr>
    {{else}}
        <tr>
            <td class="no-data">No Data</td>
        </tr>
    {{/each}}
</template>


<!-- main.html -->
<template name="main">
    <div class="container">
        {{#each allTables}}
            {{>T_table}}
        {{/each}}
    </div>
</template>


// main.js
Template.main.helpers({
allTables: function () {
var firstTable = {
            header: {
                info: [
                    {
                        header: "ID"
                           },
                    {
                        header: "Name"
                           },
                    {
                        header: "State"
                           },
                    {
                        header: "Started"
                           },
                    {
                        header: "Host"
                           }
                       ]
            },
body: {
    row: [
        {
            info: [
                {data: 99}, {data: "task 0.0:99"}, {data: "FINISHED"}, {data: "12 minutes ago"}, {data: "12 minutes ago"}
                ]
        },
        {
            info: [
                {data: 98}, {data: "task 0.0:98"}, {data: "FINISHED"}, {data: "12 minutes ago"}, {data: "12 minutes ago"}
                ]
        }
    ]
}
            };

    }
    }
return firstTable;
);

the problem with this approach is that it's very complicated to populate the template, I have to use three layer and each of them is using a "a static" name and isn't mongoDB friendly.

I would like to populate that template like this:

obj= {
    header: ["ID", "Name", "State", "Started", "Host"],
    body: [{row:[99, "task 0.0:99", "FINISHED", "12 minutes ago", "12 minutes ago"]}, {row:[98, "task 0.0:98", "FINISHED", "12 minutes ago", "12 minutes ago"]}]
}

so the question is, how can I fix this?

Answer 1

There are already packages that display tables very well:

• reactive-table - the most Meteor-native package
• reactive-datatables - uses the powerful Datatables.net library

Before developing your own table template, you might want to think ahead and see if you'll need:

• sorting
• paging
• filtering
• inline editing
• column resizing or re-ordering (preferably with persistence)

If so, you'll save a lot of time and effort by using an existing package.