Sort and Filter Products

Build the filters of a product table: a search box, a category and five sort orders that combine. You practice values derived from state.

• The interface: the search box, the Category and Sort by selects and the product table.
• PRODUCTS in the order the shop wants to show them first (Featured).
• Your job is the logic: store what each control says and compute the rows that are shown.
• Keep aria-label="Search products", the Category and Sort by labels, the option values and the text No products match: the tests use them.

• At the start every product is shown, in the order of PRODUCTS (Featured).
• The search shows only the products whose name contains the text, ignoring upper and lower case.
• The category shows only the products of that category; All shows every category.
• The sort orders the shown products: by name A–Z or Z–A, by price low to high or high to low, or Featured, the order of PRODUCTS.
• Products with the same price are ordered by name, A to Z, in both price orders.
• The search, the category and the sort combine.
• If no product matches, No products match is shown instead of the rows.

• You choose Bags → you see Laptop Sleeve and Travel Backpack.
• You choose Price: high to low with Displays → 27-inch Monitor, Portable Monitor, eBook Reader.
• You type zzz → you see No products match.

• Derived values from several pieces of state.
• Sorting a list with a comparator.