Sortable Directory Team Block for React

Edit PEOPLE at the top: a name, a role, a department and a year, the year of tenure. The longest tenure sets the bar's full width. The sortable columns are listed in COLUMNS; each key needs a case in the small compareBy function. Add a column by adding a key there, a header cell and a cell per row.

Pressing a column sorts by it from the start of its order; pressing the sorted column again reverses it. Name and Department run A to Z, then Z to A. Joined is a tenure, so its first order is longest tenure first, then newest first. Ties fall back to the name.

The sorted header cell carries aria-sort (ascending or descending), the other sortable columns carry none, and a polite status line reads the result, such as "Sorted by Department, A to Z". Focus stays on the header you pressed. Each sortable header holds a real button inside its cell.

The header row is hidden and a Sort by group (Name, Department, Joined) sits above the list. Press the selected button again to reverse the order, or another to switch. Each person is two lines, with the role and department under the name and the tenure at the end; six are shown and a Show all 10 button opens the rest.

The header and the table fade up once on load, and the rows fade in again after each sort; nothing slides, and no row animates between positions. With reduced motion every fade is off and the order simply changes.

The bars are decoration: the same tenure is in the cell as text ("Year 7"), and that text is what a screen reader reads. The numeral is isolated so it keeps its order in a right-to-left layout.