Meteor-Community-Packages / Meteor-Community-Packages/meteor-tabular

Suggested way to create dynamic tabular table

Open
#367 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
360
Forks
132
PR merge metrics
No merged PRs in 30d

Description

Here is how I solved my issue of generating a dynamic tabular:

1.
Blaze html dynamicTabular.html
```

{{#if isTabularReady }}
{{> tabular table=getTabular selector=selector class="table table-striped table-bordered table-condensed"}}
{{else}}
{{createTable}}
{{/if}}

```

Client file: Blaze .js dynamicTabular.js
```
Template.dynamicTabular.onCreated(function () {
this.tabular = new ReactiveDict();
});

Template.dynamicTabular.helpers({
isTabularReady: function() {
var self = Template.instance();
return self.tabular.get("tabular.isReady");
},
getTabular: function() {
var self = Template.instance();
return Tabular.tablesByName[self.tabular.get("tabular.name")];
},
createTable: function() {
// here I am displaying only 1 column based on the data context of dynamicTabular
var columns=[{data:this.data, title: this.title}];
var selector = this.selector || {}; // use the selector passed to the data context of dynamicTabular
var collectionName = this.collectionName; // name of the variable storing the new Mongo.Collection("")

var tabularName = Random.id();
var self = Template.instance();

Meteor.call("createTabular", tabularName, collectionName, columns, selector, function(err, results) {
if (!err) {
new Tabular.Table({
name: tabularName,
collection: eval(collectionName),
"lengthMenu": [[10, 25, 50, -1],[10, 25, 50, "All"]],
responsive: true,
autoWidth: true,
selector: function() {
return selector;
},
buttonContainer: '.col-sm-6:eq(0)',
columns: columns
});

self.tabular.set("tabular.name", tabularName);
self.tabular.set("tabular.isReady", true);
}
});
},
```

Server side:
```
Meteor.methods({
"createTabular" : function(name, collectionName, columns, selector) {
check(name, String);
check(columns, Match.Any);
check(selector, Match.Any);
new Tabular.Table({
name: name,
collection: eval(collectionName),
"lengthMenu": [[10, 25, 50, -1],[10, 25, 50, "All"]],
responsive: true,
autoWidth: true,
selector: function() {
return selector;
},
buttonContainer: '.col-sm-6:eq(0)',
columns: columns
});
}
})
```

Usage would be:
`{{> dynamicTabular data="_id" title="key" collectionName="Docs"}}`

- Should I delete the tabular on the server once the template is destroyed?

Contributor guide

Open the contributing guide

Research direction

Start by reviewing dynamicTabular.html, dynamicTabular.js, and the createTabular Meteor method. Trace what happens when the dynamicTabular template is destroyed and verify or document the expected cleanup of the server-side tabular; done means the lifecycle behavior is clear and consistent with the reported usage.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
full-stack
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.