Bind data in aldded tabular table on dropdown change event

Question

I am using aldeed tabular table to display record. I have drop down of status filed. I want to filter records based on drop down selection.

Is there any way to do this?

Answer 1

Use a selector parameter for your tabular component in your template to filter values client side only. Something like:

<template name="invoiceList">
  <div>
    {{> tabular table=TabularTables.Invoices selector=statusSelector class="table table-bordered table-striped table-hover"}}
  </div>
</template>

statusSelector is a template helper that should return a Mongo-style selector. That selector could be constructed from a session variable. Set the session variable to the dropdown selected value and get the value in the template helper.

For example:

Template.invoiceList.events( {
  'change #statusdropdown': function(evt) {
    var currentTarget = evt.currentTarget;
    var statusValue = currentTarget.options[currentTarget.selectedIndex].value;
    Session.set('selectedstatus', statusValue);
   }
});

Template.invoiceList.helpers({
    statusSelector: function () {
        var selector = {};
        var selectedStatus = Session.get('selectedstatus');
        if (selectedStatus)
            selector = {status: selectedStatus}; // This is the selector/filter that is going to be applied to the collection.
        return selector;
    }
});

It is explained here as well: https://github.com/aldeed/meteor-tabular#displaying-only-part-of-a-collections-data-set