diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 06c225b..efe1f2f 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; import cs from 'classnames'; import Header from './header'; +import Filters from './filters'; import Caption from './caption'; import Body from './body'; import Footer from './footer'; @@ -77,6 +78,8 @@ class BootstrapTable extends PropsBaseResolver(Component) { [bootstrap4 ? 'table-sm' : 'table-condensed']: condensed }, classes); + const hasFilters = columns.some(col => col.filter || col.filterRenderer); + const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0; const tableCaption = (caption && { caption }); @@ -91,12 +94,20 @@ class BootstrapTable extends PropsBaseResolver(Component) { sortField={ this.props.sortField } sortOrder={ this.props.sortOrder } onSort={ this.props.onSort } - onFilter={ this.props.onFilter } - currFilters={ this.props.currFilters } - onExternalFilter={ this.props.onExternalFilter } selectRow={ selectRow } expandRow={ expandRow } /> + {hasFilters && ( + + )} { + const { index, column, onExternalFilter, currFilters, onFilter } = props; + const { filterRenderer, filter } = column; + let filterElm; + const cellAttrs = {}; + const cellStyle = {}; + cellAttrs.style = cellStyle; + if (column.headerAlign) { + cellStyle.textAlign = _.isFunction(column.headerAlign) + ? column.headerAlign(column, index) + : column.headerAlign; + } + if (column.filterRenderer) { + const onCustomFilter = onExternalFilter(column, filter.props.type); + filterElm = filterRenderer(onCustomFilter, column); + } else if (filter) { + filterElm = ( + + ); + } + return React.createElement('th', cellAttrs, filterElm); +}; + +FiltersCell.propTypes = { + index: PropTypes.number.isRequired, + column: PropTypes.object, + onFilter: PropTypes.func, + currFilters: PropTypes.object, + onExternalFilter: PropTypes.func +}; + +export default FiltersCell; diff --git a/packages/react-bootstrap-table2/src/filters.js b/packages/react-bootstrap-table2/src/filters.js new file mode 100644 index 0000000..5be6342 --- /dev/null +++ b/packages/react-bootstrap-table2/src/filters.js @@ -0,0 +1,68 @@ +/* eslint react/require-default-props: 0 */ +import React from 'react'; +import PropTypes from 'prop-types'; + +import FiltersCell from './filters-cell'; +import Const from './const'; + +const Filters = (props) => { + const { + columns, + onFilter, + currFilters, + position, + onExternalFilter, + className + } = props; + + const filterColumns = []; + let showFiltersRow = false; + + columns.forEach((column, i) => { + filterColumns.push(); + + if (column.filterRenderer || column.filter) { + if (!showFiltersRow) { + showFiltersRow = true; + } + } + }); + + return ( + + {filterColumns} + + ); +}; + +Filters.propTypes = { + columns: PropTypes.array.isRequired, + onFilter: PropTypes.func, + position: PropTypes.oneOf([ + Const.FILTERS_POSITION_TOP, + Const.FILTERS_POSITION_BOTTOM + ]), + currFilters: PropTypes.object, + onExternalFilter: PropTypes.func, + className: PropTypes.string +}; + +Filters.defaultProps = { + position: Const.FILTERS_POSITION_TOP +}; + +export default Filters; diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js index 4360b2c..a8f31b1 100644 --- a/packages/react-bootstrap-table2/src/header.js +++ b/packages/react-bootstrap-table2/src/header.js @@ -14,12 +14,9 @@ const Header = (props) => { className, columns, onSort, - onFilter, sortField, sortOrder, selectRow, - currFilters, - onExternalFilter, expandRow } = props; @@ -50,9 +47,6 @@ const Header = (props) => { column={ column } onSort={ onSort } sorting={ currSort } - onFilter={ onFilter } - currFilters={ currFilters } - onExternalFilter={ onExternalFilter } sortOrder={ sortOrder } isLastSorting={ isLastSorting } />); @@ -87,12 +81,9 @@ const Header = (props) => { Header.propTypes = { columns: PropTypes.array.isRequired, onSort: PropTypes.func, - onFilter: PropTypes.func, sortField: PropTypes.string, sortOrder: PropTypes.string, selectRow: PropTypes.object, - currFilters: PropTypes.object, - onExternalFilter: PropTypes.func, className: PropTypes.string, expandRow: PropTypes.object }; diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js index fa3861d..c7ea736 100644 --- a/packages/react-bootstrap-table2/test/header-cell.test.js +++ b/packages/react-bootstrap-table2/test/header-cell.test.js @@ -148,7 +148,7 @@ describe('HeaderCell', () => { it('should call custom headerFormatter correctly', () => { expect(formatter.callCount).toBe(1); expect(formatter.calledWith( - column, index, { sortElement: undefined, filterElement: undefined })).toBe(true); + column, index, { sortElement: undefined })).toBe(true); }); }); @@ -738,14 +738,14 @@ describe('HeaderCell', () => { expect(wrapper.find('th').length).toBe(1); }); - it('should render filter correctly', () => { - expect(wrapper.find(Filter).length).toBe(1); - expect(wrapper.find(Filter).props()).toEqual({ - column, - onFilter, - ...filterProps - }); - }); + // it('should render filter correctly', () => { + // expect(wrapper.find(Filter).length).toBe(1); + // expect(wrapper.find(Filter).props()).toEqual({ + // column, + // onFilter, + // ...filterProps + // }); + // }); }); describe('when column.filter and column.filterRenderer is defined', () => { @@ -775,12 +775,12 @@ describe('HeaderCell', () => { expect(wrapper.find('th').length).toBe(1); }); - it('should render filter correctly', () => { - expect(wrapper.find(Filter).length).toBe(1); - }); - - it('should call filterRenderer function correctly', () => { - expect(filterRenderer).toHaveBeenCalledTimes(1); - }); + // it('should render filter correctly', () => { + // expect(wrapper.find(Filter).length).toBe(1); + // }); + // + // it('should call filterRenderer function correctly', () => { + // expect(filterRenderer).toHaveBeenCalledTimes(1); + // }); }); });