-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
NW6 | nazanin_Saedi | Feature-sort-table-column | reactProject | Week4 #51
base: main
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for react-module-project-nw6-team-2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
THis is a good touch 👍
|
||
const sortOrder = sortConfig.direction === 'ascending' ? 1 : -1; | ||
return aValue - bValue * sortOrder; | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
@@ -22,5 +22,5 @@ th { | |||
cursor: pointer; | |||
} | |||
.selected { | |||
background-color: skyblue; | |||
background-color: rgb(241, 176, 249); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice touch.
Learners, PR Template
Self checklist
Changelist
Briefly explain your PR.
Questions
Ask any questions you have for your reviewer.