[TASK] Implement Sorting Functionality for Tables on Nominations page

[monaiuu]

Description

Enhance ux by implementing sorting capabilities for the all Validators table (Active/Waiting) within the Nomination page. This will improve usability and allow users to navigate and organize the validator data more effectively.

Sorting Features:

• Enable sorting on the following columns:
  • Identity, Effective Amount Staked , Self-Staked, Nominations, Commission
• Clickable column headers to toggle between ascending and descending order for sorting.
• Default sorting should be set on the "Effective Amount Staked" column in descending order to immediately highlight validators with the most significant stake.
  • Down Arrow (↓): This indicates descending order. When clicked, the table will sort the column from the largest or greatest value at the top to the smallest or least value at the bottom.
  • Up Arrow (↑): This indicates ascending order. When clicked, the table will sort the column from the smallest or least value at the top to the largest or greatest value at the bottom.

Example Screenshots

default is sorted by effective amount staked, selecting a table header item (i.e., identity in this case) will enable sorting table is now sorted by identity in alphabetical order selecting again will reverse the sorting order

• above are examples of the interaction, same logic should be applied to all table header items.
• similar logic should also be applied to Nominations and Payouts tables

[monaiuu]

Notes

• While addressing this task, lets improve the alignment of all columns to left-align, matching the style used in the Identity column.
• For the waiting validators, are we able to display more data similar to acitve validators?

Current Views