Custom editor support #204
Closed
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
Hi,
Thanks for the great library. I needed to have support for editing with drop down, which I have implemented as per this pull request. This implementation allows any custom component to be embedded as editor.
How it works:
import cellEditFactory, { DropDownEditor } from 'react-bootstrap-table2-editor';const columns = [{ dataField: 'name', text: 'Product Name', editor: (<DropDownEditor dropDownKey="productName" items={ ['A', 'B', 'C'] } />) }];<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEditFactory({ mode: 'click', afterSaveCell: (oldValue, newValue, row, column) => { console.log(\Value changed from '${oldValue}' to '${newValue}'`); }}) }
/>`
Main Changes:
I've also added a Storyboard example to illustrate usage (see last item under cell edit).
Note: open item is where have events like onblur, onkeydown handled. I've left it as it is currently implemented (Editing Cell has handleBlur, handleKeyDown defined). However, it might be better to have the editor component handle the events. As these events differ among HTML elements (e.g., select has no onblur event). My proposal would be to manage events at the editor component level and have a callback in EditingCell for managing value changes.