I have a wait list type application I am creating. I currently have it where my table will populate with the collection. I want to be able to press a button and that row in the table be moved to the bottom of the table. Here is where the table is populated.
<tbody>
{{#each student}}
<tr class="accordion-toggle mainRow"> <!--mainRow if want whole row to change green-->
<td>{{> expandButton}}</td>
<td>{{Name}}</td>
<td>{{PhoneNumber}}</td>
<td>{{VipID}}</td>
<td class="selectionChange">{{> buttonSelections}}</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="{{this._id}}">
<table class="table table-striped">
<thead id="innter-table">
<tr class="info">
<th id="inner-heading">Reason for Visit</th>
<th id="inner-heading">Current Major</th>
<th id="inner-heading">Intended Major</th>
<th id="inner-heading">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ReasonForVisit}}</td>
<td>{{CurrentMajor}}</td>
<td>{{IntendedMajor}}</td>
<td>{{Comments}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
{{> autoformModals}}
{{/each}}
</tbody>
Here is the template for the button:
<template name="buttonSelections">
...//other code for different buttons
<button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-arrow-down"></span>
</button>
... //other code for different buttons
</template>
I know I'll need some type of event for the button. but I'm not sure how to go about getting the item in the collection to move in the collection so that when it populates the table again, it will move to the bottom.
How do I get the collection to reorder itself so that the selected item will move to the end of the collection?
you won't "move" the item in your collection, what you'll do is sort the collection on the client so it shows how you want. i don't see the relevant helper, but it would all look something like this:
<template name="Students">
{{#each student in students}}
{{student.name}}
{{/each}}
</template>
in the JS, it's pretty standard stuff: subscribe to the collection in the onCreated(), then the helper sorts the collection how you want. here, i'm making up a field, "waitListedTime", by which the collection sorts. your button press could timestamp it for the selected student, and the helper would run reactively and your student list would update on screen.
Template.Students.onCreated(function() {
this.subscribe('students');
});
Template.Students.helpers({
students() {
return Students.find({}, {sort: {waitListedTime: 1}});
}
});