On Cell edit of react-bootstrap-table, in dropdown I want the unique index of selected value

Question

I have a cell edit functionality in which I am using editable={ { type: 'select', options: { values} } } . After selecting a value, I want its unique index value as options have common values. Is there any way to do it?

Here is the Code of Table:

    <BsTable
                        errorMessage={ '' }
                        loading={ false }
                        options={ STATIC_TABLE_OPTIONS }
                        data={ this.state.updatedSteps }
                        rowsCount={ this.state.updatedSteps.length }
                        fetchInfo={ {
                            dataTotalSize: this.state.updatedSteps.length
                        } }
                        cellEdit={ cellEditProp }
                        headerContainerClass="my-header-class"
                        headerStyle={ {
                            fontSize: 'smaller'
                        } }
                        bordered={ false }
                    >
                        <Column dataField="idx" isKey hidden />
                        <Column dataField="selectedBusinessStep"
                            width="15%"
                            editable={ { type:    'select',
                                options: { values: arrBizStep }
                            } }
                        > </BsTable>

And in the cellEditProp, my code is:

const cellEditProp = {
        mode:          'click',
        blurToSave:    true,
        afterSaveCell: ( row, cellName, cellValue ) => {
            this.props.editCombinationHandler( row );
        }
    };

When I change the value from dropDown which is located in:

<Column dataField="selectedBusinessStep"
                        width="15%"
                        editable={ { type:    'select',
                            options: { values: arrBizStep }
                        } }

I get the row, cellName and cellValue in afterSaveCell function, which is in cellEditProp mentioned above. is there any way to get the index of the selected item of dropdown <Column dataField="selectedBusinessStep" . Please let me know if you need more discription?

Answer 1

This is how you can get the index of selected item in SELECT dropdown.

const cellEditProp = {
    mode: 'click',
    blurToSave: true,
    afterSaveCell: handleChange
};

And handleChange

function handleChange(oldValue, newValue, row, column) {
  let indexOfSelectedItem = -1;
  column.editor.options.forEach((item, idx) => {
    if (newValue === item.value) {
      indexOfSelectedItem = idx;
    }
  });
  if (indexOfSelectedItem > -1) {
    console.log(indexOfSelectedItem);
  }

  // indexOfSelectedItem <<<< 

}

I have made this simple demo with react-bootstrap-table-2, but the same logic can be used to previous version as well. Hope this helped you to resolve the issue.

Click on price to edit and the check the console output: https://codesandbox.io/s/react-bootstrap-table-next-with-editable-price-tgy0y