I ran into a problem where I need to output my task objects into a table.
I have created status columns (New, To do, In progress etc), but I have no idea how do I output my tasks into a particular table cell depending on its status and if there are going to be two task objects with the same status then for another one I would like to create a separate row so they won't both be inside the same cell.
Unfortunately, I cannot provide any code example since I've tried it so many ways and none of them worked. Here is how I do it now, but it doesn't work as I need.
<div className="taskboard">
<table className="table" id={'board_'+this.amount}>
<tbody>
<tr>
<th className="0">Story</th>
<th className="1">New</th>
<th className="2">To do</th>
<th className="3">Pending</th>
<th className="4">In progress</th>
<th className="5">Internal Review</th>
<th className="6">Customer Review</th>
<th className="7">Done</th>
<th className="8">Reject</th>
</tr>
<tr>
{this.tasks.map((task, i) => <td key={i}><Task task={task}/></td>)}
</tr>
</tbody>
</table>
</div>
how about this? the idea is that for each task you create a <tr/>, then inside of it you decide whether or not to display a <Task /> inside of a <td /> based on the Status of the task (new, pending, etc).
< div className = "taskboard" >
<table className="table" id={'board_' + this.amount}>
<tbody>
<tr>
<th className="0">Story</th>
<th className="1">New</th>
<th className="2">To do</th>
<th className="3">Pending</th>
<th className="4">In progress</th>
<th className="5">Internal Review</th>
<th className="6">Customer Review</th>
<th className="7">Done</th>
<th className="8">Reject</th>
</tr>
{this.tasks.map((task, i) =>
<tr>
// maybe here insert some cells that are common for all task states. like name, date, etc.
// then choose which state to put the task into:
<td>
{ task.status === "New" &&
<Task task={task}/>
}
</td>
<td>
{ task.status === "Pending" &&
<Task task={task}/>
}
</td>
// more <td />
</tr>
)
}
</tbody>
</table>
< /div>
eventually you can refactor the whole <tr /> into a new component that receives a task object and displays a row with the relevant cells
This can also be rendered with a little div - css styling as well.
Here is a working fiddle on ReactJS.
Hope this helps.
JSFiddle
var data = {
"new_item": ['Story 10', 'Story 11'],
"to_do": ['Story 1', 'Story 5'],
"pending": ['Story 2', 'Story 3', 'Story 7'],
"in_progress": ['Story 4', 'Story 6', 'Story 8', 'Story 9']
};
var Container = React.createClass({
render() {
return <div className='divTableBody'>
< StatusColumn name = 'New'
id = 'new_item' ></StatusColumn>< StatusColumn name = 'To Do'
id = 'to_do' > < /StatusColumn> < StatusColumn name = 'Pending'
id = 'pending' > < /StatusColumn> < StatusColumn name = 'In Progress'
id = 'in_progress' > < /StatusColumn> < /div > ;
}
});
var StatusColumn = React.createClass({
render() {
var _this = this;
var items = [];
for( var item in data){
data[item].map(function(x) {
if(item === _this.props.id)
items.push(<div className='divTableCell'>{x}</div>);
})
}
return <div className='divTableRow'>
<div className='divTableHeading'>{this.props.name}</div>
<div>{items}</div>
< /div>
}
});
ReactDOM.render( < Container / > , document.getElementById('root'));
Related
I get the below error when trying to loop over an object using *ngFor directive in angular:
Type 'Inventory' is not assignable to type 'NgIterable | null | undefined'.
18 <tr *ngFor="let item of searchedInventory;">
but the searchedInventory has data in it when I console logged it -
{id: 1, foodName: 'idli', foodDescription: 'made from rice', date: '2023-02-07 16:14:37.793398+05:30', price: 30, …}
The component.ts file as below,
searchedInventory!: Inventory;
constructor(private inventoryDataService : InventoryDataService, private route : ActivatedRoute){
}
ngOnInit(): void {
this.foodname = this.route.snapshot.params['foodname'];
this.searchedItems();
// console.log(this.foodname);
}
foodname!: String;
searchedItems(){
this.inventoryDataService.retrieveFoodByName(this.foodname).subscribe(
response => {
// console.log(response);
this.searchedInventory = response;
console.log(this.searchedInventory);
}
)
}
my HTML page is,
<h1>List of foods:</h1>
<div class="container">
<table class="table">
<thead>
<tr>
<th>id</th>
<th>Food Name</th>
<th>Food Description</th>
<th>Price</th>
<th>Date</th>
<th>Hotel Name</th>
<th>Hotel Address</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of searchedInventory;">
<td>{{item.id}}</td>
<td>{{item.foodName}}</td>
<td>{{item.foodDescription}}</td>
<td>{{item.price}}</td>
<td>{{item.date}}</td>
<td>{{item.hotelName}}</td>
<td>{{item.hotelAddress}}</td>
<td><button class="btn btn-success">Select</button></td>
</tr>
</tbody>
</table>
</div>
Editted,
I tried to convert the object into an array,
this.values = Object.values(this.searchedInventory);
console.log(this.values);
}
and the html is,
<tr *ngFor="let item of values">
<td id="values">{{item}}</td>
<td><button class="btn btn-success">Select</button></td>
</tr>
now the the array is not printing in row but as a column.
data is coming as an object don't need to iterate it
<tr>
<td>{{searchedInventory.id}}</td>
<td>{{searchedInventory.foodName}}</td>
<td>{{searchedInventory.foodDescription}}</td>
<td>{{searchedInventory.price}}</td>
<td>{{searchedInventory.date}}</td>
<td>{{searchedInventory.hotelName}}</td>
<td>{{searchedInventory.hotelAddress}}</td>
<td><button class="btn btn-success">Select</button></td>
</tr>
I solved it on my own!!!
Actually the problem was in the backend Springboot,
#GetMapping(path="/admin/inventory/search/{food_name}")
public Inventory getFoodByName(#PathVariable String food_name) {
Inventory foodname = inventoryService.findByFoodName(food_name);
if(foodname == null) {
throw new TodoNotFoundException("foodname - " + food_name);
}
return foodname;
}
to,
#GetMapping(path="/admin/inventory/search/{food_name}")
public List<Inventory> getFoodByName(#PathVariable String food_name) {
Inventory foodname = inventoryService.findByFoodName(food_name);
if(foodname == null) {
throw new TodoNotFoundException("foodname - " + food_name);
}
List items = new ArrayList<>();
items.add(foodname);
return items;
}
so now my backend return a ArrayList, with which I can iterate using *ngFor and it is executing perfectly!!!
sometimes I need to look a deep into everything to figure out the solution. I was thinking the problem was with the *ngFor!
How can i implement these two filter with postRes in table row ? postRes is json api response. includeKeyword & searchVolume is State hook. i don't want to implement filters if states are empty. i appreciate your help in advance
let includeKeywordResults = !includeKeyword ? postRes : postRes.filter(data =>
data.text.toLowerCase().includes(includeKeyword.toLocaleLowerCase()))
let searchVolumeResults = !searchVolume ? postRes : postRes.filter(data =>
data.keyword_idea_metrics.avg_monthly_searches > parseInt(searchVolume) )
Return
<div className="container table-responsive py-5">
<table className="table table-bordered table-hover" id="table-to-xls">
<thead className="text-white bg-dark">
<tr>
<th scope="col">Keyword</th>
<th scope="col">Search Volume</th>
<th scope="col">Competition</th>
<th scope="col">CPC</th>
</tr>
</thead>
<tbody>
{includeKeywordResults !== undefined ? includeKeywordResults.map((data, index) => (
<tr key={index}>
<td>{data.text}</td>
<td>{data.keyword_idea_metrics.avg_monthly_searches}</td>
<td>{data.keyword_idea_metrics.competition}</td>
<td>{data.keyword_idea_metrics.low_top_of_page_bid_micros}</td>
</tr>
)) : null}
</tbody>
</table>
</div>
</div>
}
Create a filter function with your various criteria and pass it to the Array.filter prototype. Function will look like something like that (not tested):
const filterFunction = (a) => {
if (!includeKeyword && !searchVolume){
return true
} else if (includeKeyword && !searchVolume){
return a.text.toLowerCase().includes(includeKeyword.toLocaleLowerCase()))
} else if (!includeKeyword && searchVolume){
return a.keyword_idea_metrics.avg_monthly_searches > parseInt(searchVolume)
} else {
a.text.toLowerCase().includes(includeKeyword.toLocaleLowerCase())) && a.keyword_idea_metrics.avg_monthly_searches > parseInt(searchVolume)
}
}
and pass it before your map:
includeKeywordResults.filter(filterFunction).map((data, index) => (
I have field total count I need to prevent total Count from display on component.html
I already do it but not working if you can tell me how to do that ?
I display data dynamically on header column and body data with angular 7
I try using filter function below but not working
this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data: any[]) => {
this.reportdetailslist = data;
this.headerCols = Object.keys(data[0]);
this.contentBody=data.filter(item =>item != data[0].totalCount);
});
}
}
<thead>
<tr>
<th >
<ng-container *ngIf="coln != 'totalCount'">
{{coln}}
</ng-container>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of contentBody">
<td *ngFor="let coln of headerCols">
<span>
{{rep[coln]}}
</span>
</td>
</tr>
<tbody>
data object represent following data as any[]
companyName: "Innovasic, Inc."
done: "0"
notImpacted: "0"
notificationDate: "2009-11-12"
offilneURL: "https://source.z2data.com/2019/1/13/8/55/47/351/662203977/21527_SPCN.PDF"
onlineURL: "N/A"
pending: "3"
reportDate: "2020-05-07"
revisionID: "272299243"
teamName: "MFG"
totalCount: 79
it solved by change my code above to
this.headerCols = Object.keys(data[0]).filter(x => x !== 'totalCount');
I'm use table JSon. But I have encode it from php to Json.
So I just call file pin.php from tables.
example my HTML tables:
HTML:
<table
data-url="../../tables/pin.php"
data-row-style="rowStyle"
data-toggle="table"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-search="true"
data-select-item-name="toolbar1"
data-pagination="true"
data-sort-name="name"
data-sort-order="desc">
<thead>
<tr>
<th data-field="id_pin" data-sortable="true" data-align="center">ID PIN</th>
<th data-field="no_meja" data-sortable="true" data-align="center">Nomor Meja</th>
<th data-field="status" data-sortable="true" data-align="center">Status</th>
<th data-field="action" data-sortable="true" data-align="center">Input Pemesanan</th>
</tr>
</thead>
<tr>
</tr>
</table>
Script table :
<script>
$(function () {
$('#hover, #striped, #condensed').click(function () {
var classes = 'table';
if ($('#hover').prop('checked')) {
classes += ' table-hover';
}
if ($('#condensed').prop('checked')) {
classes += ' table-condensed';
}
$('#table-style').bootstrapTable('destroy')
.bootstrapTable({
classes: classes,
striped: $('#striped').prop('checked')
});
});
});
function rowStyle(row, index) {
var classes = ['info', 'info', 'info', 'info', 'info'];
if (index % 2 === 0 && index / 2 < classes.length) {
return {
classes: classes[index / 2]
};
}
return {};
}
</script>
Question: I want this table is auto refresh.
please help me this one.
It looks like you're using Bootstrap Tables. According to the documentation, you can refresh the table, so just set a timer to do it periodically:
(function(){
function refreshTable() {$('#table-style').bootstrapTable('refresh', {silent: true});}
setInterval(refreshTable, 5000);
})()
I am having real trouble understanding what is happening with Data Tables. I create a DataTable as follows
var dTable = $('#sessionReport').dataTable({
"bInfo" : false,
"bFilter" : false,
"aaData" : data,
"bDestroy" : true,
"fnFooterCallback" : function(nRow, aaData, iStart, iEnd, aiDisplay){
var totalAttendees = 0;
var totalTime = 0;
var avgSatisfaction = 0;
for(var i=0; i<aaData.length; i++){
avgSatisfaction = avgSatisfaction + ((aaData[i][7]*1)+3*1)/aaData.length; // range is from -2 to + 2; have added 3 to each result to make range of positive numbers only
totalAttendees = totalAttendees + aaData[i][5]*1;
startTime = new Date(aaData[i][0]);
endTime = new Date(aaData[i][1]);
totalTime = totalTime + (endTime - startTime)/10000;
}
//alert(secondsToString(totalTime));
//$('#tfAttendees').innerHTML = parseInt(totalAttendees);
var nCells = nRow.getElementsByTagName('th');
nCells[5].innerHTML = parseInt(totalAttendees);
nCells[7].innerHTML = parseFloat(avgSatisfaction.toFixed(2));
}
});
return dTable;
My data is formatted like this:
[ 0: "2012-10-24 09:43:03"
1: "2012-10-24 09:49:47"
2: "5002028"
3: "Eamonn"
4: "Dannys Memories"
5: "7"
6: ""
7: "0" ],
[O:....],
But I run into problems when I want to add a column with an icon to each row like in this solution
http://datatables.net/blog/Drill-down_rows
I have tried using aoColumns and aoColumnsdef. But not really sure how. My problem is that table html is being built by the data. So if there are only 7 items in the data array there will only be 7 columns in my Html Table. How can I add an eighth column. I want the beginning on each row to have a clickable icon.
And my html looks like this...
<table id="sessionReport" class="table table-striped fTable">
<thead>
<tr>
<td>Start Session</td>
<td>End Session</td>
<td>Session Id</td>
<td>Facilitator</td>
<td>Group Name</td>
<td>No. Attendees</td>
<td>Assistant</td>
<td>Satisfaction</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th id="tfStartSession">
Total Hours
</th>
<th id="tfEndSession">
</th>
<th id="tfSessionId">
</th>
<th id="tfFacilitator">
</th>
<th id="tfGroupName">
TOTAL ATTENDEES :
</th>
<th id="tfAttendees">
</th>
<th id="tfAssistant">
AVG SATISFACTION :
</th>
<th id="tfSatisfaction">
</th>
</tr>
</tfoot>
</table>
Any ideas. I'm a bit stumped by DataTables documentation and they don't seem to provide any usage examples of either aoColumns or aoColumnsDef.
Many thanks