React bootstrap React Table dropdown cell component

export function DropDownCell(props) {
const [dropDownVal, setDropDownValue] = useState(props?.cellInfo?.cell?.value);
useEffect(() => {
if (props?.cellInfo?.cell?.value && (dropDownVal !== props?.cellInfo?.cell?.value)) {
setDropDownValue(props?.cellInfo?.cell?.value);
}
}, [props?.cellInfo?.cell?.value]);
const handleChange = (e) => {
setDropDownValue(e.target.value);
props.updateHandler(props?.cellInfo?.row?.index, props?.cellInfo?.column?.id, e.target.value);
};
return <div>
<Form.Group className={'m-0'}>
<Form.Control as={'select'}
id={props?.cellInfo?.row?.index + '_' + props?.cellInfo?.column?.id}
value={dropDownVal ? dropDownVal : ''}
required={props?.required}
onChange={handleChange}>
<option value="" key={props?.controlName + '_NONE'}>Select option</option>
{props?.list?.map((listItem) => {
return <option key={props?.controlName + '_' + listItem?.value} value={listItem?.value}>{listItem?.label}</option>
})}
</Form.Control>
</Form.Group>
</div>;
};

How to use in column :
{
  Header: "Material", accessor: "itemId", Cell: (cellInfo) => {
    return <DropDownCell cellInfo={cellInfo} 
                         updateHandler={() => {}}
                         controlName="itemId"                         
                         required={true}
                         list={[]}/>  }
}

Comments

Popular posts from this blog

MATLAB code for Circular Convolution using Matrix method

Positive number pipe in angular 2+