diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index ca7000c..19e7afa 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -86,6 +86,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
sortField={ store.sortField }
sortOrder={ store.sortOrder }
onSort={ this.props.onSort }
+ onFilter={ this.props.onFilter }
selectRow={ headerCellSelectionInfo }
/>
});
} else if (this.props.selectRow) {
return wrapWithSelection(baseProps);
+ } else if (this.props.filter) {
+ return wrapWithFilter(baseProps);
} else if (this.props.columns.filter(col => col.sort).length > 0) {
return wrapWithSort(baseProps);
} else if (this.props.pagination) {
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index fb57ade..d72f35b 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -16,12 +16,14 @@ const HeaderCell = (props) => {
onSort,
sorting,
sortOrder,
- isLastSorting
+ isLastSorting,
+ onFilter
} = props;
const {
text,
sort,
+ filter,
hidden,
headerTitle,
headerAlign,
@@ -38,10 +40,13 @@ const HeaderCell = (props) => {
..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
...headerEvents
};
+ // we are suppose to pass sortSymbol and filerElm
+ // the headerFormatter is not only header text but also the all of header cell customization
const children = headerFormatter ? headerFormatter(column, index) : text;
- let cellStyle = {};
let sortSymbol;
+ let filterElm;
+ let cellStyle = {};
let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses;
if (headerStyle) {
@@ -91,12 +96,14 @@ const HeaderCell = (props) => {
}
if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
-
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
+ if (filter) {
+ filterElm = ;
+ }
return (
|
- { children }{ sortSymbol }
+ { children }{ sortSymbol }{ filterElm }
|
);
};
@@ -126,13 +133,15 @@ HeaderCell.propTypes = {
editable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
editCellStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
editCellClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
- validator: PropTypes.func
+ validator: PropTypes.func,
+ filter: PropTypes.object
}).isRequired,
index: PropTypes.number.isRequired,
onSort: PropTypes.func,
sorting: PropTypes.bool,
sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]),
- isLastSorting: PropTypes.bool
+ isLastSorting: PropTypes.bool,
+ onFilter: PropTypes.func
};
export default HeaderCell;
diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js
index da77cb9..ddbc7bf 100644
--- a/packages/react-bootstrap-table2/src/header.js
+++ b/packages/react-bootstrap-table2/src/header.js
@@ -12,6 +12,7 @@ const Header = (props) => {
const {
columns,
onSort,
+ onFilter,
sortField,
sortOrder,
selectRow
@@ -36,6 +37,7 @@ const Header = (props) => {
column={ column }
onSort={ onSort }
sorting={ currSort }
+ onFilter={ onFilter }
sortOrder={ sortOrder }
isLastSorting={ isLastSorting }
/>);
@@ -49,6 +51,7 @@ const Header = (props) => {
Header.propTypes = {
columns: PropTypes.array.isRequired,
onSort: PropTypes.func,
+ onFilter: PropTypes.func,
sortField: PropTypes.string,
sortOrder: PropTypes.string,
selectRow: PropTypes.object
diff --git a/packages/react-bootstrap-table2/src/table-factory.js b/packages/react-bootstrap-table2/src/table-factory.js
index d90453d..90bcf24 100644
--- a/packages/react-bootstrap-table2/src/table-factory.js
+++ b/packages/react-bootstrap-table2/src/table-factory.js
@@ -1,6 +1,7 @@
/* eslint react/prop-types: 0 */
import React from 'react';
+import _ from './utils';
import BootstrapTable from './bootstrap-table';
import SortWrapper from './sort/wrapper';
import RowSelectionWrapper from './row-selection/wrapper';
@@ -19,6 +20,15 @@ export const wrapWithSort = props =>
export const pureTable = props =>
React.createElement(BootstrapTable, { ...props });
+export const wrapWithFilter = (props) => {
+ if (props.filter) {
+ const { wrapper } = props.filter;
+ const FilterBase = wrapper(wrapWithSort, _);
+ return React.createElement(FilterBase, { ...props });
+ }
+ return wrapWithSort(props);
+};
+
export const wrapWithPagination = (props) => {
if (props.pagination) {
const { PaginationWrapper } = props.pagination;
@@ -29,6 +39,6 @@ export const wrapWithPagination = (props) => {
export const sortableElement = props => wrapWithPagination(props);
-export const selectionElement = props => wrapWithSort(props);
+export const selectionElement = props => wrapWithFilter(props);
export const cellEditElement = props => wrapWithSelection(props);