79Build a sortable and filterable data table

Build <DataTable columns={columns} rows={rows} /> that sorts and filters on the client.

columns is an array of { key, label, type: "string" | "number" }; rows is an array of objects.

• A search box <input aria-label="Search"> keeps only rows where any column contains the text (case-insensitive).
• Each header <th> contains a <button> with the column label. Clicking it cycles the sort: ascending → descending → none (back to the original order). The <th> has aria-sort="ascending" | "descending" | "none".
• Number columns sort numerically (9 before 10); string columns use localeCompare with natural numbers.
• When nothing matches, render a single row with No results.

Requirements

• Sorting is stable: rows with equal values keep their original relative order.
• Never mutate the rows prop.
• Only one column is sorted at a time; clicking another column starts it at ascending.