How to add checkbox column? If I don't have it in collection?

[markudevelop]

Hi, Having hard time figuring how can I add a checkbox column to the table should I create it inside collection? Here is my current table:

{{> reactiveTable collection=items showColumnToggles=true class='table table-hover' }}

Meteor.subscribe("items");
Template.productsPage.helpers({
  items: function() {
    return Items;
  }
});

I'm just displaying all collection columns and it works nicely but I still would like to add checkbox column as first one. And can I get the row data for manipulation using that checkbox?

[aslagle]

You'll need the fields option. Add a helper to return a list of fields, one for each column. To put a checkbox in the header, set the label to something like

label: function () { return new Spacebars.SafeString("<input type='checkbox' />"); }

To put checkboxes in the rows, set fn

fn: function (value, object) { return new Spacebars.SafeString("<input type='checkbox' />"); }

object contains the full row data if you want to use it to determine whether the checkbox should be checked or show additional text with it.

For setting up events when it's clicked, you can do something like the second example under using events.

Hope that helps!

[markudevelop]

It helps greatly @aslagle Thank you so much, I been digging it for hours and I'm starting to get the hang of it. What would you say the limit for the reactive-tables right now for number of information It can hold? I have seen with around 500~ rows it's starting to get slower (Well you have to wait for the loading ~5-8 seconds) kinda wish it was faster, I don't need massive amount of rows I think in the range of 300-800. But still wishing for the best user experience, Is it safe to assume that reactive-table will support some kind of better performance boost in the near future? Because I really wanna use it, I have tried meteor-pages it's fast but it doesn't have this awesome filter and sorting that is already here and I hate the auth function they have I wanna use meteor functions publish/subscribe=)

[aslagle]

The largest table I have is about 400 rows, and I do show a loading message for a few seconds but once it's loaded, it's very fast. I'm planning to try to do server-side pagination and filtering sometime soon, but primarily to support collections that are too large to subscribe to otherwise. It would help with the initial load time but it could also make page or filter changes slower, so it won't necessarily be a better user experience for smaller tables. It would be great to make everything fast but I don't want to promise anything :)

[vinaykaran]

I tried this and the checkbox on the page does not check when i click on it. It remains unchecked.I can see the value is changed using the console statement but onthe page the checkbox remains unchecked. I am able to get the id of the object however. the classname of the checkbox is slew.

if (event.target.className == "slew") { console.log(event.target.value); if(event.target.value=="on") $('[class="slew"]').val('off'); else $('[class="slew"]').val('on');

}

[aslagle]

The checkbox state is probably determined by the value in your collection, so your click handler needs to change the collection, and the display will update automatically. If you change the DOM element, it will just change back to what's in the collection.

[vinaykaran]

ok i got to add the checkbox as a virtual column including on the header and was able to get the id of the row of the checkbox i clicked. But there is a problem when i click on the checkbox in the header. My code below

tableSettings:function(){ return { rowsPerPage: 3, showNavigation: 'auto', showFilter:true, showColumnToggles: true, showColumnToggles:true, currentPage: Template.instance().currentPage, fields: [ { key:'name', label:'Builder Name'}, { key:'', label: function (value,object) { return new Spacebars.SafeString(""); }, fn: function (value, object) { return new Spacebars.SafeString(""); }, sortable:false, },

My template.events file is below. the class selectall is not being handled and does not give the console log statement but class selectone works and the console log statement prints.

Template.builders.events({

'click .reactive-table tr':function(event){ var post = this; Session.set('post', post); if (event.target.id=="selectall") console.log("hello selected all ");

},

});

[vinaykaran]

ok i got to figure out how to catch the event when checkbox is clicked on the header, we just have to use'click .reactive-table th':function(event) instead of table tr event

[vinaykaran]

I need help. I am using reactivetable. I added a checkbox column for all rows including the label. I want to select the label row checkbox and click on a delete button which will delete all rows on the current page from my Meteor collection. How can i do this? I have written Javascript that selects all the other checkboxes when the label check box is checked. How can i map the checkboxes created in the reactive table to the this._id of the table row so that i can bulk delete the selected rows.

[aslagle]

If you're storing the checkbox states with the ids somewhere, you can use that, but otherwise you'll probably have to put the ids as data attributes in the DOM and look them up that way.