A reactive table designed for Meteor.
Demo and Feature Comparison: http://reactive-table.meteor.com/
Another Demo: http://reactive-table-leaderboard.meteor.com/
Install reactive table:
mrt add reactive-table
This package adds a handlebars helper called reactiveTable. Create and subscribe to a collection, and pass it to the helper in a template:
{{reactiveTable myCollection}}
When the whole collection should be in the table, it's best to pass in the Meteor collection object (returned by new Meteor.Collection()). You can also pass in the cursor returned by collection.find() to show a subset of the collection, or a plain array to show data that's not in a Meteor collection.
Add bootstrap or bootstrap-3 to style the table, or add your own css. The generated table will have the class 'reactive-table'.
The reactiveTable helper accepts an additional settings argument that can be used to configure the table.
{{reactiveTable collection settings}}
Define the settings in a helper for the template that calls reactiveTable:
Template.myTemplate.helpers({
settings: function () {
return {
rowsPerPage: 10,
showFilter: true,
fields: ['name', 'location', 'year']
};
}
});
showFilter
: Boolean. Whether to display the filter box above the table. Defaulttrue
.rowsPerPage
: Number. The desired number of rows per page. Defaults to 10.fields
: Object. Controls the columns; see below.
To specify columns, add a fields key to the settings object.
Fields can simply be an array of field names (attributes in the collection).
{ fields: ['name', 'location', 'year'] }
To set labels for the column headers, use an array of field elements, each with a key (the attribute in the collection) and a label (to display in the table header).
{ fields: [
{ key: 'name', label: 'Name' },
{ key: 'location', label: 'Location' },
{ key: 'year', label: 'Year' }
] }
You can also compute a function on the attribute's value to display in the table, by adding fn
to the field.
{ fields: [
{
key: 'resources',
label: 'Number of Resources',
fn: function (value, object) { return value.length; }
}
] }
If the key exists in the record, it will be passed to fn
in value
. Otherwise, value
will be null
.
The object
argument contains the full object, so you can compute a value using multiple fields.
You can use HTML in a virtual column by creating a Handlebars SafeString:
fn: function (value) {
return new Handlebars.SafeString('<a href="+Routes.route['view'].path({_id:value})+">View</a>');
}
When adding user-generated fields to the HTML, ensure that they have been properly escaped to prevent cross-site scripting vulnerabilities.
For elements of nested objects and arrays, use mongo's syntax in the key:
{'key': 'emails.0.address', label: 'Email Address'}
Make the event selector be tr
, and you'll have your row object in this
:
Template.posts.events({
'click .reactive-table tr': function (event) {
// set the blog post we'll display details and news for
var post = this;
Session.set('post', post);
}
});
When multiple tables are used in the same application, by default they'll share pagination settings and filters. Add a different group to each table's settings to allow separate table state.
{
fields: [...],
group: 'resources'
}
The default group is 'reactive-table'.
Internationalization support is provided using just-i18n.
Add just-i18n to your project:
mrt add just-i18n
French (fr), Spanish (es), Russian (ru), and Dutch (nl) are the languages we currently have translations for. To set your language to French:
i18n.setLanguage('fr');
For other languages, contribute a translation to reactive_table_i18n.js.