aslagle / reactive-table Goto Github PK
View Code? Open in Web Editor NEWA reactive table designed for Meteor
Home Page: https://atmospherejs.com/aslagle/reactive-table
License: Other
A reactive table designed for Meteor
Home Page: https://atmospherejs.com/aslagle/reactive-table
License: Other
Could you post an example web page showing the use of the reactive-table package? Thanks
Love this table, thanks for the package.
I'm relatively new at meteor and was wondering if you could help - I want to invoke a bootstrap dialog when clicking on a button within a cell of reactive table. I can use the fn param to assign a function, I have handlebars template all set up for dialog boxes and outside of reactive-table I can invoke dialogs :
{{#bootstrapModal
triggerLabel="Delete"
triggerIcon="fa-trash-o"
triggerClass="btn-danger"
id="deleteModal"
title="Delete Item"
closeLabel="Close it!"
primaryLabel="Bye bye!"
infoId=""
infoName="Hi"
}}
Are you sure you want to delete:
{{/bootstrapModal}}
Is there a way to invoke this/pass params to it using the fn feature of reactive tables?
Can You add ua localisation to reactive_table_i18n.js?
i18n.map('ua', {
reactiveTable: {
filter: 'Фільтр',
show: 'Показати',
rowsPerPage: 'линій на страниці',
page: 'Страниця',
of: 'з'
}
});
Not particularly essential, but it is listed on http://reactive-table.meteor.com and seems fairly straightforward.
How can I detect on which row the user has clicked? I tried
Template.posts.events({
'click .reactive-table .name': function () {
console.log('Clicked on', this.name);
}
})
But this
points to the column definition: {key: "name", label: "Name", fn: function(...)}
rather than the underlying data.
Currently, if you apply fn to your field and you e.g. format bytes to a human readable format, ordering won't work properly. It should be somehow possible to sort on the base value of the field.
Would be nice to be able to customise which field is sorted by default and in ascending or descending order.
Hi, I've been working on building a gui for making collections and reactive-table is throwing
Exception from Deps recompute function: TypeError: Object.keys called on non-object
on line 487
fields = .without(.keys(collection.findOne()), '_id');
now I can console.log the collection and it comes back as a collection, I can setup collectionname = new Meteor.Collection("myCollection") outside of Meteor.startup and that also works but creating the collections within Meteor.startup does not seem to work with reactive table. I can also iterate over data etc from the collection without issues. This might be a Meteor issue but I'm not sure.
Ok I seemed to have figured out the issue. Collection.findOne() is returning undefined.
so it looks like the data isn't ready but I'm using fastrender and iron router meteor 8.0
Would love some help.
Thanks
Using the table (great package, thanks!) for a list of products in $, thus I would prefer to show all the values in the table with two trailing decimals.
It appears the default is to eliminate a trailing zero, so instead of $0.60, I get $0.6 -- how can I set this to show the full $ amt as $0.60?
Thanks.
In a table with blog posts (title, author, date), I'd like to hyperlink the title to a page for the blog post. Ideally this would be an iron-router {{pathFor}}, but is there a way at least to return an HTML <a href="...computed slug...">
anchor?
I'm using a IR scanner and it's super fast on typing but, because every keyup we are triggering a search calling session.set
and many other "fat" things, many chars are lost. I'll solve this applying a setTimeout(search, 200)
on event keyup and if another keyup is triggered, before the 200ms has passed, I'll do a clearTimeout()
and a setTimeout()
again. I'll fix soon, I'm writing this as a reminder.
@dandv, I'm trying out colResizable. It's on a branch called resizable-columns if you want to test it. The columns resize, but the changes don't persist yet.
I don't think this is necessary or particularly useful, given that the full objects are already available through meteor's event handlers, and it will be simpler not to support it. This won't be backwards-compatible, so it's probably best to remove it asap.
If you are at page 2 and then set the items-per-page, say, at 100 items (I'm supposing you have less than 100 items in your table), you will get an empty page without chances to revert, because input fields disappear. I'm going to fix this asap.
It would be great to add some validation for page number and number of rows because currently user is able to add any values and it breaks pagination:
Page 1 of NaN
if rows per page is empty or string
Page 1 of Infinity
if rows per page is 0
'keyup .reactive-table-filter input' should be targeted to an id rather than the input so that people can inject other html input elements into the reactive-table-filter.
For example, I am injecting a start and end date date selector into the reactive-table-filter and when I select a start or end date the 'keyup .reactive-table-filter input' is firing.
If this was tightly bound to an id of filter then people could inject other input elements into the filter div in order to enable server side subscription management.
For example, my start and end date html fragments injected fire their event handlers to be used in the autorun subscription.
For small collection the module works perfectly. But if the collection gets large, the website would slows down.
Is there a way to only, publish/subscribe the data on a page to improve performance?
I like this package but I can't figure out how to get it to work so that it does server side filtering and pagination.
Anything over a few thousand records gets clunky.
Any ideas?
It would be great if users could search across fields and rows to filter results. Perhaps a search box?
If you have a field called active which is a key in reactive table it causes bootstrap to implement it's active css.
This is because reactive table puts the key name into the class of the td.
dauJmxCxDnwuzT7Ms trueWhich results in not being able to use a Collection.active [boolean] field for records.
guess I could change it to isActive
Hello, and thank you for sharing this awsome reactive-table
i would like to pass a transform to my collection.find, to use my models, but some keys are functions so i end up doing this in my template helper
return {fields: [
{key:'functionName', label: "Label", fn: function(v,o){return v.call(o)}
]}
i guess this may go to the package, i will send a patch.
Thank you.
Jamal
Is there a way to make columns conditional?
Inherent use of Mongo is to have collection docs that do not always have the same fields.
I am trying to figure out how to make a column conditional based on the record iterated.
For example
Invoices.customer vs Invoice (that doesn't have a customer record).
Page navigation/filter changes are getting reset when meteor re-renders the table.
Any ideas on why I am getting this text surrounding the pagination?
reactiveTable.show< >reactiveTable.rowsPerPage< >reactiveTable.page< >reactiveTable.of< 1
I have 5 different tables in my app and this is happening to all of them
Also the filter now has >reactiveTable.filter< as the placeholder in the filter, but the filter works.
It still happens after I remove and add again and even after "mrt uninstall --system"
here is my smart.json
{
"meteor": {},
"packages": {
"bootstrap-3": {},
"iron-router": {},
"autoform": {},
"moment": {},
"spin": {},
"stripe": {},
"collection2": {},
"collection-helpers": {},
"connection-banner": {},
"statemachine": {},
"pdfjs": {},
"accounts-entry": {},
"font-awesome": {},
"iron-router-progress": {},
"highcharts": {},
"roles": {},
"accounts-admin-ui-bootstrap-3": {},
"googlemaps": {},
"reactive-table": {}
}
}
will need to be converted for meteor's new rendering engine
Fields now support fn, this is very good feature. I suggest to add another property called "css". css is a function, return a string. This string will be put into the class.
code example: in reactive_table.html source file
Please pay attention on the 5th line, I added {{css}}
and in leaderboard.js example, in leaderboard.js
Template.leaderboard.tableSettings = function () {
return {
fields: [
{ key: 'name', label: 'Full Name' },
{ key: 'name', label: 'First Name', fn: function (name) { return name.split(' ')[0]; } },
{ key: 'name', label:'Last Name', fn:function(name){ return name.split(' ')[1]; }},
{ key: 'score', label: 'Score',
css: function(field, object){
if (field < 10 )
return "class1"
else return "class2"}
}
],
useFontAwesome: true
};
};
In this case, when a player's score is less than 10, the score cell will have a class1, otherwise class2. I can set different color to class1 or class2.
This is useful when (usually) we set negative number to red color.
This feature can be easily added into reactive_table.js inside Template.reactiveTable.helpers.
Please let me know if my description is not clear. I can give you more example.
Got this error after upgrading from Meteor 0.7.2 and reactive-table 0.2.5, to Meteor 0.8.0 and the current reactive-table (checked out from GitHub). The error is triggered by the addedCallback.
The app is pretty complex and creating a minimal example to reproduce the bug will take some work. Hope that might not be necessary :)
Is there a way to pass in html to the reactive table?
Potentially as per example below, sending in an option on the field?
Thanks - LB
Template.report.settings = function() {
return {
fields: [
{ key: 'reference', label: 'Reference' },
{ key: 'typeName', label: 'Type' },
{ key: 'status', label: 'Status' },
{ key: '_id', label: 'Location', html: true,
fn: function (value) {
return '<a href="+Routes.route['view'].path({_id:value})+">View</a>';
}
},
],
attrs: { 'data-id': '_id' }
}
};
'''
Should this Handlebars.SafeString be replaced with Spacebars.SafeString in README and code?
=> App running at: http://localhost:3000/
I20140811-18:55:05.304(-4)? Exception in Mongo write: MongoError: E11000 duplicate key error index: meteor.services.$_id_ dup key: { : "BT5FQJMHNKDG4L9gR" }
I20140811-18:55:05.348(-4)? at Object.toError (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/utils.js:110:11)
I20140811-18:55:05.348(-4)? at /home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/collection/core.js:599:22
I20140811-18:55:05.348(-4)? at Server.Base._callHandler (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/base.js:445:41)
I20140811-18:55:05.349(-4)? at /home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/server.js:468:18
I20140811-18:55:05.349(-4)? at MongoReply.parseBody (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/responses/mongo_reply.js:68:5)
I20140811-18:55:05.349(-4)? at null.<anonymous> (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/server.js:426:20)
I20140811-18:55:05.349(-4)? at emit (events.js:95:17)
I20140811-18:55:05.349(-4)? at null.<anonymous> (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/connection_pool.js:201:13)
I20140811-18:55:05.350(-4)? at emit (events.js:98:17)
I20140811-18:55:05.350(-4)? at Socket.<anonymous> (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/connection.js:422:22)
=> Meteor server restarted
I20140811-18:55:20.612(-4)? Exception in Mongo write: MongoError: E11000 duplicate key error index: meteor.services.$_id_ dup key: { : "BT5FQJMHNKDG4L9gR" }
I20140811-18:55:20.613(-4)? at Object.toError (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/utils.js:110:11)
I20140811-18:55:20.613(-4)? at /home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/collection/core.js:599:22
I20140811-18:55:20.614(-4)? at Server.Base._callHandler (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/base.js:445:41)
I20140811-18:55:20.615(-4)? at /home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/server.js:468:18
I20140811-18:55:20.615(-4)? at MongoReply.parseBody (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/responses/mongo_reply.js:68:5)
I20140811-18:55:20.615(-4)? at null.<anonymous> (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/server.js:426:20)
I20140811-18:55:20.615(-4)? at emit (events.js:95:17)
I20140811-18:55:20.615(-4)? at null.<anonymous> (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/connection_pool.js:201:13)
I20140811-18:55:20.616(-4)? at emit (events.js:98:17)
I20140811-18:55:20.616(-4)? at Socket.<anonymous> (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/connection.js:422:22)
=> Meteor server restarted
I20140811-18:55:25.298(-4)? Exception in Mongo write: MongoError: E11000 duplicate key error index: meteor.services.$_id_ dup key: { : "BT5FQJMHNKDG4L9gR" }
I20140811-18:55:25.298(-4)? at Object.toError (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/utils.js:110:11)
I20140811-18:55:25.299(-4)? at /home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/collection/core.js:599:22
I20140811-18:55:25.299(-4)? at Server.Base._callHandler (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/base.js:445:41)
I20140811-18:55:25.299(-4)? at /home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/server.js:468:18
I20140811-18:55:25.299(-4)? at MongoReply.parseBody (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/responses/mongo_reply.js:68:5)
I20140811-18:55:25.300(-4)? at null.<anonymous> (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/server.js:426:20)
I20140811-18:55:25.300(-4)? at emit (events.js:95:17)
I20140811-18:55:25.300(-4)? at null.<anonymous> (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/connection_pool.js:201:13)
I20140811-18:55:25.300(-4)? at emit (events.js:98:17)
I20140811-18:55:25.300(-4)? at Socket.<anonymous> (/home/brendon/.meteor/packages/mongo-livedata/4821944ffe/npm/node_modules/mongodb/lib/mongodb/connection/connection.js:422:22)
Any ideas? Fresh install, happening as soon as I type in the filter (monitoring the server console). I tried deleting all of the records in that collection and starting fresh... made no difference :(
Instead of having to return the collection from the template helper
table: function(){
return Tables
},
Pass collection as {{reactiveTable Collection}}
So we don't have to write template helpers all over the place.
Support backward capability of helper as well.
There's a lot of prior art when it comes to table/grid components. Would be interesting to know how this library compares to DataTables (check out @aldeed's tabular package), Dynatable, Tablesorter, SlickGrid etc.
UPDATE: Here's a comparison: http://reactive-table.meteor.com/
I think it would be better to move user to page which contains items (first or last) in such case.
Hello,
what do you think of sending the whole "row" object to the fn function as 2nd parameter (line 133) :
return fn(value, object);
so, you can use other keys to compute a virtual column value. It can be ignore in most case, but very useful (in my case at least :))
Anthony.
The template should work without settings - it should use defaults
What do you think of adding translation for filter and pager strings ?
If you agree, i can pull a patch which use just-i18n and provide en and fr locales.
Anthony.
Tried this on Chrome on Windows and Mac, can't select text even outside the table (the "rows per page" text).
So I've been trying to get past this "Exception from Deps recompute function: Error" error ... think I just found a bug.
This works (note the "Duh, Test" initially):
settings: function () {
return {
rowsPerPage: 1000,
showFilter: true,
showNavigation: "never",
group:'clientSingle',
fields: [
{
key:'duh',
label: 'test'
},
{
key: 'employee',
label: 'Team Member',
fn: function (value, object) { return 0; }
},
{
key: 'blocks',
label: 'Total Blocks',
},
{
key: 'completed',
label: 'Completed Blocks'
},
{
key: 'incompleteBlocks',
label: 'Incomplete Blocks',
fn: function (value, object) { return object.blocks - object.completed; }
}
]
};
}
This doesn't:
settings: function () {
return {
rowsPerPage: 1000,
showFilter: true,
showNavigation: "never",
group:'clientSingle',
fields: [
{
key: 'employee',
label: 'Team Member',
fn: function (value, object) { return 0; }
},
{
key: 'blocks',
label: 'Total Blocks'
},
{
key: 'completed',
label: 'Completed Blocks'
},
{
key: 'incompleteBlocks',
label: 'Incomplete Blocks',
fn: function (value, object) { return object.blocks - object.completed; }
}
]
};
}
It fails with this error:
Exception from Deps recompute function: Error
at checkSubtree (http://localhost:3000/packages/check.js?a54cf3c7b3abe9208d064621eb80a3ecaf2f4add:235:11)
at check (http://localhost:3000/packages/check.js?a54cf3c7b3abe9208d064621eb80a3ecaf2f4add:49:5)
at _.extend._getFindOptions (http://localhost:3000/packages/mongo-livedata.js?ff5d7a0fd0742a865dba1e613726b435ae06e9d3:303:7)
at _.extend.find (http://localhost:3000/packages/mongo-livedata.js?ff5d7a0fd0742a865dba1e613726b435ae06e9d3:323:39)
at Object.Template.reactiveTable.helpers.sortedRows (http://localhost:3000/packages/reactive-table.js?5a966e4aeb892bebd6f879084179af63266948ea:637:40)
at http://localhost:3000/packages/blaze-layout.js?58621fa8e3ed65d10240815d5ba3fb34e2e9fdc5:520:21
at Object.Spacebars.call (http://localhost:3000/packages/spacebars.js?f49560fc90a8d71b7637d9596696078881b8c812:173:18)
at Component.HTML.TABLE.HTML.TBODY.UI.Each.UI.block.self [as __sequence] (http://localhost:3000/packages/reactive-table.js?5a966e4aeb892bebd6f879084179af63266948ea:190:24)
at http://localhost:3000/packages/ui.js?f0696b7e9407b8f11e5838e7e7820e9b6d7fc92f:2688:19
at http://localhost:3000/packages/observe-sequence.js?2d685c5e1f0a3395de32e4cd78255cc082f7d1b5:116:17
I know it's just a "return 0;" - but ANY function used there regardless causes this error... I also tried removing the last object's function and it made no difference... Something about the FIRST object's function is breaking things. It's a nasty issue because nothing rendereds on the page once this happens.
Let me know if it's just me, maybe i'm doing something silly?
Thanks for all your hard work- this package is phenomenal once you get the swing of it... DataTables fooled me- it looked so good but ended up having way more issues that it was worth... this is much more Meteor like.
Is it possible to access the "this" object through other events than click on the row ?
In my project, I would like to be able to access the "this" object by clicking on a link in a cell.
Thanks and very helpful package,
Regards
Gabor
The pagination control is always shown, even if the table is destined to have fewer records than rowsPerPage, so the user will always see Show 10 rows per page - Page 1 of 1
. An ability to toggle its display from settings
, or an autohide
option would be nice.
The filter control could be optional as well.
As a workaround, they can both be hidden via CSS, so not a big issue.
EDIT: Closed as more a Meteor/bad code issue, not specific to Reactive Table.
I have a problem with timing/rendering of dynamic content based when using Template.reactiveTable as the data source.
Here is a complete explanation: http://stackoverflow.com/questions/25575845/reactive-meteor-templates-and-deps-dependency-update-a-template-when-another
The code will run effectively when I use a jQuery selector NOT from Template.reactiveTable. However, when I attempt to select the text from my reactiveTable the operation fails.
The code does on occasion work, typically after I make a significant code change and hard refresh the page, however upon subsequent page loads the problem persists.
Can I use Template.reactiveTable.rendered to set the data context and then pass it to another template to dynamically create some buttons? I need to somehow retrieve whatever content is currently rendered in the table (constantly changing) and pass it to a distinct buttons template.
I can see this being a potential add on to the table, since I aim to generate 'helper buttons' for the filter box. When user clicks on the button, it will populate the filter bar and reactiveTable will do it's things.
Defaulting to 10.
Not a huge issue, but a nice to have form a UX standpoint since there's no button to click to "Filter" and the only way to run the filter is to press Enter. Should search after more than X ms passed since last input.
Check the demo and try to input "✘" or "partial" on filter, it is strange.
EDIT: It filters everything - I'm supposing it's because you return html on these tds?
Setting to optionally use bootstrap's pagination would be nice
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.