Feature Description
The leaderboard table should allow users to sort entries by clicking on column headers.
The columns that can be sorted are Easy, Medium, Hard, Total and Score.
When a user clicks on a column header the entries should be sorted in descending order by default.
The sort order can be toggled between ascending and descending.
Expected Behavior
- When a user clicks on a column header the table should be sorted by that column in descending order.
- If the user clicks on the header again the sort order should toggle to ascending.
- An arrow indicator should show which column is being sorted and in which direction.
- The sorting feature should work with the existing search and pagination features.
The sort should be applied before the results are split into pages.
- The Rank column should not be affected by the sorting feature. It should continue to show each users overall rank.
Proposed Implementation
- Add a
data-sort attribute to the header cells in the leaderboard.html file.
- Create a new JavaScript file called
sort.js in the js/leaderboard directory. This file will handle click listeners, state and a pure sort function.
- Integrate the feature into the
applyFiltersAndRender() function. This should be done after the existing search filter so it works smoothly with search and pagination.
- Make some minor CSS additions in
main.css to change the cursor to a pointing hand on hover and add arrow styling.
Please assign this task to me. I am happy to open a request within the next day or two under gssoc.
Feature Description
The leaderboard table should allow users to sort entries by clicking on column headers.
The columns that can be sorted are Easy, Medium, Hard, Total and Score.
When a user clicks on a column header the entries should be sorted in descending order by default.
The sort order can be toggled between ascending and descending.
Expected Behavior
The sort should be applied before the results are split into pages.
Proposed Implementation
data-sortattribute to the header cells in theleaderboard.htmlfile.sort.jsin thejs/leaderboarddirectory. This file will handle click listeners, state and a pure sort function.applyFiltersAndRender()function. This should be done after the existing search filter so it works smoothly with search and pagination.main.cssto change the cursor to a pointing hand on hover and add arrow styling.Please assign this task to me. I am happy to open a request within the next day or two under gssoc.