diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js b/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js index 431db8d..661ef3d 100644 --- a/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js +++ b/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js @@ -71,6 +71,23 @@ const columns = [{ /> `; +const selectRow = { + mode: 'checkbox', + clickToSelect: true +}; + +const expandRow = { + 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

+
+ ), + showExpandColumn: true, + expandColumnPosition: 'right' +}; + export default () => (
( columns={ columns } filter={ filterFactory() } filterPosition="top" + expandRow={ expandRow } + selectRow={ selectRow } /> { sourceCode1 } ( columns={ columns } filter={ filterFactory() } filterPosition="bottom" + expandRow={ expandRow } + selectRow={ selectRow } /> { sourceCode2 }
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index d93252e..a69e396 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -111,6 +111,8 @@ class BootstrapTable extends PropsBaseResolver(Component) { currFilters={ this.props.currFilters } filterPosition={ this.props.filterPosition } onExternalFilter={ this.props.onExternalFilter } + selectRow={ selectRow } + expandRow={ expandRow } /> )} { const { @@ -12,28 +13,33 @@ const Filters = (props) => { currFilters, filterPosition, onExternalFilter, - className + className, + selectRow, + expandRow } = props; - const filterColumns = []; - let showFiltersRow = false; + function renderContent() { + const filterColumns = []; + let showFiltersRow = false; - columns.forEach((column, i) => { - filterColumns.push(); + columns.forEach((column, i) => { + filterColumns.push(); - if (column.filterRenderer || column.filter) { - if (!showFiltersRow) { - showFiltersRow = true; + if (column.filterRenderer || column.filter) { + if (!showFiltersRow) { + showFiltersRow = true; + } } - } - }); + }); + return filterColumns; + } return ( { : 'table-footer-group' } } > - {filterColumns} + ); }; @@ -60,7 +71,9 @@ Filters.propTypes = { ]), currFilters: PropTypes.object, onExternalFilter: PropTypes.func, - className: PropTypes.string + className: PropTypes.string, + selectRow: PropTypes.object, + expandRow: PropTypes.object }; Filters.defaultProps = { diff --git a/packages/react-bootstrap-table2/src/footer.js b/packages/react-bootstrap-table2/src/footer.js index 5cb542d..84040df 100644 --- a/packages/react-bootstrap-table2/src/footer.js +++ b/packages/react-bootstrap-table2/src/footer.js @@ -2,57 +2,41 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Const from './const'; +import RowTemplate from './row/row-template'; import FooterCell from './footer-cell'; import _ from './utils'; const Footer = (props) => { const { data, className, columns, selectRow, expandRow } = props; - const SelectionFooterCellComp = () => ; - const ExpansionFooterCellComp = () => ; - const isRenderFunctionColumnInLeft = ( - position = Const.INDICATOR_POSITION_LEFT - ) => position === Const.INDICATOR_POSITION_LEFT; + function renderContent() { + return columns.map((column, i) => { + if (column.footer === undefined || column.footer === null) { + return false; + } - const childrens = columns.map((column, i) => { - if (column.footer === undefined || column.footer === null) { - return false; - } + const columnData = _.pluck(data, column.dataField); - const columnData = _.pluck(data, column.dataField); - - return ( - - ); - }); - - if (selectRow && selectRow.hideSelectColumn !== true) { - if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) { - childrens.unshift(); - } else { - childrens.push(); - } - } - - if (expandRow.showExpandColumn) { - if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) { - childrens.unshift(); - } else { - childrens.push(); - } + return ( + + ); + }); } return ( - - { childrens } - + ); }; diff --git a/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js index 11fb652..b747c73 100644 --- a/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js +++ b/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js @@ -1,7 +1,13 @@ export default ExtendBase => class ColumnResolver extends ExtendBase { visibleColumnSize(includeSelectColumn = true) { - let columnLen = this.props.columns.filter(c => !c.hidden).length; + let columnLen; + if (this.props.columnToggle && this.props.columnToggle.toggles) { + const columns = this.props.columnToggle.toggles; + columnLen = Object.keys(columns).filter(name => columns[name]).length; + } else { + columnLen = this.props.columns.filter(c => !c.hidden).length; + } if (!includeSelectColumn) return columnLen; if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) { columnLen += 1; diff --git a/packages/react-bootstrap-table2/src/row/row-template.js b/packages/react-bootstrap-table2/src/row/row-template.js new file mode 100644 index 0000000..7aa4683 --- /dev/null +++ b/packages/react-bootstrap-table2/src/row/row-template.js @@ -0,0 +1,48 @@ +/* eslint react/require-default-props: 0 */ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Const from '../const'; + +const RowTemplate = (props) => { + const { + renderContent, + selectRow, + expandRow, + cellEl, + ...rest + } = props; + + const isRenderFunctionColumnInLeft = ( + position = Const.INDICATOR_POSITION_LEFT + ) => position === Const.INDICATOR_POSITION_LEFT; + + const childrens = renderContent() || []; + + if (selectRow && selectRow.hideSelectColumn !== true) { + if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) { + childrens.unshift(React.createElement(cellEl, { key: 'selection' })); + } else { + childrens.push(React.createElement(cellEl, { key: 'selection' })); + } + } + + if (expandRow.showExpandColumn) { + if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) { + childrens.unshift(React.createElement(cellEl, { key: 'expansion' })); + } else { + childrens.push(React.createElement(cellEl, { key: 'expansion' })); + } + } + + return { childrens }; +}; + +RowTemplate.propTypes = { + renderContent: PropTypes.func.isRequired, + cellEl: PropTypes.string.isRequired, + selectRow: PropTypes.object, + expandRow: PropTypes.object +}; + +export default RowTemplate; diff --git a/packages/react-bootstrap-table2/test/footer.test.js b/packages/react-bootstrap-table2/test/footer.test.js index 3812a49..8d651d6 100644 --- a/packages/react-bootstrap-table2/test/footer.test.js +++ b/packages/react-bootstrap-table2/test/footer.test.js @@ -48,7 +48,7 @@ describe('Footer', () => { describe('simplest footer', () => { beforeEach(() => { - wrapper = shallow( + wrapper = render(