I'm trying to generate a soccer points table in React from an array of images. For instance this is my array:
import arsenal from './images/Arsenal.png';
import bournemouth from './images/AFCBournemouth.png';
import villa from './images/AstonVilla.png';
const icons =[{arsenal},{bournemouth},{villa}];
At the moment my class is created like this:
class Standings extends React.Component{
render(){
return(
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Teams</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src={bournemouth} class="icon" height="42" width="42" />
</td>
<td>0</td>
</tr>
<tr>
<td>
<img src={arsenal} class="icon" height="42" width="42" />
</td>
<td>0</td>
</tr>
<tr>
<td>
<img src={villa} class="icon" height="42" width="42" />
</td>
<td>3</td>
</tr>
</tbody>
</Table>
)
}
}
Is there a way to generate the table by looping through the image array? I'd like to add more images to the array if possible.
Use map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
const icons =[arsenal, bournemouth, villa];
class Standings extends React.Component {
render() {
return (
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Teams</th>
<th>Points</th>
</tr>
</thead>
<tbody>
{icons.map((url, idx) => (
<tr>
<td>
<img src={url} class="icon" height="42" width="42" />
</td>
<td>{idx}</td>
</tr>
))}
</tbody>
</Table>
);
}
}
You can create an array of objects with the teams:
const teams = [
{
url: 'url',
name: 'Arsenal,
points: 3
}
]
Then iterate over it:
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Teams</th>
<th>Points</th>
</tr>
</thead>
<tbody>
{
teams.map((team) => (
<tr>
<td>
<img src={team.url} class="icon" height="42" width="42" />
</td>
<td>{ team.points }</td>
</tr>
}
</tbody>
</Table>
Also, if that does not work try to set the src of img like this:
<img src={{uri: team.url}} />
Related
On my html I have multiple tables, which are for different valuations. The results of those valuations are supposed to be in another table. The text of valuation_all in the tables.taglist should be transferred into another table. I'm really lost here. Newby with this topic so I'll appreciate every help!
Table for summary results
<table id="results" class="summary">
<th>Test</th>
<th>result</th>
<tr>
<td>E-01</td>
<td>text</td>
</tr>
<tr>
<td>E-02</td>
<td>text</td>
</tr>
</table>
Tables of valuation
<p>
<table id="results1" class="taglist">
<th>Name</th>
<th>result</th>
<tr>
<td class="valuation">FAIL</td>
<td rowspan=2 class="valuation_all">FAIL</td>
</tr>
<tr>
<td class="valuation">PASS</td>
</tr>
</table>
</p>
<p>
<table id="results2" class="taglist">
<th>Name</th>
<th>result</th>
<tr>
<td class="valuation">x</td>
<td class="valuation_all" rowspan=2>OPEN</td>
</tr>
<tr>
<td class="valuation">x</td>
</tr>
</table>
</p>
Assuming your results list tables are ordered the same way you ordered rows in your global results table, you can perform a forEach on all .valuation_all, and then mirror each text on the global results table:
const resTables = document.querySelectorAll('.valuation_all')
const results = document.querySelectorAll('#results tr > td + td')
resTables.forEach( function(el, i) {
results[i].textContent = el.textContent
})
<table id="results" class="summary">
<tr>
<th>Test</th><th>result</th>
</tr>
<tr>
<td>E-01</td><td>text</td>
</tr>
<tr>
<td>E-02</td><td>text</td>
</tr>
</table>
<hr>
<table id="results1" class="taglist">
<tr>
<th>Name</th><th>result</th>
</tr>
<tr>
<td class="valuation">FAIL</td><td rowspan="2" class="valuation_all">FAIL</td>
</tr>
<tr>
<td class="valuation">PASS</td>
</tr>
</table>
<table id="results2" class="taglist">
<tr>
<th>Name</th><th>result</th>
</tr>
<tr>
<td class="valuation">x</td><td class="valuation_all" rowspan="2">OPEN</td>
</tr>
<tr>
<td class="valuation">x</td>
</tr>
</table>
Please consider using data attributes for better matching.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
Options.js
return (
<div>
<Table bordered hover variant="light">
<caption>Data Inspector Results</caption>
<thead className="thead-dark">
<tr>
<th>Attribute</th>
<th>Datatype</th>
<th>Categorical/Numerical</th>
<th>Sample Data</th>
<th>Null Values</th>
<th>Numerical Range</th>
<th>Bin Size</th>
<th>Unique Key</th>
</tr>
</thead>
<tbody>
{result}
{result}
</tbody>
</Table>
</div>
)
Result.js
return (
<div>
<tr>
<td>{props.attribute}</td>
<td>{props.dataType}</td>
<td>
<Select options={categoryOptions} />
</td>
<td>To Be Done In The Future</td>
<td>
<Select
defaultValue={[]}
isMulti
name="colors"
options={nullBinOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
</td>
<td>{props.numericalRange}</td>
<td>{props.binSize}</td>
<td>NA</td>
</tr>
</div>
)
I'm trying to render multiple of my result component within Options.js. However, I'm facing this issue where my results are not displaying properly in the table.
This image shows my issues
The props aren't the issue nor the JSON that I'm feeding in. I can't seem to render this table nicely. What am I doing wrong? Thank you in advance!
Can you just update your files like this and check again
Options.js
return (
<Table bordered hover variant="light">
<caption>Data Inspector Results</caption>
<thead className="thead-dark">
<tr>
<th>Attribute</th>
<th>Datatype</th>
<th>Categorical/Numerical</th>
<th>Sample Data</th>
<th>Null Values</th>
<th>Numerical Range</th>
<th>Bin Size</th>
<th>Unique Key</th>
</tr>
</thead>
{result}
{result}
</Table>
)
Result.js
return (
<tbody>
<tr>
<td>{props.attribute}</td>
<td>{props.dataType}</td>
<td>
<Select options={categoryOptions} />
</td>
<td>To Be Done In The Future</td>
<td>
<Select
defaultValue={[]}
isMulti
name="colors"
options={nullBinOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
</td>
<td>{props.numericalRange}</td>
<td>{props.binSize}</td>
<td>NA</td>
</tr>
</tbody>)
You are wrapping result inside a div you should un-wrap it and leave as a tr.
return (
<tr>
<td>{props.attribute}</td>
<td>{props.dataType}</td>
<td>
<Select options={categoryOptions} />
</td>
<td>To Be Done In The Future</td>
<td>
<Select
defaultValue={[]}
isMulti
name="colors"
options={nullBinOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
</td>
<td>{props.numericalRange}</td>
<td>{props.binSize}</td>
<td>NA</td>
</tr>
)
Using chrome-dev-tools are you able to share an image of the html tree?
About TABLE elements: It's very important that the immediate structure are the expected elements (TBODY, THEAD, TR, TD, TH) as tables are very rigid structures and putting elements such as DIV where the DOM expects a TD for example put's it in "quirk" mode and layout will probable misbehave. https://css-tricks.com/using-divs-inside-tables/
I have multiple tables that hold images throughout my document. Each table has 3 rows (Caption/Image/Source). I need to style my caption to have a border using CSS, but when the caption is blank, the caption class still appears in my markup, resulting in a random border appearing.
Table with caption:
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
Table with no caption, with the class="caption" still in the table cell:
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="img"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
I want to remove the caption class for cells that are empty, but my current JS removes the class for all my elements:
//remove empty caption
if ($('.caption').is(':empty')){
$("td").removeClass( ".caption" );
}
How can I update this so it only removes the class for empty .caption cells
JS Fiddle: https://jsfiddle.net/5dq63zL4/
very easy
td.caption:empty{
border:none
}
Instead of removing the class with JS, you can use the CSS pseudo-class :empty with :not, to style only non empty captions:
table {
margin: 20px 0
}
.caption:not(:empty) {
border-bottom: 1px solid red;
}
.source {
font-size: .85em;
color: #777
}
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
I want to create something like this in react:
I create a renderTable and a renderInside function. Inside renderTable I call renderInside like this:
const renderInside = (slipsList) => {
if (slipsList) {
return (
<table className="table table-bordered">
<thead>
<tr>
<th className="table__header">
<div className="table__header__text">
<span className="table__header--selected">
Symbol
</span>
</div>
</th>
</tr>
</thead>
<tbody>
{slipsList.map((slip, i) =>
<tr key={i}>
<td>{slip.amount}</td>
</tr>
)}
</tbody>
</table>
);
}
return (
<div>Loading...</div>
);
};
and the renderTable is like this:
const renderTable = (slipsList) => {
if (slipsList) {
return (
<div className="table-scrollable-container">
<div className="table-scrollable">
<table className="table table-bordered">
<thead>
<tr>
<th className="table__header">
<div className="table__header__text">
<span className="table__header--selected">
Date Valeur
</span>
</div>
<div className="table__header__arrow" />
</th>
</tr>
</thead>
<tbody>
{slipsList.map((slip, i) =>
<tr key={i}>
<td className="table-sticky--first-col">
{slip.confirmationDate}
</td>
<td>
{slip.netAmountEuro}
</td>
<tr className="collapsed">
<td colSpan="10">
{renderInside(slipsList)}
</td>
</tr>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}
return (
<div>Loading...</div>
);
};
But it doesn't work. I use another two ways of doing this but I want. For every row or the main table I must put the secondary table. Any ideas of how to do this?
Try to Use this:
In renderInside method:
{slipsList.map((slip, i) => ( //added this bracket
<tr key={i}>
<td>{slip.amount}</td>
</tr>
)
)}
In renderTable method:
{slipsList.map((slip, i) => ( //added this bracket
<tr key={i}>
<td className="table-sticky--first-col">
{slip.confirmationDate}
</td>
<td>
{slip.netAmountEuro}
</td>
<tr className="collapsed">
<td colSpan="10">
{renderInside(slipsList)}
</td>
</tr>
</tr>
)
)}
One more thing, i think you need to pass slip inside {renderInside(slipsList)} method instead of slipsList.
i have found this
Resizable Gridview columns using javascript
and happy to implement this http://www.ita.es/jquery/jquery.grid.columnsizing.htm but it is working on any table(
<table >
<tbody>
<tr class="first">
<td width="100">
</td>
<td width="200">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr></tbody></table>
) but creating problem on gridview render html table(
<table >
<tbody><tr>
<th ></th><th></th>
</tr><tr>
<td ></td><td>
</td><td>
</tr>
</tbody></table>
)
If you mean how to have that plugin work only on certain tables instead of all tables, change this line:
$("table").columnSizing()
To this instead:
$(".columnresize").columnSizing()
Then to any table you want it applied to, add class columnresize like this:
<table class="columnresize">
...
</table>