Issue
header titles looks like: ['name', 'lastname', 'age']
and the body looks like: ['lastnameText', 15, 'nameText']
, its order may be different from titles list
<table>
<thead>
{titles.map(item => (
<tr>{item}</tr>
))}
</thead>
<tbody>
{content.map(item => (
<tr>{item}</tr>
))}
</tbody>
</table>
the result looks like this way:
name lastname age
lastnametext 15 name
How can I explicitly sync the titles with the content?
Solution
Edited this answer and found a solution for what you want. See this code.
*Note: If all the rows fields in your content
are in matching order, and just the headers order is the problem - then this code is enough.
So in order to make it work as a re-useable table, and work even if the content
order is messed up - what I do is simply sorting the content
I get before displaying it:
const allSortedContent = [];
for (const row in props.content) {
const sortedRowValues = [];
// Pushing the values of this row to the `sortedValues` according the order of the headers.
props.headers.forEach((header) => {
const value = props.content[row][header];
sortedRowValues.push(<td>{value}</td>);
});
allSortedContent.push(<tr>{sortedRowValues}</tr>);
}
Here I go through the content
array which contains rows as objects.
For each row - I sort the fields of it to be according the order of the headers. In each iteration, I use the sortedRowValues
array that will contain the <td>
elements of this row (matching the order of the headers).
After finishing each row, I push the mapped row - (sortedRowValues
) to the allSortedContent
array which contains all the sorted rows.
Lastly, in the table body, I simply return the allSortedContent
.
return (
<div>
<table>
<thead>
<tr>
{props.headers.map((item) => (
<td>{item}</td>
))}
</tr>
</thead>
<tbody>{allSortedContent}</tbody>
</table>
</div>
);
And the data structure you send through props
should be in this structure, but it's completely okay if it's out of order:
const headers = ['age', 'lastName', 'name'];
const content = [
{ name: 'Jule', lastName: 'Abc', age: '24' },
{ lastName: 'Park', age: '32', name: 'Josh' },
];
Answered By - Tehila
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.