I am trying to map an entry to the table. In that entry, there is a column which can have more than one value.In that case, a sub-row will be created in the same row. I have attached an example below image. Here is the code I have tried which messes the table up completely.
{intake.map((value) => {
return (
<tr>
<th className="text-center" scope="row">{value}</th>
</tr>
)
})}
{attendanceIds.map((val, i) => {
return (
<tr>
<td className="text-center">{date[i]}</td>
<td className="text-center">{duration[i]}</td>
<td className="text-center">{module[i]}</td>
<td className="text-center">{start[i]}</td>
<td className="text-center">{topic[i]}</td>
<td className="text-center">{studentsPresent[i]}</td>
<td className="text-center">{totalStudents[i]}</td>
<td className="text-center"><button className="button" id={val}>Details</button></td>
</tr>
)
})}
This is what I desire to get
This is what I get from the code above
This is the data I have. (One attendance ID has multiple intakes)
The data looks like it belongs on the same row semantically, so you shouldn't use a new row, you should add your multiple entries as e.g. div (or whatever suits) in your <td>. Then use CSS to style as required.
From your question, it isn't entirely clear what your data structure is in your component, but assuming your attendanceIds map in the way that your image shows, you can do something like this:
{attendanceIds.map((val, i) => {
return (
<tr>
<td className="text-center">{
val.intake.length === 1
? {val.intake[0]}
: val.intake.map(item=>
<div>{item}</div>)
}
}</td>
// add the rest of the <td>s here
</tr>
)
})}
(Note that I've left the rest of the mapping up to you as the way you've done it isn't clear to me.)
Related
I want to iterate over an array and make a table row with its elements.
The coinlist is an array of object containing coin symbol and price.
Is there any way to print table row with map function.
<tbody>
{coinlist.map((coin) => {
return {
<tr>
<td>{coin.symbol}</td>
<td>{coin.price}</td>
</tr>
} })}
</tbody>
<table>
<tr>
<th>Symbol</th>
<th>Price</th>
</tr>
{coinlist.map(coin)=>(
<tr>
<td>{coin.symbol}</td>
<td>{coin.price}</td>
</tr>
))}
</table>
If you want to print out the object fields which make up the table row you can either console.log the entire object which makes up the row or each individual field. Something along the lines of:
<tbody>
{coinlist.map((coin) => {
console.log(coin); // see the entire coin object
console.log(`symbol: ${coin.symbol} price: ${coin.price}`); // see individual fields of interest
return {
<tr>
<td>{coin.symbol}</td>
<td>{coin.price}</td>
</tr>
}
})}
</tbody>
Hopefully that helps
I want to iterate over an array that contains the end of a url so I can then 'concatenate' to the main site domain with the aim to gain a fully functional url (ie. www.mainUrlDomain.com/some-url)
This is my code:
<div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>City</th>
<th>Code</th>
<th>Symbol</th>
</tr>
{data.map(data => (
<tr key={data.code}>
<td>
<Image
src={`${mainUrlDomain}/${data.code.toLowerCase()}.png`}
width={30}
height={20}
/>
</td>
{landingPagesKeys.includes(`${data.code}`)
?
<Link
href={`${mainUrlDomain}/${landingPages}`}
>
<td>
<a>{data.name}</a>
</td>
</Link> : <td>{data.name}</td>}
<td>{data.code}</td>
<td>{data.symbol}</td>
</tr>
))})
</tbody>
</table>
</div>
I have tried to add a way to iterate over the landingPages array like this:
{landingPagesKeys.includes(`${data.code}`)
?
{landingPages.map(data => (
<Link
href={`${mainUrlDomain}/${data`}
>
<td>
<a>{data.name}</a>
</td>
</Link> )} : <td>{data.name}</td>}
<td>{data.code}</td>
<td>{data.symbol}</td>
</tr>
))})
Unfortunately it didn't show me the array data as expected which contains the end of the desired url (ie. some-url) and landingPages after the url domain as the first example of code shows the entire array.
How to map through the array and obtain each individual url that landingPages contains?
You can use filter function to filter the data in an array.
landingPages.filter(data => landingPagesKeys.includes(`${data.code}`)).map(data => <div>...</div>)
I've been trying to implement a search filter for a JSON datatable by filtering the data by values of the data header...
Here's the input field
<input type= "text" placeholder="Search..." value={search} onChange={(e) =>
{setSearch(e.target.value)}} />
below is the datatable..
<table cellSpacing="40" cellPadding="20" >
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Gender</th>
<th>LGA</th>
<th>WARD</th>
</tr>
</thead>
<tbody>
{person.map(record =>(
<tr key = {record.id}>
<td>{record.id}</td>
<td> <Link to={`/beneficiary/${record.full_name}`} >
{record.full_name}</Link></td>
<td>{record.gender}</td>
<td>{record.lga}</td>
<td> {record.ward} </td>
</tr>
))}
</tbody>
</table>
}
How do i wrap the input field with the datable to be able to get data by values of their data header. Say, a header for gender..i want to get results for male only.etc
By your description you need to add a filter rule to person.map(...), i.e. you need to use person.filter(somefilterfunction).map(record => (. So the question now becomes how to program the somefilterfunction to cater to your needs, for example you want to filter for male, then use
(person) => {
if (person.gender === search) {
return person;
}
}
the search here should be your state (I guess you are using React hooks), and other filter rules can be implemented similarly.
Modern React also supports useMemo and it can serve as a cache for the filtered data, this may have better performances. You may look deeper into it by look at the official document or Google a bit.
Just filter the Data first
{person.filter((e) => ['name', 'descr']
.some((property)=> e[property].toLowerCase()
.includes(search.toLowerCase())))
.map(record =>(
<tr key = {record.id}>
<td>{record.id}</td>
<td> <Link to={`/beneficiary/${record.full_name}`} >
{record.full_name}</Link></td>
<td>{record.gender}</td>
<td>{record.lga}</td>
<td> {record.ward} </td>
</tr>
))}
I'm trying to do the following: I have a table populated with data from the DB. Apart from that, I have an input where you can write something and a button that will filter, only showing the lines that have that string. This is working now!
The thing is, the input should only allow you to filter by foo.name/foo.code (two propertys of my entity).
I'm adding the code I have in case anyone can guide me out, I've tried several things but this are my first experiences with JQuery while I have a strict story-delivery time. Thanks everyone!
<tbody>
<c:forEach var="foo" items="${foo}">
<tr id = "fooInformation" class="mtrow">
<th id="fooName" scope="row">${foo.name}</th>
<td id="fooCode" class="left-align-text">${foo.code}</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</c:forEach>
</tbody>
$("#search").click(function () { -> button id
var value = $("#fooRegionSearch").val(); -> value of the input
var rows = $("#fooRegionTable").find("tr"); -> table id
rows.hide();
rows.filter(":contains('" + value + "')").show();
});
To start with, your HTML is invalid - there cannot be elemenets with duplicate IDs in HTML. Use classes instead of IDs.
Then, you need to identify which TRs pass the test. .filter can accept a callback, so pass it a function which, given a TR, selects its fooName and fooCode children which contain the value using the :contains jQuery selector:
$("#search").click(function() {
var value = $("#fooRegionSearch").val();
var rows = $("#fooRegionTable").find("tr");
rows.hide();
rows.filter(
(_, row) => $(row).find('.fooName, .fooCode').filter(`:contains('${value}')`).length
).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="fooRegionTable">
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name1</th>
<td class="fooCode" class="left-align-text">code1</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name2</th>
<td class="fooCode" class="left-align-text">code2</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</table>
<button id="search">click</button><input id="fooRegionSearch" />
I have data being sent from my backend to my frontend and then the data is parsed and displayed into a table. However, at it's max amount of elements in the array, there are too many rows in the table and it exceeds the area that I need the table to be in. So a carousel/slide animation would be the best bet and I want to be able to display elements 4 rows at a time and then invoke the slide animation the the next 4. I'm not quite sure how to do this in the current iteration of my function that sets the table data.
Can someone point me in the right direction?
function FormTable(props){
/**
* props = allStations
*/
console.log(props.data)
return(
<table className="form__table">
<div className="form__table-parentDiv">
<thead>
<tr>
<th className="form__table-header">Departing Station</th>
<th className="form__table-header">Arriving Station</th>
<th colSpan={2} className="form__table-header">Departure Time</th>
</tr>
</thead>
<tbody>
{
props.data.map( (stationIndex) => {
// console.log(stationIndex);
let cells = [];
for(let i = 1; i < stationIndex.length; i++){
cells.push(
<React.Fragment>
<td className="form__table-stations"> {stationIndex[i].station} </td>
<td className="form__table-stations"> {stationIndex[i].destination} </td>
<td className="form__table-arrivals"> {stationIndex[i].firstArrival} </td>
<td className="form__table-arrivals"> {stationIndex[i].secondArrival} </td>
</React.Fragment>
);
}
return <tr className="form__table-row" >{ cells }</tr>
})
}
</tbody>
</div>
</table>
)
}