Add an "Select all" option to your select component

🤝 Community Show & Tell
1

Hi all,

I just wanted to share this quick workaround to add a "Select All" functionality in a dropdown component that's using a query to map it's values.

image
image1358×720 65.5 KB

Basically what I did was:

  • Concatenate an identical array to the ones in my data source, but with the 0/All combination to get an All option which has 0 as value:
{{ listSuppliers.data.filter(x => x.is_partner_brand === true).map(supplier => supplier).concat([{
  id: 0,
  name: "All",
  address: null,
  abbreviation: null,
  location_id: "0",
  is_partner_brand: true,
  shopify_vendor: null,
  xero_id: null,
  product_count: "0"
}])
 }}

After that, I just updated the query that's filtering the results with

WHERE ({{ slctSupplier2.value }} = 0 OR rp.supplier_id = {{ slctSupplier2.value }})

Finally, to distinguish the All from the other options, I added a terniary in the color setting:

{{ item.name === 'All' ? '#E67D22' : theme.primary }}

It's not the cleanest of solutions but it's a simple workaround. Would love to hear from other power users how they managed this for their own solutions.

1 Like