Adding comma notation to MenuSelect totals

Hi there!

Is it possible add comma notation to MenuSelect totals?

37 AM
This is an example of a filter we’d like to have comma notation.

Thank you!

Hi Angelique,

Here’s a demo: https://codesandbox.io/s/wnq8nqk767

I added 1000 just so they show up as things that need numbers.

search.addWidget(
  instantsearch.widgets.menuSelect({
    container: '#brand-list',
    attributeName: 'brand',
    templates: {
      item: ({ label, count }) =>
        `${label} (${count.toLocaleString('en-US')})`,
    },
  })
);

Thanks, Haroen!

Is it possible to do something similar with react-instantsearch as well?

Yes, in React InstantSearch you’d do it like this:

<MenuSelect
  attribute="brand"
  transformItems={items => {
    console.log(items);
    return items.map(({ count, ...item }) => ({
      count: count.toLocaleString('en-US'),
      ...item,
    }));
  }}
/>

Perfect.

Thank you so much!

1 Like