Filter dropdown on the table

[GiulianoReginatto]

When the filter has more options than the table rows, the table gets overflow, instead of the dropdown being on top of the table.
Is it possible to keep the filter dropdown on top of the table?
Which CSS do I need to use?

JSFiddle: https://jsfiddle.net/y6bskvmw/

[bebetoalves]

I have a similar question. Is it possible to use the filter outside the table? Such as the search externalQuery input, where it is already possible to do this.

[TheJaredWilcurt]

@Kraysh @bebetoalves

When popping out a div to simulate a dropdown, there are tradeoffs for how to position it, particularly when inside of a scrollable parent element. You can either

• have it pinned underneath the input field to simulate looking like a normal dropdown, completely containing the element inside the scrollable area,
• or you can have it pinned at the root level of the page, meaning the dropdown menu would stay in it's spawned location and everything else would scroll around underneath it
• or it could be spawned above the scrollable area and as you scroll it is moved up and down the page, still visible while it's input field is scrolled out of view.

none of these are great options. But I have mixed news for you! The library that was making this decision for you is Vue-Select. It is a 3rd party library that increased Vue-Good-Table's dist size by ~15%, and limited our user's choice. In the latest release of Vue-Good-Table (v2.21.0), we've removed this feature and replaced it with a custom slot.

Bad News! You will need to update your code if relying on filterMultiselectDropdownItems because this feature is removed.

Good News! You can now pick any multi-select library you want to handle this. Or even your own custom component. There are docs for migrating to the new feature and maintaining usage of Vue-Select if you want to keep it.

• Docs for using the new feature
• Docs for migrating and adding Vue-Select back in to your table

Closing this issue.

[GiulianoReginatto]

Using appendToBody in v-select has been resolved.