The goal of this assignment is to create a table with filter and sorting functionality for a snack list using React JS.
- Display a table to show the snack data, with columns for ID, Product Name, Product Weight, Price, Calories, and Ingredients. The JSON to populate data for these columns have been provided below at the end.
- Create a search input field to allow users to filter the snacks by product name or ingredients, regardless of the case. Update the table dynamically as the user types in the search input to show only the products matching your search input.
- Sorting:
- Make all the table headers clickable to enable sorting (Ascending/Descending order) by the respective column. All the columns should have sorting functionality.
- Indicate that the header is clickable by showing a pointer or some CSS as per your wish.
- Update the displayed table dynamically when the sorting order changes.