# Sortable Table

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

- Difficulty: intermediate
- Tags: useState
- Estimated time: 30 minutes
- Tests: 10
- Requires subscription: yes

## 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

01. render the title
02. renders the table headers correctly
03. renders the correct number of rows
04. sorts the table by a column when the header is clicked
05. toggles sort direction when clicking the same column twice
06. has alternating background colors for rows
07. buttons have accessible aria-labels
08. updates aria-label  when clicking a column header
09. updates icon when clicking a column header
10. shows the sort icon only on the clicked column