Import React from 'react'; const Tables = ({ BigTableData, Loading, StyledSortBtn,

Question

Import React from 'react'; const Tables = ({ BigTableData, Loading, StyledSortBtn,

currentSort, onChangeSort, sortTypes }) => {

return (
<React.Fragment>
{Loading ? (
<p>Loading...</p>
): (
<table>
<thead>
<tr>
<th>Id</th>
<th>firstName</th>
<th>lastName</th>
<th>email</th>
<th>phone</th>
<StyledSortBtn
onClick={onChangeSort}>
{currentSort}
</StyledSortBtn>

</tr>
</thead>
<tbody>
{[...BigTableData].sort(sortTypes[currentSort].fn).map(table => (
<tr
key={table.id}>
<td>{table.id}</td>
<td>{table.firstName}</td>
<td>{table.lastName}</td>
<td>{table.email}</td>
<td>{table.phone}</td>
</tr>
))}
</tbody>
</table>
)}
</React.Fragment>
)}

export default Tables;