I am building a Film grid that should return their Id, thumbnail, title, episode number and released date.
How can a map these values of Swapi? (Thumbnails are in img folder)
ListFilms.js Component:
import React, { Component } from "react";
class ListFilms extends Component {
render() {
const films = this.props.films;
console.log(films);
return (
<div className="row">
<table className="table table-dark">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Thumbnail</th>
<th scope="col">Film Title</th>
<th scope="col">Released Date</th>
<th scope="col">Episode Number</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{films.id}</th>
<td>
<img src={} alt={}>
</td>
<td>{films.title}</td>
<td>{films.created}</td>
<td>{films.episode_id}</td>
</tr>
</tbody>
</table>
</div>
);
}
}
export default ListFilms;
CodeSandbox Demo
You can use the below code to iterate through the list of items and get it displayed. I have moved the images to public folder to avoid webpack from having to bundle them as part of your code.
https://codesandbox.io/s/z6y768y37p
<tbody>
{ films.map((film,index) => (<tr key={film.title}>
<th scope="row">{index + 1}</th>
<td><img src={`/img/${film.title}.jpeg` width="40px"} /></td>
<td>{film.title}</td>
<td>{film.release_date}</td>
<td>{film.episode_id}</td>
</tr>)) }
</tbody>
Related
Im trying to create a dynamic table using react.
Here is what I have so far...
DataTable.js
import React from 'react'
import data from '../data/customerData.json'
import '../styles/dataTable.css'
const DataTable = () => {
return (
<div>
{data.map(dat => {
return (
<div>
<table className='data-table-container'>
<tr>
<th>Customer Name</th>
<th>Phone Number</th>
<th>Loan Vehicle</th>
<th>Time Out</th>
<th>Time Due</th>
</tr>
<tr>
<td>{dat.CustomerName}</td>
<td>{dat.PhoneNumber}</td>
<td>{dat.LoanVehicle}</td>
<td>{dat.TimeOut}</td>
<td>{dat.TimeDue}</td>
</tr>
</table>
</div>
);
})}
</div>
);
}
export default DataTable
Home.js
import React, { useState } from 'react';
import Calendar from 'react-calendar';
import DataTable from '../components/DataTable';
import '../styles/calendar.css'
const Home = () => {
const [value, onChange] = useState(new Date());
let today = new Date().toDateString()
return (
<>
<div className='date-display'>
<h3 className='current-date-display'>{today}</h3>
</div>
<Calendar onChange={onChange} value={value} />
<DataTable/>
</>
)
}
export default Home
Here is what that renders in the browser..
So currently in my DataTable.js component I am using .map to loop over the data in customerData.json which works fine. The issue I have is as you can see from the screenshot img the table headers in the <th> tags render with each loop.
My question is how can I display the <th> tags once and keep the loop to display the <td> tag content..
See expected output below..
You're creating many tables, in a loop. Instead of outputting the entire table in the .map() body, only output the rows. Keep everything else static outside of that loop:
return (
<div>
<div>
<table className='data-table-container'>
<tr>
<th>Customer Name</th>
<th>Phone Number</th>
<th>Loan Vehicle</th>
<th>Time Out</th>
<th>Time Due</th>
</tr>
{data.map(dat => {
return (
<tr>
<td>{dat.CustomerName}</td>
<td>{dat.PhoneNumber}</td>
<td>{dat.LoanVehicle}</td>
<td>{dat.TimeOut}</td>
<td>{dat.TimeDue}</td>
</tr>
);
})}
</table>
</div>
</div>
);
You can make it a little more clear for yourself by explicitly separating <thead> and <tbody> elements:
return (
<div>
<div>
<table className='data-table-container'>
<thead>
<tr>
<th>Customer Name</th>
<th>Phone Number</th>
<th>Loan Vehicle</th>
<th>Time Out</th>
<th>Time Due</th>
</tr>
</thead>
<tbody>
{data.map(dat => {
return (
<tr>
<td>{dat.CustomerName}</td>
<td>{dat.PhoneNumber}</td>
<td>{dat.LoanVehicle}</td>
<td>{dat.TimeOut}</td>
<td>{dat.TimeDue}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
You might even add a default "no records found" row when there's no data to display, just for a bit more user experience:
return (
<div>
<div>
<table className='data-table-container'>
<thead>
<tr>
<th>Customer Name</th>
<th>Phone Number</th>
<th>Loan Vehicle</th>
<th>Time Out</th>
<th>Time Due</th>
</tr>
</thead>
<tbody>
{data.length > 0 ? data.map(dat => {
return (
<tr>
<td>{dat.CustomerName}</td>
<td>{dat.PhoneNumber}</td>
<td>{dat.LoanVehicle}</td>
<td>{dat.TimeOut}</td>
<td>{dat.TimeDue}</td>
</tr>
);
}) : <tr><td colspan="5">No records found</td></tr>}
</tbody>
</table>
</div>
</div>
);
I'm trying to show or hide section of the app using Vue.js 3 composition using v-if. I was able to get this working using vue.js 2 API option, but recently started using vue.js 3 API Composition.
It looks like screenMode is being updated when displaying value using console.log, but the section is not hiding. Any idea?
<script setup>
import { ref, onMounted } from 'vue'
let screenMode = 'screenA';
console.log('screenMode = ' + screenMode)
function test(recordDate) {
screenMode = 'screenB'
console.log("screenMode =" + screenMode)
}
onMounted(() => {
screenMode.value
})
</script>
<template>
<p class="screenTitle" >Calendar</p>
<div class="container" v-if="screenMode === 'screenA'">
<table class="table table-striped">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Date</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr id="row1" #click="test('5/26/2022')">
<th scope="row"></th>
<td>5/26/2022</td>
<td>52</td>
</tr>
<tr>
<th scope="row"></th>
<td>5/27/2022</td>
<td>4</td>
</tr>
<tr>
<th scope="row"></th>
<td>5/28/2022</td>
<td>90</td>
</tr>
</tbody>
</table>
</div>
<div class="container" v-if="screenMode === 'screenB'">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</template>
<style>
.screenTitle{
color: blueviolet;
margin-left: 10px;
margin-top: 25px;
}
</style>
<!-- <style>
#media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style> -->
You forgot to use the ref.
import { ref, onMounted } from 'vue'
const screenMode = ref('screenA'); // ✅ pls use const instead of let
console.log('screenMode = ' + screenMode.value) // ✅ use .value to change or view a ref's value
function test(recordDate) {
screenMode.value = 'screenB' // ✅ use .value to change or view a ref's value
console.log("screenMode =" + screenMode.value) // ✅ use .value to change or view a ref's value
}
onMounted(() => {
// screenMode.value // ⚠️ what's this for?
})
I have the following HTML tables and Javascript function, using SheetJS to parse the tables then export them to an excel file.
var tablesToExcel = (function() {
return function(tables, wsnames, wbname) {
var workbook = XLSX.utils.book_new();
for (var i = 0; i < tables.length; i++) {
var ws1 = XLSX.utils.table_to_sheet(document.getElementById(tables[i]));
console.log(ws1);
XLSX.utils.book_append_sheet(workbook, ws1, wsnames[i]);
}
XLSX.writeFile(workbook, wbname);
}
})();
<table id="po-table">
<thead class="thead-dark">
<tr>
<th scope="col"> Operating Unit</th>
<th scope="col"> Rate </th>
</tr>
</thead>
<tbody>
<tr>
<td>Leyte</td>
<td>90%</td>
</tr>
</tbody>
</table>
<table id="cert-table">
<thead class="thead-dark">
<tr>
<th scope="col"> Operating Unit</th>
<th scope="col"> Rate </th>
</tr>
</thead>
<tbody>
<tr>
<td>Samar</td>
<td>100%</td>
</tr>
</tbody>
</table>
<button onclick="tablesToExcel(['po-table', 'cert-table'], ['PO', 'Cert'], 'PO Report.xls')" class="btn btn-success btn-lg mb-5" id="downloadTable" type="button"> Export as Excel</button>
The expected output should display 90% in the column but in reality, the result shown on the column from the generated excel file was 0.9.
Is there any way that I can format the columns or disable this auto formatting by SheetJS?
Add {raw: true}, it will keep the raw string
var ws1 = XLSX.utils.table_to_sheet(document.getElementById(tables[i]), {raw: true});
I'm Fetching data from this Api https://randomuser.me/api/?results=25
I want to perform a check after getting data that if gender=Male then I want to show a Male Icon,
so how can we perform this check on Api data and return some html data like img tag or something to show icon?
Can anyone tell how can I do that?
Here is the code
function Users() {
const [Users, setUsers] = useState([])
useEffect(() => {
axios.get('https://randomuser.me/api/?results=25')
.then(Response=>{
if(Response.data){
alert("FOund")
console.log(Response.data.results)
setUsers(Response.data.results)
}else{
alert("not found")
}
})
}, [])
const displaylist = Users.map((User,index)=>{
if(User.gender==='male'){
return(
<tr>
<th scope="row">1</th>
<td><img src={User.picture.medium}></img></td>
<td>{User.name.first}</td>
<td>{User.name.last}</td>
<td>{User.location.city}</td>
<td>{User.location.state}</td>
<td>{User.email}</td>
</tr>
)
}
})
const displaylistf = Users.map((User,index)=>{
if(User.gender==='female'){
return(
<tr>
<th scope="row">1</th>
<td><img src={User.picture.medium}></img></td>
<td>{User.name.first}</td>
<td>{User.name.last}</td>
<td>{User.location.city}</td>
<td>{User.location.state}</td>
<td>{User.email}</td>
</tr>
)
}
})
return (
<div className="user">
<section id="admin" class=" px-2 px-md-5">
<div class="container-fluid border border-white rounded my-4 table-responsive">
<div class="text-center my-3">
<h1>Admin dashboard</h1>
</div>
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Image</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">City</th>
<th scope="col">State</th>
<th scope="col">Email</th>
<th scope="col">ICON</th>
</tr>
</thead>
<tbody>
{displaylist}
{displaylistf}
</tbody>
</table>
</div>
</section>
</div>
)
}
I think conditional rendering might help you here.
For example:
<img src={User.gender === "male" ? 'some male image src in string' : 'some female image source in string' alt={User.gender} />
I have a dashboard which is contain some information from firebase
and i have a button Like this (more)
and when i click on it, it doesn't work or redirect me to my specific page
this my code in html file
<table class="table table-inverse">
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email </th>
<th scope="col">Country</th>
<th scope="col">City</th>
<th scope="col">Salary</th>
<th scope="col">ID</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let item of employees">
<th >{{item.firstName}}</th>
<th >{{item.lastName}}</th>
<th >{{item.email}}</th>
<th >{{item.country}}</th>
<th >{{item.city}}</th>
<th >{{item.salary}}</th>
<th >{{item.key}}</th>
<th> <a href="" [routerLink]="['/employee/employee/]" class="btn btn-primary">more <i class="fa fa-info-circle" ></i>
</a></th>
</tr>
</tbody>
</table>
i have import this in the app.module.ts
import { RouterModule, Routes} from '#angular/router';
And also i added this in the route config
{path:'employee/:id',component:EmployeeInfoComponent},
[routerLink]="['/employee/employee/]" your routerLink not match with your routes it should be like {path:'employee/:id',component:EmployeeInfoComponent}, . And you missed close single quotes.
Try to this [routerLink]="['/employee/, item.key]”