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
Post a Comment