sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.62k stars 1.33k forks source link

Add grouping support like select's <optgroup> tag #1713

Closed pimepan closed 1 year ago

pimepan commented 1 year ago

We are using extensively the component for an admin dashboard we built from the ground up but now our users need to be able to visualize inside the selected data, divided by groups and we havent found a way to doit with the component as it is.

we would like to have a funcitonal prop (like reduce), maybe called "groupedBy" that recieves an Array of objects with the name of the group and a filtering function to append the data to that group. Something like:

<vSelect :group-by='[
   {
      label:'Group X',
      cond:(item)=> item === 'abc'
    },
  {
      label:'Group y',
      cond:(item)=> item === 'cba'
    }

]'/>

I am open to alternatives arounde this problem too! anything that can enable this feature would be nice

sagalbot commented 1 year ago

One of the longest standing feature requests for sure. I like the look of that API.

I'm working on making this happen in v4, and it'll use a 'composition' approach with components, but I'll probably be able to add support for this api as well.

Closing this, since we've got #342 (over a thousand issues ago!) which will feel great to finally close.