From 46258b0264240f1e050db303740b597680b86ec2 Mon Sep 17 00:00:00 2001 From: Gena M Date: Sat, 13 Jul 2019 08:57:03 +0300 Subject: [PATCH 1/6] Update README, overlayFactory example (#997) Update example of usage `overlayFactory` according to "react-loading-overlay" documentation. --- docs/README.md | 11 +++++++++-- .../examples/loading-overlay/table-overlay.js | 9 +++++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/docs/README.md b/docs/README.md index dc12d3a..20bbd13 100644 --- a/docs/README.md +++ b/docs/README.md @@ -98,7 +98,14 @@ import overlayFactory from 'react-bootstrap-table2-overlay'; Actually, `react-bootstrap-table-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`: ```js -overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) } +overlay={ + overlayFactory({ + spinner: true, + styles: { + overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'}) + } + }) +} ``` ### caption - [String | Node] @@ -334,4 +341,4 @@ handleDataChange = ({ dataSize }) => { onDataSizeChange={ handleDataChange } .... /> -``` \ No newline at end of file +``` diff --git a/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js b/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js index efd296c..13ce1b1 100644 --- a/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js +++ b/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js @@ -36,7 +36,7 @@ const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, tot columns={ columns } pagination={ paginationFactory({ page, sizePerPage, totalSize }) } onTableChange={ onTableChange } - overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) } + overlay={ overlayFactory({ spinner: true, styles: { overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'}) } }) } /> { sourceCode } @@ -101,7 +101,12 @@ const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, tot columns={ columns } pagination={ paginationFactory({ page, sizePerPage, totalSize }) } onTableChange={ onTableChange } - overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) } + overlay={ + overlayFactory({ + spinner: true, + styles: { overlay: base => ({ ...base, background: 'rgba(255, 0, 0, 0.5)' }) } + }) + } /> { sourceCode } From 92f14491777688d9b6b8d2ce76fcb28e40f53f08 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 13 Jul 2019 15:27:55 +0800 Subject: [PATCH 2/6] fix #1004 --- docs/columns.md | 5 + .../src/context.js | 7 +- .../cell-edit/cell-edit-with-data-type.js | 123 ++++++++++++++++++ .../src/utils/common.js | 3 +- .../stories/index.js | 4 +- packages/react-bootstrap-table2/src/const.js | 6 +- .../react-bootstrap-table2/src/header-cell.js | 6 + .../src/store/operators.js | 4 +- .../react-bootstrap-table2/src/store/type.js | 18 +++ 9 files changed, 169 insertions(+), 7 deletions(-) create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js create mode 100644 packages/react-bootstrap-table2/src/store/type.js diff --git a/docs/columns.md b/docs/columns.md index 55a4003..906536e 100644 --- a/docs/columns.md +++ b/docs/columns.md @@ -11,6 +11,7 @@ Available properties in a column object: * [hidden](#hidden) * [formatter](#formatter) * [formatExtraData](#formatExtraData) +* [type](#type) * [sort](#sort) * [sortFunc](#sortFunc) * [sortCaret](#sortCaret) @@ -132,6 +133,10 @@ The third argument: `components` have following specified properties: ## column.formatExtraData - [Any] It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function. +## column.type - [String] +Specify the data type on column. Available value so far is `string`, `number`, `bool` and `date`. Default is `string`. +`column.type` can be used when you enable the cell editing and want to save your cell data with correct data type. + ## column.sort - [Bool] Enable the column sort via a `true` value given. 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-example/examples/cell-edit/cell-edit-with-data-type.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js new file mode 100644 index 0000000..28a064b --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js @@ -0,0 +1,123 @@ +/* eslint prefer-template: 0 */ +import React from 'react'; +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; +import Code from 'components/common/code-block'; +import { stockGenerator } from 'utils/common'; + +const products = stockGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Stock ID' +}, { + dataField: 'name', + text: 'Stock Name' +}, { + dataField: 'price', + text: 'Price', + type: 'number' +}, { + dataField: 'visible', + text: 'Visible?', + type: 'bool', + editor: { + type: Type.CHECKBOX, + value: 'true:false' + } +}, { + dataField: 'inStockDate', + text: 'Stock Date', + type: 'date', + formatter: (cell) => { + let dateObj = cell; + if (typeof cell !== 'object') { + dateObj = new Date(cell); + } + return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`; + }, + editor: { + type: Type.DATE + } +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory from 'react-bootstrap-table2-editor'; + +const columns = [{ + dataField: 'id', + text: 'Stock ID' +}, { + dataField: 'name', + text: 'Stock Name' +}, { + dataField: 'price', + text: 'Price', + type: 'number' +}, { + dataField: 'visible', + text: 'Visible?', + type: 'bool', + editor: { + type: Type.CHECKBOX, + value: 'true:false' + } +}, { + dataField: 'inStockDate', + text: 'Stock Date', + type: 'date', + formatter: (cell) => { + let dateObj = cell; + if (typeof cell !== 'object') { + dateObj = new Date(cell); + } + return \`$\{('0' + dateObj.getUTCDate()).slice(-2)}/$\{('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/$\{dateObj.getUTCFullYear()}\`; + }, + editor: { + type: Type.DATE + } +}]; + +function afterSaveCell(oldValue, newValue) { + console.log('--after save cell--'); + console.log('New Value was apply as'); + console.log(newValue); + console.log(\`and the type is $\{typeof newValue}\`); +} + + +`; + +function afterSaveCell(oldValue, newValue) { + console.log('--after save cell--'); + console.log('New Value was apply as'); + console.log(newValue); + console.log(`and the type is ${typeof newValue}`); +} + +export default () => ( +
+

Save Cell Value with Specified Data Type

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js index beea31b..f6baec2 100644 --- a/packages/react-bootstrap-table2-example/src/utils/common.js +++ b/packages/react-bootstrap-table2-example/src/utils/common.js @@ -69,8 +69,9 @@ const endDate = new Date(); export const stockGenerator = (quantity = 5) => Array.from({ length: quantity }, (value, index) => ({ id: index, - name: `Todo item ${index}`, + name: `Stock Name ${index}`, price: Math.floor((Math.random() * 2) + 1), + visible: Math.random() > 0.5, inStockDate: new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())) })); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 732c5b2..2add873 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -131,6 +131,7 @@ import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table'; import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table'; import DateEditorTable from 'examples/cell-edit/date-editor-table'; import CustomEditorTable from 'examples/cell-edit/custom-editor-table'; +import CellEditorWithDataType from 'examples/cell-edit/cell-edit-with-data-type'; // work on row selection import SingleSelectionTable from 'examples/row-selection/single-selection'; @@ -377,7 +378,8 @@ storiesOf('Cell Editing', module) .add('Textarea Editor', () => ) .add('Checkbox Editor', () => ) .add('Date Editor', () => ) - .add('Custom Editor', () => ); + .add('Custom Editor', () => ) + .add('Cell Editor with Data Type', () => ); storiesOf('Row Selection', module) .addDecorator(bootstrapStyle()) diff --git a/packages/react-bootstrap-table2/src/const.js b/packages/react-bootstrap-table2/src/const.js index ce1b7e4..9852215 100644 --- a/packages/react-bootstrap-table2/src/const.js +++ b/packages/react-bootstrap-table2/src/const.js @@ -8,5 +8,9 @@ export default { CHECKBOX_STATUS_INDETERMINATE: 'indeterminate', CHECKBOX_STATUS_UNCHECKED: 'unchecked', INDICATOR_POSITION_LEFT: 'left', - INDICATOR_POSITION_RIGHT: 'right' + INDICATOR_POSITION_RIGHT: 'right', + TYPE_STRING: 'string', + TYPE_NUMBER: 'number', + TYPE_BOOLEAN: 'bool', + TYPE_DATE: 'date' }; diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index 708800b..3321507 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -117,6 +117,12 @@ HeaderCell.propTypes = { column: PropTypes.shape({ dataField: PropTypes.string.isRequired, text: PropTypes.string.isRequired, + type: PropTypes.oneOf([ + Const.TYPE_STRING, + Const.TYPE_NUMBER, + Const.TYPE_BOOLEAN, + Const.TYPE_DATE + ]), isDummyField: PropTypes.bool, hidden: PropTypes.bool, headerFormatter: PropTypes.func, diff --git a/packages/react-bootstrap-table2/src/store/operators.js b/packages/react-bootstrap-table2/src/store/operators.js index de055ee..b357006 100644 --- a/packages/react-bootstrap-table2/src/store/operators.js +++ b/packages/react-bootstrap-table2/src/store/operators.js @@ -3,11 +3,13 @@ import * as selection from './selection'; import * as expand from './expand'; import * as mutate from './mutate'; import * as sort from './sort'; +import * as type from './type'; export default { ...rows, ...selection, ...expand, ...mutate, - ...sort + ...sort, + ...type }; diff --git a/packages/react-bootstrap-table2/src/store/type.js b/packages/react-bootstrap-table2/src/store/type.js new file mode 100644 index 0000000..b5084e6 --- /dev/null +++ b/packages/react-bootstrap-table2/src/store/type.js @@ -0,0 +1,18 @@ +import Const from '../const'; + +export const typeConvert = (type, value) => { + if (!type || type === Const.TYPE_STRING) { + return String(value); + } else if (type === Const.TYPE_NUMBER) { + return Number(value); + } else if (type === Const.TYPE_BOOLEAN) { + if (typeof value === 'boolean') { + return value; + } + return value === 'true'; + } else if (type === Const.TYPE_DATE) { + return new Date(value); + } + return value; +}; + From ec4864da5c6807ba59abe640b0b12a432b3c5784 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 13 Jul 2019 16:28:48 +0800 Subject: [PATCH 3/6] fix #993 --- docs/row-expand.md | 22 ++++ .../row-expand/parent-row-classname.js | 106 ++++++++++++++++++ .../stories/index.js | 4 +- .../stories/stylesheet/row-expand/_index.scss | 7 ++ .../stories/stylesheet/storybook.scss | 1 + .../src/bootstrap-table.js | 3 +- .../src/row-expand/row-consumer.js | 9 ++ 7 files changed, 150 insertions(+), 2 deletions(-) create mode 100644 packages/react-bootstrap-table2-example/examples/row-expand/parent-row-classname.js create mode 100644 packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss diff --git a/docs/row-expand.md b/docs/row-expand.md index 08198fa..b448a8f 100644 --- a/docs/row-expand.md +++ b/docs/row-expand.md @@ -18,6 +18,7 @@ * [expandColumnPosition](#expandColumnPosition) * [expandColumnRenderer](#expandColumnRenderer) * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer) +* [parentClassName](#parentClassName) ### expandRow.renderer - [Function] @@ -165,3 +166,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/packages/react-bootstrap-table2-example/examples/row-expand/parent-row-classname.js b/packages/react-bootstrap-table2-example/examples/row-expand/parent-row-classname.js new file mode 100644 index 0000000..d384c37 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-expand/parent-row-classname.js @@ -0,0 +1,106 @@ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import Code from 'components/common/code-block'; +import { productsExpandRowsGenerator } from 'utils/common'; + +const products = productsExpandRowsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const expandRow1 = { + parentClassName: 'parent-expand-foo', + renderer: row => ( +
+

