You are given markup for a table of products and 3 arrays. Implement as much options below as you can:
- Render products in a table with id, name, category and an owner.
- category should render its icon before the title;
- owner names should be colored with
has-text-link
for men andhas-text-danger
for women.
- Implement ability to filter products by an owner:
- If a user is selected it should be highlighter with
is-active
class; - Show only products of a selected user;
- Select
All
to see all the products.
- If a user is selected it should be highlighter with
- Use the
input
to filter products by name.- Show only products having the input value in their name ignoring the case;
- The
x
button should appear only when the value is not empty; - Clear the value after the
x
button click.
- Show
No results
message if there are no products matching current criteriaReset All Filters
button should clear all the filters.
- (*) Allow to select several categories:
- Add
is-info
class to selected categories; - Show only products of selected categories;
All
button should clear the selection;- Remove
is-outlined
class from theAll
button if no categories are selected.
- Add
- (*) Add ability to sort products by all the columns:
- a column should have a title with the
fa-sort
icon by default; - the first click sorts products by the given column ascending and use
fa-sort-up
icon; - the second click sorts products in the descending order and use
fa-sort-down
icon; - the third click disables sorting;
- products are sorted by 1 column at a time (reset the column title when clicking on the other one)
- a column should have a title with the