Как динамически создавать таблицы с использованием шаблонов

Question

Я создаю шаблон для таблиц, они будут заполняться контентом из БД, поэтому количество столбцов и строк может отличаться. Пока это шаблон, который у меня есть:

<!-- 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;
);

проблема с этим подходом состоит в том, что заполнить шаблон очень сложно, мне нужно использовать три слоя, и каждый из них использует "статическое" имя и не подходит для mongoDB.

Я хотел бы заполнить этот шаблон следующим образом:

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"]}]
}

так что вопрос, как я могу это исправить?

Answer 1

Уже есть пакеты, которые очень хорошо отображают таблицы:

• реактивный стол - самый метеорологический пакет
• response-datatables - использует мощную библиотеку Datatables.net

Прежде чем разрабатывать собственный шаблон таблицы, вы можете подумать об этом заранее и посмотреть, понадобятся ли вам:

• сортировка
• пейджинг
• фильтрация
• встроенное редактирование
• изменение размера или переупорядочение колонки (желательно с сохранением)

Если это так, вы сэкономите много времени и усилий, используя существующий пакет.