{ `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

+
+ ) +}; + +const expandRow2 = { + parentClassName: (isExpanded, row, rowIndex) => { + if (rowIndex > 2) return 'parent-expand-foo'; + return 'parent-expand-bar'; + }, + renderer: row => ( +
+

{ `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

+
+ ) +}; + + +const sourceCode1 = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = // omit... + +const expandRow = { + parentClassName: 'parent-expand-foo', + renderer: row => ( +
.....
+ ) +}; + + +`; + +const sourceCode2 = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = // omit... + +const expandRow = { + parentClassName: (isExpanded, row, rowIndex) => { + if (rowIndex > 2) return 'parent-expand-foo'; + return 'parent-expand-bar'; + }, + renderer: row => ( +
...
+ ) +}; + + +`; + +export default () => ( +
+ + { sourceCode1 } + + { sourceCode2 } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 2add873..848458f 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -165,6 +165,7 @@ import ExpandOnlyOne from 'examples/row-expand/expand-only-one'; import CustomExpandColumn from 'examples/row-expand/custom-expand-column'; import ExpandColumnPosition from 'examples/row-expand/expand-column-position'; import ExpandHooks from 'examples/row-expand/expand-hooks'; +import ParentRowClassName from 'examples/row-expand/parent-row-classname'; // pagination import PaginationTable from 'examples/pagination'; @@ -414,7 +415,8 @@ storiesOf('Row Expand', module) .add('Expand Only One Row at The Same Time', () => ) .add('Custom Expand Indicator', () => ) .add('Expand Column Position', () => ) - .add('Expand Hooks', () => ); + .add('Expand Hooks', () => ) + .add('Custom Parent Row ClassName', () => ); storiesOf('Pagination', module) .addDecorator(bootstrapStyle()) diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss new file mode 100644 index 0000000..0693da3 --- /dev/null +++ b/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss @@ -0,0 +1,7 @@ +.parent-expand-foo { + background-color: coral; +} + +.parent-expand-bar { + background-color: aqua; +} \ No newline at end of file diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss index 14959a6..435b846 100644 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss +++ b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss @@ -12,3 +12,4 @@ @import "sort/index"; @import "search/index"; @import "loading-overlay/index"; +@import "row-expand/index"; \ No newline at end of file diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index b708874..b2ac582 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -189,7 +189,8 @@ BootstrapTable.propTypes = { expandColumnPosition: PropTypes.oneOf([ Const.INDICATOR_POSITION_LEFT, Const.INDICATOR_POSITION_RIGHT - ]) + ]), + parentClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]) }), rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), rowEvents: PropTypes.object, diff --git a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js index e0decc4..47dffbc 100644 --- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js +++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js @@ -1,16 +1,24 @@ /* eslint react/prop-types: 0 */ import React from 'react'; +import cs from 'classnames'; import ExpandRow from './expand-row'; import _ from '../utils'; import ExpansionContext from '../contexts/row-expand-context'; export default (Component) => { const renderWithExpansion = (props, expandRow) => { + let parentClassName = ''; const key = props.value; const expanded = _.contains(expandRow.expanded, key); const isClosing = _.contains(expandRow.isClosing, key); const expandable = !expandRow.nonExpandable || !_.contains(expandRow.nonExpandable, key); + if (expanded) { + parentClassName = _.isFunction(expandRow.parentClassName) ? + expandRow.parentClassName(expanded, props.row, props.rowIndex) : + (expandRow.parentClassName || ''); + } + return [ { expanded={ expanded } expandable={ expandable } expandRow={ { ...expandRow } } + className={ cs(props.className, parentClassName) } />, expanded || isClosing ? Date: Sun, 21 Jul 2019 16:07:26 +0800 Subject: [PATCH 4/6] fix #1007 --- .../column-filter/custom-filter-logic.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js index 906d9d0..540c38b 100644 --- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js +++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js @@ -12,8 +12,12 @@ import BootstrapTable from 'react-bootstrap-table-next'; import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; class Table extends React.Component { - filterByPrice = filterVal => - products.filter(product => product.price == filterVal); + filterByPrice = (filterVal) => { + if (filterVal) { + return products.filter(product => product.price == filterVal); + } + return products; + } render() { const columns = [{ @@ -46,8 +50,12 @@ class Table extends React.Component { `; export default class Table extends React.Component { - filterByPrice = filterVal => - products.filter(product => product.price == filterVal); + filterByPrice = (filterVal) => { + if (filterVal) { + return products.filter(product => product.price == filterVal); + } + return products; + } render() { const columns = [{ @@ -67,7 +75,7 @@ export default class Table extends React.Component { return (
-

Implement a eq filter on product price column

+

Implement Custom Filter

Date: Sun, 21 Jul 2019 16:45:11 +0800 Subject: [PATCH 5/6] fix #1014 --- packages/react-bootstrap-table2/src/row/aggregate-row.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-bootstrap-table2/src/row/aggregate-row.js b/packages/react-bootstrap-table2/src/row/aggregate-row.js index f0d9187..613bb77 100644 --- a/packages/react-bootstrap-table2/src/row/aggregate-row.js +++ b/packages/react-bootstrap-table2/src/row/aggregate-row.js @@ -35,6 +35,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co this.props.expanded !== nextProps.expanded || this.props.expandable !== nextProps.expandable || this.props.selectable !== nextProps.selectable || + this.props.selectRow.hideSelectColumn !== nextProps.selectRow.hideSelectColumn || this.shouldUpdatedBySelfProps(nextProps) ) { this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps); From db22bb9adbbd965c9f060f8e6f77d5fb2591f362 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 21 Jul 2019 16:52:28 +0800 Subject: [PATCH 6/6] fix #1015 --- docs/row-expand.md | 3 ++- .../examples/row-expand/index.js | 4 ++-- .../react-bootstrap-table2/src/row-expand/row-consumer.js | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/row-expand.md b/docs/row-expand.md index b448a8f..0110fa1 100644 --- a/docs/row-expand.md +++ b/docs/row-expand.md @@ -26,12 +26,13 @@ Specify the content of expand row, `react-bootstrap-table2` will pass a row obje #### values * **row** +* **rowIndex** #### examples ```js const expandRow = { - renderer: row => ( + renderer: (row, rowIndex) => (

{ `This Expand row is belong to rowKey ${row.id}` }

You can render anything here, also you can add additional data on every row object

diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/index.js b/packages/react-bootstrap-table2-example/examples/row-expand/index.js index 0a08904..eb21023 100644 --- a/packages/react-bootstrap-table2-example/examples/row-expand/index.js +++ b/packages/react-bootstrap-table2-example/examples/row-expand/index.js @@ -18,9 +18,9 @@ const columns = [{ }]; const expandRow = { - renderer: row => ( + renderer: (row, rowIndex) => (
-

{ `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

diff --git a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js index 47dffbc..8f30dc1 100644 --- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js +++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js @@ -34,7 +34,7 @@ export default (Component) => { expanded={ expanded } onClosed={ () => expandRow.onClosed(key) } > - { expandRow.renderer(props.row) } + { expandRow.renderer(props.row, props.rowIndex) } : null ]; };