addDetailsItem

[MohsenEs]

Hi
Thanks For react Select
How can I add more information in the items section like the photo below and search on any of the items like the photo

[ebonow]

(Converted from issues to discussion)

The prop you are likely looking for is formatOptionLabel to render JSX for your option.

const formatOptionLabel = (option, { context }) => {
  return context === 'menu' ? 
    (<div>
      <div>{option.id}</div>
      <div>{option.description}</div>
      <div>{option.product}</div>
    <div>
  ) : option.label
}

return <Select formatOptionLabel={formatOptionLabel} {...otherProps} />

To search on any of the fields, you can modify the filterOptions. There are a few custom options you can use to modify how the filtering is done. In this case, you would want to use createFilter and pass in a stringify function which takes all of the data you want to search on and return it in a string.

More information on custom filtering can be found here: https://react-select.com/advanced#custom-filter-logic

import Select, { createFilter } from 'react-select';

const filterConfig = {
  stringify: ({ data }) => `${data.id} ${data.description} ${data.product}`
};

return <Select filterOptions={createFilter(filterConfig)} {...otherProps} />

[ebonow]

If this fits your answers your question please kindly mark this response as answered.

[MohsenEs]

Thankful
It seems that should be the case, only I did not succeed
To do
https://codesandbox.io/s/codesandboxer-example-forked-w1ybx?file=/formatOptions.jsx:1042-1059

[ebonow]

1. You wouldn't need a custom Option component since you are rendering the JSX for the option through the formatOptionLabel prop.

2. context is actually a property inside of the FormatOptionContext object, so apologies for that. I will update the example above to avoid confusion for anyone else looking at this in the future.

3. stringify returns the option from the mapped options and not directly from the props, so the attributes need to be pulled from option.data and not option. I will update this as well.

I put together a codesandbox based on these revisions using css-grid that should be a bit closer to what you are looking based on the screenshot above. This also uses the stringify function. This enables the ability to do filtering on the label, rgb color code, or the user can type "fixed" to show only isFIxed options

Hope this helps...

Codesandbox Demo

[ebonow]

@MohsenEs Can you confirm if the above solution resolves your question?

[ebonow]

@MohsenEs Can you confirm if the above solution resolves your question?