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>
)
}
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
So I have a table where the users can filter out specific rows, by checking a checkbox. If a checkbox is selected then, some rows will get the hidden state.
I want to create a array with all the rows that isn't hidden, but I can't seem to get the state of the <td>.
The tables id is ftp_table and the rows I need the data from has the class name download. I tried to so something like this, to get the visibility value, but without any luck. The function is triggered after a hide row function has run.
function download_log() {
var rows = document.getElementsByClassName("download");
var log = [];
for (var i = 0; i < rows.length; i++) {
// Check if item is hidden or not (create a if and push into array)
console.log(getComputedStyle(rows[i]).visibility);
// append new value to the array IF NOT HIDDEN
log.push(rows.item(i).innerHTML);
}
}
The output I get when i hide something is everything is visible?:
Here is a example of the table, where all info rows has been hidden:
<table class="ftp_table" id="ftp_table">
<tbody>
<tr class="grey">
<th>Log</th>
</tr>
<tr class="info" hidden>
<td class="download">2021-10-06 12:38:15.946 INFO [conftest:101] -------------- Global Fixture Setup Started --------------</td>
</tr>
<tr class="debug">
<td class="download">2021-10-06 12:38:16.009 DEBUG [Geni:37] Initializing</td>
</tr>
<tr class="info" hidden>
<td class="download">2021-10-06 12:38:16.059 INFO [Wrapper:21] Downloading</td>
</tr>
<tr class="info grey" hidden>
<td class="download">2021-10-06 12:38:16.061 INFO [Handler:55] AV+</td>
</tr>
<tr class="debug grey">
<td class="download">2021-10-06 12:38:16.063 DEBUG [Session:84] GET'</td>
</tr>
</tbody>
</table>
You could use the following selector :
document.querySelectorAll("#ftp_table tr:not([hidden]) td.download");
It will select the td.download elements in tr that are not hidden in your table.
var visibleTds = document.querySelectorAll("#ftp_table tr:not([hidden]) td.download");
var arr = [];
for(let i = 0; i < visibleTds.length; i++){
arr.push(visibleTds[i].innerText);
}
console.log(arr);
<table class="ftp_table" id="ftp_table">
<tbody>
<tr class="grey">
<th>Log</th>
</tr>
<tr class="info" hidden>
<td class="download">2021-10-06 12:38:15.946 INFO [conftest:101] -------------- Global Fixture Setup Started --------------</td>
</tr>
<tr class="debug">
<td class="download">2021-10-06 12:38:16.009 DEBUG [Geni:37] Initializing</td>
</tr>
<tr class="info" hidden>
<td class="download">2021-10-06 12:38:16.059 INFO [Wrapper:21] Downloading</td>
</tr>
<tr class="info grey" hidden>
<td class="download">2021-10-06 12:38:16.061 INFO [Handler:55] AV+</td>
</tr>
<tr class="debug grey">
<td class="download">2021-10-06 12:38:16.063 DEBUG [Session:84] GET'</td>
</tr>
</tbody>
</table>
Why don't you use classList instead of style props ?
Like :
rows[i].classList.contains("hidden")
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.)
Attempting to generate a table using ReactJS and within this table I want to have a unique key to identify each row (as recommended by ReactJS). The following code runs and generates the table I desire except with the following error:
Warning: 'Each child in an array or iterator should have a unique "key" prop'
Looking at my generated HTML the 'key' field indeed does not exist. I've also tried key={index} but it doesn't work either
export class Tablecontent extends Component{
constructor(props){
super(props);
this.state={
fileinfo:'null'
}
}
render(){
//const fileinfo = this.props.rows;
const fileinfo = ['myFile1.doc','myFile2.doc'];
var row='';
console.log("FILEINFO:"+fileinfo);
if(fileinfo=='null')
{
row ='';
}
else {
row = fileinfo.map((data,index) =>
<tr>
<td key="filename_{index}">{data}</td>
<td key="date_{index}">2/12/2017</td>
<td key="size_{index}">2.1 MB</td>
</tr>
);
}
return(
<div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Date Created</th>
<th>Size</th>
</tr>{row}</tbody>
</table>
</div>
);
}
}
Resulting HTML:
<table>
<tbody>
<tr><th>Name</th><th>Date Created</th><th>Size</th></tr>
<tr><td>myFile1.doc</td><td>2/12/2017</td><td>2.1 MB</td></tr>
<tr><td>myFile2.doc</td><td>2/12/2017</td><td>2.1 MB</td>
</tr>
</tbody>
</table>
It wants to see the key on the outer element returned in the map function as below. The key is for React's internal use and won't display in the html.
row = fileinfo.map((data,index) =>
<tr key={index}>
<td key="filename_{index}">{data}</td>
<td key="date_{index}">2/12/2017</td>
<td key="size_{index}">2.1 MB</td>
</tr>
);
Every time the toggle is clicked, all payments are getting replaced with new payments. My problem is how to maintain the payments of a particular index of every click and show at respective index. please help me out
here is my html
<tbody data-ng-repeat="invoice in relatedInvoices>
<tr>
<td class="td-bottom-border">
{{invoice.PayableCurrencyCode}} {{invoice.PayablePaidAmount | number: 2}}<br />
<small>
<a data-ng-click="isOpenPayablePayments[$index] = !isOpenPayablePayments[$index]; togglePayablePayments(invoice.PayableInvoiceId)">Paid</a>
</small>
</td>
</tr>
<tr data-ng-show="isOpenPayablePayments[$index]">
<td>
<table>
<thead>
<tr>
<th>Transaction Id</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="payment in payablePayments">
<td>{{payment.TransactionId}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Here is my javascript
var getPayments = function (invoiceId) {
paymentService.getPayments(invoiceId).then(function (paymentsResponse) {
return paymentsResponse.data;
});
};
$scope.togglePayablePayments = function(invoiceId) {
$scope.payablePayments = getPayments(invoiceId);
};
If I understood correctly, you want to have "payablePayments" for every invoice.
This is working: http://plnkr.co/edit/cj3jxZ?p=info
Try something like
// init at beginning
$scope.payablePayments = [];
$scope.togglePayablePayments = function(invoiceId) {
$scope.payablePayments[invoiceId] = getPayments(invoiceId);
};
and then
<tr data-ng-repeat="payment in payablePayments[invoice.PayableInvoiceId]">
Otherwise you overwrite the object for the preceding invoice.