vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

render filter in bootstrap table

Browse Source
This commit is contained in:
AllenFang 2017-12-13 21:45:02 +08:00
parent da907d46f0
commit 861809d10c
5 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/react-bootstrap-table2/src/bootstrap-table.js vendored
View File

@ -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 }
/>
<Body
@ -126,7 +127,7 @@ BootstrapTable.propTypes = {
PropTypes.string
]),
pagination: PropTypes.object,
onSort: PropTypes.func,
filter: PropTypes.object,
cellEdit: PropTypes.shape({
mode: PropTypes.oneOf([Const.CLICK_TO_CELL_EDIT, Const.DBCLICK_TO_CELL_EDIT]).isRequired,
onUpdate: PropTypes.func,
@ -169,8 +170,10 @@ BootstrapTable.propTypes = {
dataField: PropTypes.string.isRequired,
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
})),
overlay: PropTypes.func,
onTableChange: PropTypes.func,
overlay: PropTypes.func
onSort: PropTypes.func,
onFilter: PropTypes.func
};
BootstrapTable.defaultProps = {

3
packages/react-bootstrap-table2/src/container.js vendored
View File

@ -6,6 +6,7 @@ import Store from './store';
import {
wrapWithCellEdit,
wrapWithSelection,
wrapWithFilter,
wrapWithSort,
wrapWithPagination
} from './table-factory';
@ -70,6 +71,8 @@ const withDataStore = Base =>
});
} 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) {

21
packages/react-bootstrap-table2/src/header-cell.js vendored
View File

@ -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 = <filter.Filter { ...filter.props } onFilter={ onFilter } column={ column } />;
}
return (
<th { ...cellAttrs }>
{ children }{ sortSymbol }
{ children }{ sortSymbol }{ filterElm }
</th>
);
};
@ -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;

3
packages/react-bootstrap-table2/src/header.js vendored
View File

@ -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

12
packages/react-bootstrap-table2/src/table-factory.js vendored
View File

@ -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);