Feature/add multiselect filter

[cassmbautista]

Added feature #405

This new feature is to add a multiple selection option to vue-good table. Seen in the image below:

The changes made in this PR are:

• Added library for multiselect options called: vue-select
• Using new component added an option to the filter options to set the multiselect dropdown.
  • This option does a fuzy search on any of the selected options.
  • This feature will work with the specified types as well
  • This also works when reseting the table
• Updated docs to include documentation for new filter options
• Updated dev app to use new feature

[xaksis]

This is sweeet! @cassmbautista my only concern is adding another library for something that is not core to the table and might not be used by everyone.
I'm trying to trim down the existing ones to reduce the size (lodash etc). Is it possible to add this as a plugin for vue-good-table? that way you can maintain it and people can optionally add it if they want to use it?

[cassmbautista]

@xaksis Yea I was concerned about that too since I noticed you have very little dependencies. However, I have no idea how to add it as a plugin for vue-good-table. Any ideas? Do you have any examples of plugins to components?

[xaksis]

Good point. I was actually thinking of making a column-manager plugin for VGT myself to figure out how that'd work. Mind if I hold off on this for a bit? Then we can use that as a template if it works.

[cassmbautista]

Yea, you can hold off on this for a while. I am also interested in the functionality of the column-manager plugin.

[TheJaredWilcurt]

@xaksis
I was wanting a column manager option as well. My design for it would have been a button or icon that opens a pop-out menu with all columns listed in a scrollable area. Each column name would have a grabber icon on the left to drag it up/down to reorder them and a checkmark to the right of the column name to show/hide that column.

My original mockup:

The default sort allows the user to pick which column to sort by by default.

[xaksis]

haha @TheJaredWilcurt that's pretty much exactly what I have implemented in the project that I was planning to refactor. Glad to see it validated!

[bhargavjoshi]

Guys (@cassmbautista, @xaksis) while you are discussing the column plugin, it can be a good idea to give an autocomplete function in the filter (let say you want to filter by a particular user, and there are 1000s of the user and autocomplete server fetching is a good option) for those using remote mode

[TheJaredWilcurt]

@bhargavjoshi
This PR uses vue-select which has that capability. I'm not sure if this PR supports that, but it could be an additional follow up PR to add that functionality if it doesn't.

• https://vue-select.org/guide/ajax.html

[bhargavjoshi]

@cassmbautista, @xaksis

I was thinking about giving users the ability to use their own filter component.

Right now we have these options.

filterOptions: {
  enabled: true,
  filterValue: '',
  placeholder: "Show All",
  filterDropdownItems: ['']
}

We can add a property for a component like this

filterOptions: {
  enabled: true,
  filterValue: '',
  component: '<MyCustomComponent :attr1="attr1" @change="functionToSetFilterValue" />'
}

We have to think about how we can pass data to the component and also get data from the component.

My use case Is I want to give two text inputs with labels to put min amount and max amount. (basically a range filter).

Let's discuss more on this.

[paulhuisman]

Nice work! Would love to see this get integrated!

[cassmbautista]

@xaksis Have you been able to make an example plugin for vue-good-table, so that I can convert this PR to a plugin?

[xaksis]

@cassmbautista really sorry but I have been very busy with another project. When I get a breather I'll get on it! I will keep you updated.

[ghost]

It's looking good. Can't wait to see it integrated or as a plugin :)

[talbotseb]

Hi @xaksis !
Thanks a lot for your good work even if it lets us a bit dependant ...
Any idea about when you'll be able to come back on this project ?
It'll be nice to get some extra-features. If you're busy, maybe there is somebody here who could help you ?

Thanks anyhow !

[TheJaredWilcurt]

This can probably be a filter > map instead of map > filter > map

[TheJaredWilcurt]

Merging this in means a 15% increase in the payload size (since it will now include the vue-select dependency). If this can be set up as an optional dependency or to be tree-shakable that would be ideal. However I'm also fine with that being a follow up issue.