Can anyone spot the issue here?
import React from 'react'
export default function CoinTable(props){
props.data.map(row=> {
console.log(row.first_name)
})
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Subscription</th>
</tr>
</thead>
<tbody>
{
props.data.map(row => {
<tr>
<td>{row.first_name} {row.last_name}</td>
<td>{row.phone}</td>
<td>{row.email}</td>
</tr>
})
}
</tbody>
</table>
)
}
For some reason the code appears on console but not on the screen. I am also printing from a JSON file if that helps.
You don't return the DOM in map.
props.data.map(row => {
return (
<tr>
<td>{row.first_name} {row.last_name}</td>
<td>{row.phone}</td>
<td>{row.email}</td>
</tr>
)
})
Or precisely:
props.data.map(row => (
<tr>
<td>{row.first_name} {row.last_name}</td>
<td>{row.phone}</td>
<td>{row.email}</td>
</tr>
))
Related
I'm trying to return multiple table rows from PlayerTableRow inside PlayerTable, but I can't get it to work. Console shows no errors. Only the table headers get rendered. If I substitute all in PLayerTableRow with static content, it still doesn't render. I guess there is something wrong with the use of childreen, but I can't figure it out.
function App() {
const PlayerRoster = new Map([
"1",
{
position: "None",
name: " ",
skill1: " ",
skill2: " ",
},
],
[
"2",
{
position: "None",
name: "",
skill1: "",
skill2: "",
},
]);
return (
<div className="">
<PlayerTable>
{playerRoster.forEach((player, key) => {
<PlayerTableRow />;
})}
</PlayerTable>
</div>
);
}
function PlayerTable({ children }) {
return (
<table>
<thead>
<tr>
<th>No.1</th>
<th>Player Name</th>
<th>Position</th>
<th>MA</th>
<th>ST</th>
<th>AG</th>
<th>PA</th>
<th>AV</th>
<th>Skills</th>
<th>Skill1</th>
<th>Skill2</th>
<th>Price</th>
</tr>
</thead>
<tbody>{children}</tbody>
</table>
);
}
function PlayerTableRow( ) {
return (
<>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</>
);
}
in my project i have a table with information (FirstName, LastName, PhoneNumbre, Age, Date). i create an function making me to export file excel but i don't want to export all the data i need just to export (FirstName, LastName, Age).
this is what i do
excel.html :
<div class="panel-body table-responsive">
<table id="excel-table" class="table">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>PhoneNumber</th>
<th>Age</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let excel of excels'>
<td>{{excel.FirstName}}</td>
<td>{{excel.LastName}}</td>
<td>{{excel.PhoneNumber}}</td>
<td>{{excel.Age}}</td>
<td>{{excel.Date}}</td>
<td>
<button (click)="exportexcel()">ExportExcel</button>
</td>
</tr>
</tbody>
</table>
</div>
excel.ts :
#Component({
selector: 'app-execls',
templateUrl: './execls.component.html',
styleUrls: ['./execls.component.css']
})
export class RegionsComponent implements OnInit {
constructor(private modalService: NgbModal, private fb: FormBuilder, private toastr: ToastrService) { }
fileName = 'ExcelFile.xlsx';
exportexcel(): void {
let element = document.getElementById('excel-table');
const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element);
const wb: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, this.fileName);
}
So I believe you are using sheetJS based on your code, and looking at the documentation, there is not a way to pass in columns you wish to display. https://docs.sheetjs.com/docs/api/utilities/#html-table-input. One option is to create another table with just the columns you want to display, but set that table to hidden.
<table id="excel-table-to-export" class="table" hidden>
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let excel of excels'>
<td>{{excel.FirstName}}</td>
<td>{{excel.LastName}}</td>
<td>{{excel.Age}}</td>
</tr>
</tbody>
</table>
How can I get v-for to display table data in the same form as the following html:
<tr>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Product ID</th>
<th></th>
</tr>
Currently I am using the following vue v-for code(below) but it is adding the table header(th) one below another. I would like the table header to display side by side.
<tr v-for="(column, index) in schema" :key="index">
<th scope="col">{{column}}</th>
</tr>
You just need to place v-for on the element you want to repeat, not it's parent.
For loop should be put on <th></th>
<tr>
<th v-for="(column, index) in schema" :key="index">{{column}}</th>
</tr>
Here is the official vue doc for list rendering: https://v2.vuejs.org/v2/guide/list.html
bind grid header and data separately.
<template>
<table>
<thead>
<tr>
<th v-for="(header,index) in gridHeader" :key="index">
{{header.displayName}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in gridData" :key="index" >
<td>
{{data.name}}
</td>
<td>{{data.age}}
</td>
<td>{{data.place}}
</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts">
import Vue from 'vue';
export default class HelloWorld extends Vue {
private gridHeader: object[] = [
{name: 'Name', displayName: 'Name'},
{name: 'Age', displayName: 'Age'},
{name: 'Place', displayName: 'Place'}
];
private gridData: any =[{name:'Tony',age:'31',place:'India'},
{name:'Linju',age:'26',place:'India'},
{name:'Nysa',age:'12',place:'India'}];
};
</script>
<style scoped>
</style>
I want to populate my grid with the data which i am receiving from API
below is my API response which i am getting
[
{
"intUserId": 1109,
"vcrFirstName": "sdvlbs",
"vcrLastName": "dsbvsdfn",
"vcrLoginName": "!##DBASDI?\"|}",
"vcrPassword": "eclerx#123",
"vcrStatus": "InActive",
"vcrIsClient": "eClerx",
"vcrEmail": "sdvlbs.dsbvsdfn#eClerx.com",
"vcrRole": "Analyst,Auditor,Team Lead,Manager",
"Agreements_Selected": "ISDA,CSA,Repo,SLA,PBA"
}
]
But at the time of passing this data to HTML by grid is still blank
Below is my .ts code
arrBirds:Array<string> = [];
userdata(){
this.http.get(this.url).subscribe((res)=>{
this.arrBirds = Array.of(res.json()) ;
console.log(this.arrBirds)
});
}
Below is my HTML
<table cellpadding="0" width="100%" cellspacing="0" border="0" class="search_grid_view table-striped">
<thead>
<tr>
<th style="min-width: 100px;">Login Name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let char of arrBirds">
<td >
{{char.vcrPassword}}
</td>
<td >
{{char.vcrStatus}}
</td>
<td >
{{char.Agreements_Selected}}
</td>
<td >
{{char.vcrEmail}}
</td>
</tr>
</tbody>
</table>
i am trying to iterate the data which i am receiving from API response
Below is my API code
public HttpResponseMessage GetCheckBoxes()
{
HttpResponseMessage response;
UserDB userDB = new UserDB();
DataSet ds = userDB.UserGridDetails();
string json = JsonConvert.SerializeObject(ds.Tables[0], Formatting.Indented);
//response = Request.CreateResponse(HttpStatusCode.OK, "[" + json + "]");
response = Request.CreateResponse(HttpStatusCode.OK, json);
return response;
}
my grid doesn't populate with the data.
i am struggling since last 5 days.
I think html file is not in sync with http response
<tr *ngFor="let char of arrBirds">
<td > {{char?.vcrPassword}}</td>
<td > {{char?.vcrStatus}} </td>
<td > {{char?.Agreements_Selected}}</td>
<td > {{char?.vcrEmail}} </td>
</tr>
Change this in tr,it will work.
If it still don't work then import ChangeDetectorRef from angular/core
inject it in constructor and use detectchanges method in ChangeDetectorRef
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '#angular/core';
constructor(private ref: ChangeDetectorRef) {}
userdata(){
this.http.get(this.url).subscribe((res)=>{
this.arrBirds = Array.of(res.json()) ;
this.ref.detectChanges();
console.log(this.arrBirds)
});
}
Hope It helps.
By parsing the JSON data it is working now.
userdata(){
this.http.get(this.url).subscribe((res)=>{
this.arrBirds = JSON.parse(res.json()) as Application[];
console.log(this.arrBirds)
});
}
I am trying to update my array of contacts type on DOM. However I am getting every value when I am calling that array in a function but that value of array is not getting updated in DOM.
import {Component} from 'angular2/core';
#Component({
selector:'contacts',
templateUrl:'./dev/RouteComponents/contacts.component.html'
})
export class ContactsComponent{
checking=false;
contacts=[
{firstname:'vishu',lastname:'handa',contactno:'12654',gender:'male'},
{firstname:'lalit',lastname:'gupta',contactno:'56489',gender:'male'},
{firstname:'aman',lastname:'singh',contactno:'48984',gender:'male'},
{firstname:'gaurav',lastname:'gupta',contactno:'5485',gender:'male'}
];
addContactToContactList(firstname,lastname,contact,gender)
{
console.log(firstname.value+"--"+lastname.value+"--"+contact.value+"--"+gender.value);
this.contacts.push({firstname:firstname.value,lastname:lastname.value,contactno:contact.value,gender:gender.value});
this.run();
}
run()
{
console.log(this.contacts.length);
this.checking = true;
}
}
<p *ngIf="checking">checking</p>
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Contact Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#contact of contacts">
<td>{{contact.firstname}}</td>
<td>{{contact.lastname}}</td>
<td>{{contact.contactno}}</td>
<td>{{contact.gender}}</td>
</tr>
</tbody>
</table>
Value is not getting updated in DOM
Change your table rows tr tag for *ngfor as below and check it again :
<tr *ngFor="let contact of contacts">
<td>{{contact.firstname}}</td>
<td>{{contact.lastname}}</td>
<td>{{contact.contactno}}</td>
<td>{{contact.gender}}</td>
</tr>