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.
Related
Now I have a timer block only above USER 1, how can I display the timer block only above USER 2?
There was a logic to create as many <th> as users, and then add the Timer component to the required <th>, but I can’t figure out how to select the specific <th> in which you need to add Timer
return (
<div className="container">
<table className="table">
<thead className="move">
<th>MOVE</th>
{
[...Array(1)].map((index) => (
<th key={index}>
<Timer minutes={minutes} seconds={seconds} />
</th>
))
}
</thead>
<thead className="thead">
<th className="main">PARAMETERS REQUIREMENTS</th>
{users.map((user) => (
<th className="trade_user" key={user.id}>
{user.name}
</th>
))}
</thead>
<tbody>
<tr>
<td className="main">
Availability of a set of measures that raise quality standards
manufacturing
</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.complexesOfMeasures}
</td>
))}
</tr>
<tr>
<td className="main"> Lot production time, days</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.productionPeriod}
</td>
))}
</tr>
<tr>
<td className="main">Warranty obligations, months</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.warranty}
</td>
))}
</tr>
<tr>
<td className="main">Terms of payment</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.paymentTerms}%
</td>
))}
</tr>
<tr>
<td className="main">The cost of manufacturing a lot</td>
{users.map((user) => (
<td className="trade_user cost" key={user.id}>
{user.cost}
</td>
))}
</tr>
<tr>
<td className="main">Actions:</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.action}
</td>
))}
</tr>
</tbody>
</table>
</div>
)
Component Timer
import React from "react";
import { CgSandClock } from "react-icons/cg";
export const Timer = ({ minutes, seconds }) => {
return (
<div className="move_time">
<span>{minutes}</span>
<span>:</span>
<span>{seconds}</span>
<div>
<CgSandClock size="1.5em" className="move_item_clock" />
</div>
</div>
);
};
map over the users to create the <th> elements as well.
<thead className="move">
{users.map(user => <th key={user.id}>{user.id===2?<Timer minutes={minutes} seconds={seconds}/>:"MOVE"}</th>)}
</thead>
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}} />
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/
Here is my code :
return (
<div className="container">
<div class="col-md-12 ">
<div class ="row">
{
tableList.map(table => {
return(
<div className="item col-md-6 col-lg-3" key={table}>
<div>{table}</div>
<div className="content">
<div className="data">
<div class="col-md-6 col-lg-3 ">
<table className="item" class="auto-index" >
<thead >
<tr>
<th>#</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody >
{
buyItems.map(item => {
return(
<tr key={item}>
<td></td>
<td>{item}</td>
<td className="text-middle">
1
</td>
</tr>
)
})
}
</tbody>
</table>
</div>
</div>
<button onClick={(e)=> this.removeTable(table)} type="button" className="btn btn-default btn-sm">
Remove
</button>
</div>
</div>
)
})
}
</div>
</div>
</div>
);
I want to add different items in different tables but items are duplicated in all table please help me guys. I am not so good at this java script so please you can help me by telling me how to post different item in the multiple table.
declare a store add put your list in it and send this store to all of your components which you want to use the list then just add items to your list and your tables all updated with new data or create master component which it has a state (your list) and pass via props to all of your components, if you have one component and multiple tables you can add the list in your state and add items with setState function and use it in your tables
Example :
--store
export class YourStore{
#computed get yourRows(){
return this.yourlList.map(item => {
return (
<tr key={item}>
<td></td>
<td>{item}</td>
<td className="text-middle">
1
</td>
</tr>
)
})
}
#observable yourList = []
#action addItemToList(data){
this.yourList.push(data)
}
}
--component render
<table>
<thead >
<tr>
<th>#</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody >
{this.props.yourstore.yourRows}
</tbody>
</table>
Is this what your expectation? The below code will render a table for each item in the buyItems
return (
<div className="container">
<div class="col-md-12 ">
<div class ="row">
{tableList.map(table => {
return(
<div className="item col-md-6 col-lg-3" key={table}>
<div>{table}</div>
<div className="content">
<div className="data">
<div class="col-md-6 col-lg-3 ">
{buyItems.map(item => (
<table className="item" class="auto-index" >
<thead>
<tr>
<th>#</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr key={item}>
<td></td>
<td>{item}</td>
<td className="text-middle">1</td>
</tr>
</tbody>
</table>
))}
</div>
</div>
<button onClick={(e)=> this.removeTable(table)} type="button" className="btn btn-default btn-sm">
Remove
</button>
</div>
</div>
)
})
}
</div>
</div>
</div>
);
I am using ReactJS to display a table. The rows of this table are fetched from the database. I can get only row to show but adding an additional {object.title} returns an error that object is not defined. Here is my code:
tabRow(){
if(this.state.products instanceof Array){
const roles = this.state.products.map((object, i) =>
<td>{object.id}</td>,
<td>{object.title}</td>
);
return (
<tr>{roles}</tr>
);
}
}
render(){
return (
<div>
<h1>Products</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/add-item">Create Product</Link>
</div>
</div><br />
<table className="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Product Title</td>
<td>Product Body</td>
<td width="200px">Actions</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
{console.log(this.tabRow())}
</tbody>
</table>
</div>
)
}