0
354
ViewsHow can I sort a table by ascending numbers from a specified column in ReactJS?
I have a table that get data from an object called blockInfo:
<table>
<thead>
<tr>
<th>Timestamp</th>
<th>Block #</th>
<th>Block Hash</th>
<th>Miner</th>
<th>Gas used</th>
<th>Txs #</th>
</tr>
</thead>
<tbody>
{blockInfo.map((block) =>
< tr >
<td >{timeSince(new Date(block.timestamp * 1000))}</td>
<td id="blockNumber">{block.number}</td>
<td id="blockHash" >{block.hash}</td>
<td>{block.miner}</td>
<td>{block.gasUsed}</td>
<td>{block.transactions.length}</td>
</tr>
)}
</tbody>
</table>
It produces that table:
I want to sort that table by ascending numbers from Block # column, I tried adding .sort() in this way but it didn't work:
<tbody>
{blockInfo.sort((a, b) => {
if (a > b) return 1;
if (a < b) return -10;
return 0;
}).map((block) =>
< tr >
<td >{timeSince(new Date(block.timestamp * 1000))}</td>
<td id="blockNumber">{block.number}</td>
<td id="blockHash" >{block.hash}</td>
<td>{block.miner}</td>
<td>{block.gasUsed}</td>
<td>{block.transactions.length}</td>
</tr>
)}
</tbody>
Does anyone how can I do that?
·
Juan Pablo Isaza
1 answers
Answer question0
I believe the mistake lies in your sorting function. The arguments a and b each represent an object in the blockInfo list. Therefore, for the sorting function to work properly, you need to specify the key on which you wish to sort.
Try this code:
<tbody>
{blockInfo.sort((a, b) => {
if (a.number > b.number) return 1; // .number is added
if (a.number < b.number) return -10; // .number is added
return 0;
}).map((block) =>
< tr >
<td >{timeSince(new Date(block.timestamp * 1000))}</td>
<td id="blockNumber">{block.number}</td>
<td id="blockHash" >{block.hash}</td>
<td>{block.miner}</td>
<td>{block.gasUsed}</td>
<td>{block.transactions.length}</td>
</tr>
)}
</tbody>
·
Juan Pablo Isaza
Report
Answer question