Develop Reference

How to change value of input from another input in VueJS

I have two grids of text boxes as shown here:
Input Boxes
The goal is that the user would fill out the above boxes and then as they fill out the below boxes, the above boxes auto update. ie if you entered 100 in the first box on the top and then 75 in the first box at the bottom, the first box would change to 25.
I tried to use onchange() but was unsuccessful. v-model seems to cause some problems with its two way binding, which makes sense. Any help is appreciated.
Here is the HTML that populates the input boxes:
> <form v-on:submit.prevent="addNewTask">
<table>
<thead>
<tr>
<th></th>
<th v-for="(column, columnIndex) in columns" :key="columnIndex">{{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, rowIndex) in records" :key="rowIndex">
<td>{{record.row}}</td>
<td v-for="(detail, index) in record.details" :key="index">
<input type="text" v-model="detail.value">
</td>
</tr>
</tbody>
</table>
<br><br>
<table>
<thead>
<tr>
<th></th>
<th v-for="(columnS, columnIndexS) in columns_Spend" :key="columnIndexS">{{columnS}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(recordS, rowIndexS) in records_Spend" :key="rowIndexS">
<td>{{recordS.rowS}}</td>
<td v-for="(detailS, indexS) in recordS.details_Spend" :key="indexS">
<input type="text" v-model="detailS.value_Spend">
</td>
</tr>
</tbody>
</table>
<br><br>
<button v-if="this.isEdit == false" type="submit" class="btn btn-success btn-block mt-3">
Submit
</button>

To start, split up the <td> nodes into child components, and emit their value on input change to the parent (main) component. Then use a method to calculate and set the remaining value for the "other" box child component (saved presumably inside an Array, you need to find the right element inside that Array in that method). The changed array will automatically update the other child component, as it is bound to the prop.

how to apply pagination to a dynamic table in react js

I'm trying to apply pagination to a dynamic table which is created by fetching data from an API.
I've applied pagination while I was creating bootstrap cards from the same data but I don't know how to do this when creating a table.
here is the code on which I want to apply pagination-
render(){
return(
<div className='container'>
<table className='table table-striped'>
<thead>
<tr>
<th>User_Id</th>
<th>User_Name</th>
<th>Email</th>
<th>Profile Picture</th>
</tr>
</thead>
<tbody>
{this.state.arr.map((card)=>{
return(
<tr>
<td>{card.user_id}</td>
<td>{card.user_name}</td>
<td>{card.email}</td>
<td>{'http://api.getlessuae.com/'+card.profile_picture}</td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
</tr>
) })}
</tbody>
</table>
</div>
)
}
for now, I have 20 users on the table and I want to show only 5 users per page.
the table looks like this-

You can use react-paginate https://www.npmjs.com/package/react-paginate
<ReactPaginate
previousLabel={'previous'}
nextLabel={'next'}
breakLabel={'...'}
breakClassName={'break-me'}
pageCount={this.state.pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={this.handlePageClick}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
activeClassName={'active'}
/>

Meteor - get object from Footable with a button in hidden column

I work on meteor with footable. I fill the table with a {{each}}.
I need to set a button in this footable, on a hidden column, like here. In my helper, I want to get corresponding object by writing:
'click #updateFilter': function(evt) {
console.dir(this);
}
It works as long as the button is not in a <td> tag or if the button is not on a hidden column. The following html code doesn't work, console.dir(this);give me something wrong.
<table class="table footable table-stripped toggle-arrow-tiny">
<thead>
<tr>
<th>ID</th>
<th data-hide="all">update</th>
</tr>
</thead>
<tbody>
{{#each filters}}
<tr>
<td>{{_id}}</td>
<!-- **********Problem is here*********** -->
<td>
<button id="updateFilter" class="btn btn-w-m btn-primary m-t btn-block">Update</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
How can I access to my object data in this case?

Inline edit in table

i have 2 table in which i can add and delete elements .. elements have 2 date and 1 number field.. So can you give a direction for the easy way to make them editable inline,but they are not only text or number when i click on date it need me to show custom date picker ...But i need to edit only the one date or the number i don't want to edit all the line when i double click it..only that field what i clicked.Thanks :) Btw it is all react directive.
I need something like that
render: function () {
var itemMap = this.state.items.map(function (item, i) {
return (
<tr key={i}>
<td><input type="checkbox" checked={item.selected} onClick={this.handleChange.bind(this,i)} /></td>
This i want to change with inline edit -> <td ><FormattedDate value={item.startDate}/></td>
This i want to change with inline edit -> <td><FormattedDate value={item.endDate}/></td>
This i want to change with inline edit -> <td>{item.workInHours}</td>
<td><label type="button" onClick={this.handleShowModal.bind(this,i)}><img height="30px" src="moliv.jpg"/></label>
</td>
</tr>
);
}.bind(this));
return (
<div>
<button className="btn btn-primary center-block" onClick={this.addElem}>Add</button>
{this.state.list.theList.length > 0 ? <button className="btn btn-primary" onClick={this.putResult}>Put result</button> :null}
<table className="table scroll2">
<thead>
<tr className="danger">
<th><input type="checkbox" checked={this.state.allChecked} onClick={this.toggleAll}/></th>
<th>Start Date</th>
<th>End Date</th>
<th>Hours</th>
<th></th>
</tr>
</thead>
<tbody>
{itemMap}
</tbody>
</table>
{this.state.items.length > 0 ? <button type="button" className="btn btn-danger" onClick={this.deleteItems}>Remove</button> : null}
<Modal parentState={this.state} modalPropsId={this.props.theProps.id} handleHideModal={this.handleHideModal}/>
</div>
);

Javascript Array displaying new entries on the front instead of back

I have a table that I am trying to add an empty row to the end of. (Eventually I will add input boxes and allow saving)
<div ng-repeat="rule in model.rules">
<table id="" datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered" style="margin-bottom: 2%">
<caption>{{rule.CategoryName}}</caption>
<thead>
<tr>
<th>Order</th>
<th>Rule</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="subRule in rule.Rules">
<td>{{subRule.Sequence}}</td>
<td>{{subRule.Name}}</td>
<td><button type="button" ng-click="removeRule($subRule)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" ng-click="addRule(rule)">Add Rule</button>
</div>
Controller:
$scope.addRule = function (rule) {
rule.Rules.push({ key: rule.Rules.length });
console.log(rule.Rules);
};
Before the click:
After the click:
As you can see the empty TR is popped to the front of the array on the page but:
The array has the data in the right order, the screen just puts them in the front.
Why aren't the new tr's added to the end of the table?