#32Sortable Table

Overview

Build a sortable table where users can click on column headers to sort data in ascending or descending order.

Requirements

• Render a table with the provided user data.
• All columns except id should be rendered and sortable.
• Clicking a column header sorts the rows by that column.
• Clicking the same column again toggles sort direction.
• Display a sort icon (BsSortDown / BsSortDownAlt) in the active sorted column.
• Icon should update when sort direction changes.
• Only the active column shows a sort icon.
• Each header button should have an aria-label that updates when clicked, e.g., from "Sort by name in descending order" to "Sort by name in ascending order".
• Alternate row background colors for better readability (even:bg-neutral-200).

Notes

• The joined column is a date string; convert to Date when sorting.
• The active column is a boolean; false should appear before true in ascending order.
• Use state hooks to manage the sorted data, the currently sorted column, and the sort direction.
• Ensure that icons and aria-label reflect the current sort state and intended direction.
• The icon reflects the current sort state in the UI, while the aria-label indicates the sort direction that will be applied when the button is clicked.

Tests

1. render the title
2. renders the table headers correctly
3. renders the correct number of rows
4. sorts the table by a column when the header is clicked
5. toggles sort direction when clicking the same column twice
6. has alternating background colors for rows
7. buttons have accessible aria-labels
8. updates aria-label when clicking a column header
9. updates icon when clicking a column header
10. shows the sort icon only on the clicked column