{ `This Expand row is belong to rowKey ${row.id}` }
You can render anything here, also you can add additional data on every row object
@@ -165,3 +167,24 @@ const expandRow = { expandColumnPosition: 'right' }; ``` + +### expandRow.parentClassName - [String | Function] +Apply the custom class name on parent row of expanded row. For example: + +```js +const expandRow = { + renderer: (row) => ..., + parentClassName: 'foo' +}; +``` +Below case is more flexible way to custom the class name: + +```js +const expandRow = { + renderer: (row) => ..., + parentClassName: (isExpanded, row, rowIndex) => { + if (rowIndex > 2) return 'foo'; + return 'bar'; + } +}; +``` \ No newline at end of file diff --git a/docs/row-selection.md b/docs/row-selection.md index 18dd991..af2d16a 100644 --- a/docs/row-selection.md +++ b/docs/row-selection.md @@ -16,11 +16,13 @@ * [clickToEdit](#clickToEdit) * [onSelect](#onSelect) * [onSelectAll](#onSelectAll) +* [selectColumnPosition](#selectColumnPosition) * [hideSelectColumn](#hideSelectColumn) * [hideSelectAll](#hideSelectAll) * [selectionRenderer](#selectionRenderer) * [selectionHeaderRenderer](#selectionHeaderRenderer) * [headerColumnStyle](#headerColumnStyle) +* [selectColumnStyle](#selectColumnStyle) ### selectRow.mode - [String] @@ -224,6 +226,42 @@ const selectRow = { }; ``` +### selectRow.selectColumnStyle - [Object | Function] +A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization: + +### Style Object + +```js +const selectRow = { + mode: 'checkbox', + selectColumnStyle: { backgroundColor: 'blue' } +}; +``` + +### Callback Function +If a callback function present, you can get below information to custom the selection cell: + +* `checked`: Whether current row is seleccted or not +* `disabled`: Whether current row is disabled or not +* `rowIndex`: Current row index +* `rowKey`: Current row key + + +```js +const selectRow = { + mode: 'checkbox', + selectColumnStyle: ({ + checked, + disabled, + rowIndex, + rowKey + }) => ( + // .... + return { backgroundColor: 'blue' }; + ) +}; +``` + ### selectRow.onSelect - [Function] This callback function will be called when a row is select/unselect and pass following three arguments: `row`, `isSelect`, `rowIndex` and `e`. @@ -275,6 +313,16 @@ const selectRow = { }; ``` +### selectRow.selectColumnPosition - [String] +Default is `left`. You can give this as `right` for rendering selection column in the right side. + +```js +const selectRow = { + mode: 'checkbox', + selectColumnPosition: 'right' +}; +``` + ### selectRow.hideSelectColumn - [Bool] Default is `false`, if you don't want to have a selection column, give this prop as `true` diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md index f5d98aa..cda2e0a 100644 --- a/packages/react-bootstrap-table2-editor/README.md +++ b/packages/react-bootstrap-table2-editor/README.md @@ -89,7 +89,10 @@ const columns = [ In the following, we go though all the predefined editors: ### Dropdown Editor -Dropdown editor give a select menu to choose a data from a list, the `editor.options` is required property for dropdown editor. +Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either `editor.options` or `editor.getOptions` should be required prop. + +#### editor.options +This is most simple case for assign the dropdown options data directly. ```js import { Type } from 'react-bootstrap-table2-editor'; @@ -119,6 +122,46 @@ const columns = [ }]; ``` +#### editor.getOptions +It is much flexible which accept a function and you can assign the dropdown options dynamically. + +There are two case for `getOptions`: + +* *Synchronous*: Just return the options array in `getOptions` callback function +* *Asynchronous*: Call `setOptions` function argument when you get the options from remote. + + +```js +// Synchronous + +const columns = [ + ..., { + dataField: 'type', + text: 'Job Type', + editor: { + type: Type.SELECT, + getOptions: (setOptions, { row, column }) => [.....] + } +}]; + +// Asynchronous + +const columns = [ + ..., { + dataField: 'type', + text: 'Job Type', + editor: { + type: Type.SELECT, + getOptions: (setOptions, { row, column }) => { + setTimeout(() => setOptions([...]), 1500); + } + } +}]; + +``` + +[here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Dropdown%20Editor%20with%20Dynamic%20Options) is an online example. + ### Date Editor Date editor is use ``, the configuration is very simple: diff --git a/packages/react-bootstrap-table2-editor/package.json b/packages/react-bootstrap-table2-editor/package.json index 23d1837..2f5df7c 100644 --- a/packages/react-bootstrap-table2-editor/package.json +++ b/packages/react-bootstrap-table2-editor/package.json @@ -1,6 +1,6 @@ { "name": "react-bootstrap-table2-editor", - "version": "1.2.3", + "version": "1.3.2", "description": "it's the editor addon for react-bootstrap-table2", "main": "./lib/index.js", "scripts": { diff --git a/packages/react-bootstrap-table2-editor/src/context.js b/packages/react-bootstrap-table2-editor/src/context.js index e9317e2..ea3c1f0 100644 --- a/packages/react-bootstrap-table2-editor/src/context.js +++ b/packages/react-bootstrap-table2-editor/src/context.js @@ -56,12 +56,13 @@ export default ( } handleCellUpdate(row, column, newValue) { + const newValueWithType = dataOperator.typeConvert(column.type, newValue); const { cellEdit } = this.props; const { beforeSaveCell } = cellEdit.options; const oldValue = _.get(row, column.dataField); const beforeSaveCellDone = (result = true) => { if (result) { - this.doUpdate(row, column, newValue); + this.doUpdate(row, column, newValueWithType); } else { this.escapeEditing(); } @@ -69,7 +70,7 @@ export default ( if (_.isFunction(beforeSaveCell)) { const result = beforeSaveCell( oldValue, - newValue, + newValueWithType, row, column, beforeSaveCellDone @@ -78,7 +79,7 @@ export default ( return; } } - this.doUpdate(row, column, newValue); + this.doUpdate(row, column, newValueWithType); } doUpdate(row, column, newValue) { diff --git a/packages/react-bootstrap-table2-editor/src/dropdown-editor.js b/packages/react-bootstrap-table2-editor/src/dropdown-editor.js index 166a208..b019e2e 100644 --- a/packages/react-bootstrap-table2-editor/src/dropdown-editor.js +++ b/packages/react-bootstrap-table2-editor/src/dropdown-editor.js @@ -4,6 +4,21 @@ import cs from 'classnames'; import PropTypes from 'prop-types'; class DropDownEditor extends Component { + constructor(props) { + super(props); + let options = props.options; + if (props.getOptions) { + options = props.getOptions( + this.setOptions.bind(this), + { + row: props.row, + column: props.column + } + ) || []; + } + this.state = { options }; + } + componentDidMount() { const { defaultValue, didMount } = this.props; this.select.value = defaultValue; @@ -11,12 +26,16 @@ class DropDownEditor extends Component { if (didMount) didMount(); } + setOptions(options) { + this.setState({ options }); + } + getValue() { return this.select.value; } render() { - const { defaultValue, didMount, className, options, ...rest } = this.props; + const { defaultValue, didMount, getOptions, className, ...rest } = this.props; const editorClass = cs('form-control editor edit-select', className); const attr = { @@ -31,7 +50,7 @@ class DropDownEditor extends Component { defaultValue={ defaultValue } > { - options.map(({ label, value }) => ( + this.state.options.map(({ label, value }) => ( )) } @@ -41,6 +60,8 @@ class DropDownEditor extends Component { } DropDownEditor.propTypes = { + row: PropTypes.object.isRequired, + column: PropTypes.object.isRequired, defaultValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.number @@ -52,13 +73,16 @@ DropDownEditor.propTypes = { label: PropTypes.string, value: PropTypes.any })) - ]).isRequired, - didMount: PropTypes.func + ]), + didMount: PropTypes.func, + getOptions: PropTypes.func }; DropDownEditor.defaultProps = { className: '', defaultValue: '', style: {}, - didMount: undefined + options: [], + didMount: undefined, + getOptions: undefined }; export default DropDownEditor; diff --git a/packages/react-bootstrap-table2-editor/src/editing-cell.js b/packages/react-bootstrap-table2-editor/src/editing-cell.js index 7c693b1..2a0d85b 100644 --- a/packages/react-bootstrap-table2-editor/src/editing-cell.js +++ b/packages/react-bootstrap-table2-editor/src/editing-cell.js @@ -201,7 +201,7 @@ export default (_, onStartEdit) => if (_.isFunction(column.editorRenderer)) { editor = column.editorRenderer(editorProps, value, row, column, rowIndex, columnIndex); } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) { - editor ={ sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
+ { sourceCode }
{ sourceCode }
{ `This Expand row is belong to rowKey ${row.id}` }
+{ `This Expand row is belong to rowKey ${row.id} and index: ${rowIndex}` }
You can render anything here, also you can add additional data on every row object
expandRow.renderer callback will pass the origin row object to you
{ `This Expand row is belong to rowKey ${row.id}` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ `This Expand row is belong to rowKey ${row.id}` }
+You can render anything here, also you can add additional data on every row object
+expandRow.renderer callback will pass the origin row object to you
+{ sourceCode1 }
+ { sourceCode2 }
+ { sourceCode1 }
+ { sourceCode2 }
+ { sourceCode }
+