aslagle / reactive-table Goto Github PK

It would be great if users could search across fields and rows to filter results. Perhaps a search box?

Defaulting to 10.

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.

Which results in not being able to use a Collection.active [boolean] field for records.

guess I could change it to isActive

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.

• pagination
• sorting by clicking on column headers
• filtering
• resizable columns
• reorderable columns
• in-place editing
• mobile/responsive support

UPDATE: Here's a comparison: http://reactive-table.meteor.com/

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?

The template should work without settings - it should use defaults

Can You add ua localisation to reactive_table_i18n.js?

i18n.map('ua', {
reactiveTable: {
filter: 'Фільтр',
show: 'Показати',
rowsPerPage: 'линій на страниці',
page: 'Страниця',
of: 'з'
}
});

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

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?

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.

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

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 :)

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?

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.

will need to be converted for meteor's new rendering engine

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?

Tried this on Chrome on Windows and Mac, can't select text even outside the table (the "rows per page" text).

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.

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.

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.

@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.

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.

=> 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 :(

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

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

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.

Not particularly essential, but it is listed on http://reactive-table.meteor.com and seems fairly straightforward.

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.

Setting to optionally use bootstrap's pagination would be nice

'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.

Would be nice to be able to customise which field is sorted by default and in ascending or descending order.

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.

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.

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.

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' }
  }
};
'''

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?

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": {}
}
}

Could you post an example web page showing the use of the reactive-table package? Thanks

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.

I think it would be better to move user to page which contains items (first or last) in such case.

Should this Handlebars.SafeString be replaced with Spacebars.SafeString in README and code?

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).

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.

Page navigation/filter changes are getting reset when meteor re-renders the table.