NW6 | nazanin_Saedi | Feature-sort-table-column | reactProject | Week4#51
NW6 | nazanin_Saedi | Feature-sort-table-column | reactProject | Week4#51nazaninsaedi wants to merge 7 commits intomainfrom
Conversation
✅ Deploy Preview for react-module-project-nw6-team-2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Ara225
left a comment
Ara225
left a comment
There was a problem hiding this comment.
Looking good and it works well. My main suggestion would be to add some arrows on the column headers so that users can see if it's currently sorted by that column and if so what direction
| direction = 'descending'; | ||
| } | ||
| setSortConfig({ key, direction }); | ||
| }; |
There was a problem hiding this comment.
Looking good, like how you support sorting in both directions
|
|
||
|
|
||
| // Sorting function based on the current sort configuration | ||
| const sortedBookings = [...Bookings].sort((a, b) => { |
There was a problem hiding this comment.
You should be able to do Bookings.sort here. Any particular reason you're done it this way?
| // Convert string room IDs to numbers for proper sorting | ||
| aValue = parseInt(aValue); | ||
| bValue = parseInt(bValue); | ||
| } |
|
|
||
| const sortOrder = sortConfig.direction === 'ascending' ? 1 : -1; | ||
| return aValue - bValue * sortOrder; | ||
| }); |
There was a problem hiding this comment.
The code could use a comment here - not easy to tell what it does
| <th onClick={() => handleSort('roomId')}>Room ID</th> | ||
| <th onClick={() => handleSort('checkInDate')}>Check In Date</th> | ||
| <th onClick={() => handleSort('checkOutDate')}>Check Out Date</th> | ||
| </tr> |
There was a problem hiding this comment.
This works however and idea for next time: it's worth thinking about using .map() on an array for these sorts of things - can make it tider thouht this is up to your prefrence
| } | ||
| .selected { | ||
| background-color: skyblue; | ||
| background-color: rgb(241, 176, 249); |
2 participants
Learners, PR Template
Self checklist
Changelist
Briefly explain your PR.
Questions
Ask any questions you have for your reviewer.