Filter table columns (not rows) on selecting an option from a dropdown select in Vue-tables-2

264 Views Asked by At

I have a table with numerous columns. The columns can be grouped into a few categories. I want to filter the columns by their categories.

For Example:

Categories Africa Asia South America

Columns |Nigeria|Tanzania|Mali|China|Russia|India|Brazil|Peru|Chile|

The dropdown select will have the Categories Africa Asia South America

On selecting Asia, the table will now look like this:

Categories Asia
Columns |China|Russia|India|

On selecting the category, all the other columns not belonging to the selected category should be hidden.

I already have the component containing the categories placed next to the main filter. All I need now is the logic to hide the categories on category select, either that or a way to tap into the built in columnsDropdown option to achieve this functionality.

Help appreciated. Thank you.

0

There are 0 best solutions below