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;