Develop Reference

Filter table data on dropdown selection React

I have created a table which is already populated by some data. Now I want to filter the results in the table based on a selection in a dropdown value. How Could I do this in React? Can someone guide or provide a sample code to showcase the result?
Below is my code sample:
Dropdown:
<table>
<tbody>
<tr> <td>
<label className="col-form-label"> Auditee </label> </td>
<td className="td-padding td-space">
<select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}>
<option>Select</option>
{this.renderAuditee()}
</select>
</td>
<td> <label className="col-form-label lbl-space"> SME </label></td>
<td className="td-padding">
<select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}>
<option>Select</option>
{this.renderSME()}
</select>
</td>
<td> <label className="col-form-label lbl-space"> Year </label></td>
<td className="td-padding">
<select className="form-control dpwidth" name="Year" onChange={this.handlePeriodChange.bind(this,this)} disabled={this.state.isChecked}>
<option>Select</option>
{this.renderYear()}
</select>
</td>
</tr>
</tbody>
</table>
Data in Table:
<table className="table table-striped table-highlight">
<span className="head">Review2</span>
<tbody>
<tr>
<th> Project ID </th>
<th> Project Name </th>
<th> SME </th>
<th> Auditor </th>
<th> EEECPM</th>
<th> WorldArea </th>
<th> Country </th>
<th> FY Year </th>
<th> FY Period </th>
<th> Review1 Date </th>
<th> No. of Obs. </th>
<th> Total Recom. </th>
<th> Accepted Recom.</th>
</tr>
{
filteredData.length? this.renderTableData(filteredData) : this.renderTableData(data)
}
</tbody>
</table>

As component is rerndered everytime state changes, you should put your filteredData in a state, and update this state with filtered data via setState every time the filter dropdown is clicked. More code will help. I cannot comment so answering here

You can have a sample code in my repo, please check code in development branch.
https://github.com/upretim/react-data-filter
It is bit refined and updated to functional components version of official text, you can check it here:
https://reactjs.org/docs/thinking-in-react.html
Primarily you need to do this:
Create a parent component above, table and drop down.
Update state of parent component, when dropdown is selected.
Pass the value of filter and table data as prop in table component.
So parent of table and dropdown would be a stateful component and table and dropdown would be functional components, receiving props from parent's state

Check item is null or not in ng-repeat and then set the default image

I am using ng-repeat to bind the data but there is an issue that there is an image in a data which I am showing in image column by using {{obj.Image}}
Here is my code
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
Sr. no.
</th>
<th>
Title
</th>
<th>
Image
</th>
<th>
Category
</th>
<th>
SubCategory
</th>
<th>
PostedOn
</th>
<th>
Created By
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in PostedBlogList">
<td>{{$index+1}}</td>
<td><a ng-href="{{'//'+obj.PageUrl }}">{{obj.Title}}</a></td>
<td> <img style="width:90px"src="{{obj.Image}}" /></td>
<td>
{{obj.CategoryName}}
</td>
<td>
{{obj.SubCategoryName}}
</td>
<td>
{{obj.CreatedDate}}
</td>
<td>
<button class="btn btn-primary" type="submit" value="Activate">Activate</button>
</td>
<td>
<button class="btn btn-primary" type="submit" value="Activate">Activate</button>
</td>
</tr>
</tbody>
</table>
I want to display the default image <img src="~/images/mail.png" alt="">
in <td> <img style="width:90px"src="{{obj.Image}}" /></td>
when my object {{obj.Image}} is null.
How can i check the condition?

There are multiple ways to do that.
You can use two img tags and use ng-show to hide one of them depending on obj.image:
<img ng-show="obj.Image" src="{{obj.Image}}">
<img ng-show="!obj.Image" src="default">
You can also have a function in your controller which returns the proper url:
<img src="{{getImage(obj.Image)}}">
$scope.getImage(img) = function{
return img ? img : '~/images/mail.png';
};

You could call a controller a function to decide what the URL would be.
ng-href="{{ showImage(obj) }}"
Code
$scope.showImage = function(obj){
return obj.PageUrl ? '//'+ obj.PageUrl: '~/images/mail.png'
}

How to save the value of table cell using JavaScript and AngularJS?

I want to save the flight number to be able to access it in another html page using the controller and service
My code
<table class="headers">
<thead>
<tr>
<th> Choose Flight</th>
<th> Departs From</th>
<th> Destination</th>
<th> Departs </th>
<th> Flight Number </th>
<th > Price </th>
</tr>
</thead>
</div>
</td>
<tbody ng-repeat="flight in flights" >
<td>
<input type="radio" name="id">
</td>
<!-- <tr ng-repeat="Flight in Flights"> -->
<!-- <td>{{Flight.FlightNumber}}</td> -->
<td>{{flight.origin}}</td>
<td>{{flight.destination}}</td>
<td>{{flight.departureDate}}</td>
<td>{{flight.flightNumber}}</td>
<td>{{p}}</td>
<!-- </tr> -->
</tbody>
</table>

I suppose you using Angular 1 (is it true to Angular 2 anyway).
You have to bind value to your controller by using ng-model (using input). Then store it at your convenience (session, database...) and pass it to an other page.
There is documentation : https://docs.angularjs.org/api/ng/directive/ngModel

Why the pagination of footable is not working?

I'm trying to implement FooTable-2 in my project, but for some reason I can't get the pagination working.
I'm following THIS tutorial and here is what I have so far as a table code:
<div id="mainContent">
<div id="allTrackersDiv" style="display: none;">
<label><b>Active Trackers</b></label>
<table class="activeTrackersTable" id="allTrackersTable"
data-page-navigation=".pagination">
<thead>
<tr>
<th> ID </th>
<th> col 1 </th>
<th> col 2 </th>
<th> col 3 </th>
</tr>
</thead>
<tbody data-bind="foreach: trackersObjArray">
<tr data-bind="click: test">
<td><span data-bind="text: tId"></span></td>
<td><span data-bind="text: tname"></span></td>
<td><span data-bind="text: pname"></span></td>
<td><span data-bind="text: tcreate"></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="pagination"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
The problem is that the paging is not working. I have 22 records in my table and it is supposed to start paging after the 10th record
Here is how it looks:
What am I missing here? At my point of view everything looks pretty fine. What am I missing, I really can't understand my mistake.

You can try mentioning
data-page-size="10"
explicitly.
And if that doesn't work, may be issue is due to dynamic data being added to footable.
Use
$('#myTable').append(html).trigger('footable_redraw');
So that footable will be redrawed and size limit will be applied.
Reference links: Footable data page size not respected and
Other issues due to dynamic data in footable

JQuery - sequential HTML traversal

I have a simple JQ task to complete and I can't find an answer. I have some generated HTML :-
<p align= center >
<table cellspacing=0 border=1>
<caption align=bottom class=captiondataframe></caption>
<tr><td>
<table border=0 class=tablecorporate>
<tbody>
<tr class= firstline >
<th> </th>
<th>WEEK </th>
<th>PERIOD </th>
<th>ILPROD </th>
<th>CNME </th>
<th>QTY </th>
<th>SP </th>
<th>REV </th>
<th>COST </th>
<th>VA </th>
<th>VAP</th>
</tr>
I need to remove the <tr><td> elements on line 4 using JQuery. I had thought about using $(tr:first).remove() but I suspect this will remove the wrong elements on subsequent page loads.
Any ideas?