npm package: @licuido-ui/ui_select-options
Description: Select Options is the Component with search field and the Listing for the Datas
Latest version: 3.0.1

# SelectOptions

Select Options is the Component with search field and the Listing for the Datas

### Author

- @author Vengadesh Pandiyan <vengadesh@crayond.co>

## Link

[Story Book Link Layout](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_select-options
```

## Import component

```jsx
import { SelectOptions } from '@licuido-ui/ui_select-options';
```

## Usage

```jsx
<SelectOptions onChange={ () => undefined} value={''} dataType={[]} rows={[]}
      />
```

## Image

![alt text](./selectOptions.png)

// Styles Eg after changed the 3rd cell style alone
![alt text](./styleForIndividualCellSnap.png)




## Sample Code

```jsx
    <SelectOptions
        value={textFieldValue}
        onChange={handleChange}
        placeholder={'Search'}
        dataType={[
          { type: ['avatar'], name: 'name', imagekey: 'image' },
          { type: ['text'], name: 'tasks' },
          { type: ['textwithToolTip'], name: 'status' },
          { type: ['checkBox'], name: 'checkboxKey' },
        ]}
        onCheckBox={onCheckBox}
        rows={options}
        titleText={'Selected Members'}
        subTitleText={`${options?.filter((i: any) => i?.checkboxKey)?.length} Selected`}
        tooltipIcon={<InfoIcons />}
        toolTipText={'Tool Tip'}
        startAdornment={<SearchIcon />}
        textfieldStyles={}
        rowColumnStyles={}
        titleStyles={}
        titleBoxStyles={}
        typeBoxStyles={{
          ':nth-child(1)' {
            background: yellow;
          }

        }}
        avatarIconStyles={}
        textStyles={}
        checkBoxStyles={}
        dividerStyle={}
        
      />
```

## Props

| **Name**             | **Description**                                                                                                                                                                      | **Default** | **Control** |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | ----------- |
| **id**               | string                                                                                                                                                                               | string      | string      |
| **value**            | The Value of the Searched Texts                                                                                                                                                      | string      | string      |
| **onChange**         | The Handler The Input Text Field                                                                                                                                                     | `undefined` | Function    |
| **placeholder**      | Place Holder Text For the Search field                                                                                                                                               | string      | string      |
| **dataType**         | Array of Items has its own functionalaties by its unique type                                                                                                                        | Array       | []          |
| **onCheckBox**       | The Handler Function for the CheckBox                                                                                                                                                | undefined   | function    |
| **rows**             | The Array of Objects Which is mapped to show the below List iof Datas                                                                                                                | Array       | []          |
| **titleText**        | The Text For the Title Items                                                                                                                                                         | string      | string      |
| **subTitleText**     | The Text For the Right Title Items                                                                                                                                                   | string      | string      |
| **tooltipIcon**      | It is the prop for the tool Tip Icon                                                                                                                                                 | ReactNode   | ReactNode   |
| **toolTipText**      | It is the prop for the tool Tip Text                                                                                                                                                 | string      | string      |
| **startAdornment**   | It is the prop for Start Icon for the Text Field                                                                                                                                     | ReactNode   | ReactNode   |
| **textfieldStyles**  | The Style Items for the Text Field                                                                                                                                                   | object      | object      |
| **rowColumnStyles**  | The Style Items for the Row of thr Table                                                                                                                                             | object      | object      |
| **titleStyles**      | The Style Items for the Title Fields                                                                                                                                                 | object      | object      |
| **titleBoxStyles**   | The Style Items for the Title Container                                                                                                                                              | object      | object      |
| **typeBoxStyles**    | The Style Items for the Table Cell and :nth-child(Cell Position should keyed here) for an instance if the first cell style alone need to change should type :nth-child(1) like that. | object      | object      |
| **avatarIconStyles** | The Style Items for the Avatar Icon                                                                                                                                                  | object      | object      |
| **textStyles**       | The Style Items for the Text Styles                                                                                                                                                  | object      | object      |
| **checkBoxStyles**   | The Style Items for the Check Box Styles                                                                                                                                             | object      | object      |
| **dividerStyle**     | The Style Items for the Divider Styles                                                                                                                                               | object      | object      |