diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js index 2efa49253..3b44b87ad 100644 --- a/src/BootstrapTable.js +++ b/src/BootstrapTable.js @@ -300,6 +300,21 @@ class BootstrapTable extends React.Component { } } + handleShowOnlySelected() { + this.store.ignoreNonSelected(); + let result; + if (this.props.pagination) { + let sizePerPage = this.refs.pagination.getSizePerPage(); + result = this.store.page(1, sizePerPage).get(); + this.refs.pagination.changePage(1); + } else { + result = this.store.get(); + } + this.setState({ + data: result + }); + } + handleSelectRow(row, isSelected) { let currSelected = this.store.getSelectedRowKeys(); let rowKey = row[this.store.getKeyField()]; @@ -516,28 +531,33 @@ class BootstrapTable extends React.Component { } renderToolBar() { - let columns; - if (Array.isArray(this.props.children)) { - columns = this.props.children.map(function (column) { - var props = column.props; - return { - name: props.children, - field: props.dataField, - //when you want same auto generate value and not allow edit, example ID field - autoValue: props.autoValue || false, - //for create eidtor, no params for column.editable() indicate that editor for new row - editable: props.editable && (typeof props.editable === "function") ? props.editable() : props.editable, - format: props.format ? format : false - }; - }); - } else { - columns = [{ - name: this.props.children.props.children, - field: this.props.children.props.dataField, - editable: this.props.children.props.editable - }]; - } - if (this.props.insertRow || this.props.deleteRow || this.props.search || this.props.exportCSV) { + let enableShowOnlySelected = this.props.selectRow && this.props.selectRow.showOnlySelected; + if (enableShowOnlySelected + || this.props.insertRow + || this.props.deleteRow + || this.props.search + || this.props.exportCSV) { + let columns; + if (Array.isArray(this.props.children)) { + columns = this.props.children.map(function (column) { + var props = column.props; + return { + name: props.children, + field: props.dataField, + //when you want same auto generate value and not allow edit, example ID field + autoValue: props.autoValue || false, + //for create eidtor, no params for column.editable() indicate that editor for new row + editable: props.editable && (typeof props.editable === "function") ? props.editable() : props.editable, + format: props.format ? format : false + }; + }); + } else { + columns = [{ + name: this.props.children.props.children, + field: this.props.children.props.dataField, + editable: this.props.children.props.editable + }]; + } return (
) @@ -608,7 +630,8 @@ BootstrapTable.propTypes = { onSelectAll: React.PropTypes.func, clickToSelect: React.PropTypes.bool, hideSelectColumn: React.PropTypes.bool, - clickToSelectAndEditCell: React.PropTypes.bool + clickToSelectAndEditCell: React.PropTypes.bool, + showOnlySelected: React.PropTypes.bool }), cellEdit: React.PropTypes.shape({ mode: React.PropTypes.string, @@ -662,7 +685,8 @@ BootstrapTable.defaultProps = { onSelectAll: undefined, clickToSelect: false, hideSelectColumn: false, - clickToSelectAndEditCell: false + clickToSelectAndEditCell: false, + showOnlySelected: false }, cellEdit: { mode: Const.CELL_EDIT_NONE, diff --git a/src/Const.js b/src/Const.js index ea8935162..3f9aa1b02 100644 --- a/src/Const.js +++ b/src/Const.js @@ -15,5 +15,7 @@ export default { CELL_EDIT_DBCLICK: "dbclick", SIZE_PER_PAGE_LIST: [10, 25, 30, 50], PAGINATION_SIZE: 5, - NO_DATA_TEXT: "There is no data to display" + NO_DATA_TEXT: "There is no data to display", + SHOW_ONLY_SELECT: "Show Selected Only", + SHOW_ALL: "Show All", } diff --git a/src/store/TableDataStore.js b/src/store/TableDataStore.js index 70447ccc7..622cf7aa3 100644 --- a/src/store/TableDataStore.js +++ b/src/store/TableDataStore.js @@ -50,6 +50,7 @@ export class TableDataStore { this.pageObj = {}; this.selected = []; this.multiColumnSearch = false; + this.showOnlySelected = false; this.remote = false; // remote data } @@ -85,6 +86,19 @@ export class TableDataStore { else return this.data; } + ignoreNonSelected() { + this.showOnlySelected = !this.showOnlySelected; + if(this.showOnlySelected){ + this.isOnFilter = true; + this.filteredData = this.data.filter( row => { + let result = this.selected.find(x => row[this.keyField] === x) + return typeof result !== 'undefined' ? true : false; + }); + } else { + this.isOnFilter = false; + } + } + sort(order, sortField) { this.sortObj = { order: order, diff --git a/src/toolbar/ToolBar.js b/src/toolbar/ToolBar.js index 623a1b81f..1f9c80af0 100644 --- a/src/toolbar/ToolBar.js +++ b/src/toolbar/ToolBar.js @@ -12,7 +12,8 @@ class ToolBar extends React.Component{ this.state = { isInsertRowTrigger: true, validateState:null, - shakeEditor:false + shakeEditor:false, + showSelected: false }; } componentWillUnmount(){ @@ -91,6 +92,13 @@ class ToolBar extends React.Component{ } } + handleShowOnlyToggle = e => { + this.setState({ + showSelected: !this.state.showSelected + }); + this.props.onShowOnlySelected(); + } + handleDropRowBtnClick(e){ this.props.onDropRow(); } @@ -122,6 +130,12 @@ class ToolBar extends React.Component{
:null; + + var showSelectedOnlyBtn = this.props.enableShowOnlySelected? + :null; + var modal = this.props.enableInsert?this.renderInsertRowModal(modalClassName):null; var warningStyle = { display: "none", @@ -139,6 +153,7 @@ class ToolBar extends React.Component{ {exportCSV} {insertBtn} {deleteBtn} + {showSelectedOnlyBtn}
@@ -205,9 +220,11 @@ class ToolBar extends React.Component{ ToolBar.propTypes = { onAddRow: React.PropTypes.func, onDropRow: React.PropTypes.func, + onShowOnlySelected: React.PropTypes.func, enableInsert: React.PropTypes.bool, enableDelete: React.PropTypes.bool, enableSearch: React.PropTypes.bool, + enableShowOnlySelected: React.PropTypes.bool, columns: React.PropTypes.array, searchPlaceholder: React.PropTypes.string }; @@ -215,6 +232,7 @@ ToolBar.propTypes = { ToolBar.defaultProps = { enableInsert: false, enableDelete: false, - enableSearch: false + enableSearch: false, + enableShowOnlySelected: false } export default ToolBar;