Deviopath › React

Sortable Table

Hard · Data Display

Render the PEOPLE array as a <table> with a <thead> row of three <th> ("Name", "Age", "City") and one <tbody> <tr> per person (cells in the same order).

Clicking a <th> sorts by that column:

- The first click on a column sorts ascending, clicking the same column again toggles between ascending and descending.

- The sorted column header shows an indicator: "Name ▲" for ascending, "Name ▼" for descending. Other headers show just their name.

- Ages are compared as numbers, text with localeCompare.

- Rows with equal values keep their original order.

Before any click the rows are in the original order.

Next: Transfer List