close #1005

Author: AllenFang

docs/README.md

@@ -32,6 +32,7 @@
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
 * [filter](#filter)
+* [filterPosition](filterPosition)
 * [onTableChange](#onTableChange)
 * [onDataSizeChange](#onDataSizeChange)
 
@@ -329,6 +330,9 @@ Following is a shape of `newState`
 }
 ```
 
+### <a name='filterPosition'>filterPosition - [String]</a>
+Available value is `inline`, `top` and `bottom`, default is `inline`. This prop decide where `react-bootstrap-table` render column filter.
+
 ### <a name='onDataSizeChange'>onDataSizeChange - [Function]</a>
 This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
 

packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="top"
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="bottom"
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+      filterPosition="top"
+    />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+      filterPosition="bottom"
+    />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js

@@ -8,14 +8,17 @@ const products = productsGenerator(8);
 
 const columns = [{
   dataField: 'id',
-  text: 'Product ID'
+  text: 'Product ID',
+  footer: 'hello'
 }, {
   dataField: 'name',
   text: 'Product Name',
+  footer: 'hello',
   filter: textFilter()
 }, {
   dataField: 'price',
   text: 'Product Price',
+  footer: 'hello',
   filter: textFilter()
 }];
 
@@ -39,13 +42,20 @@ const columns = [{
 <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
 `;
 
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
 export default () => (
   <div>
     <BootstrapTable
       keyField="id"
       data={ products }
       columns={ columns }
       filter={ filterFactory() }
+      filterPosition="bottom"
+      selectRow={ selectRow }
     />
     <Code>{ sourceCode }</Code>
   </div>

packages/react-bootstrap-table2-example/stories/index.js

@@ -92,6 +92,7 @@ import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
 import ClearAllFilters from 'examples/column-filter/clear-all-filters';
 import FilterHooks from 'examples/column-filter/filter-hooks';
 import CustomFilterLogic from 'examples/column-filter/custom-filter-logic';
+import FilterPosition from 'examples/column-filter/filter-position';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -314,6 +315,7 @@ storiesOf('Column Filter', module)
   .add('Number Filter with Default Value', () => <NumberFilterWithDefaultValue />)
   .add('Date Filter', () => <DateFilter />)
   .add('Date Filter with Default Value', () => <DateFilterWithDefaultValue />)
+  .add('Filter Position', () => <FilterPosition />)
   .add('Custom Text Filter', () => <CustomTextFilter />)
   .add('Custom Select Filter', () => <CustomSelectFilter />)
   .add('Custom Number Filter', () => <CustomNumberFilter />)

packages/react-bootstrap-table2-filter/README.md

@@ -330,3 +330,29 @@ Following properties is valid in `FILTER_TYPES`:
 * NUMBER
 * DATE
 * MULTISELECT
+
+### Position
+Default filter is rendered inside the table column header, but you can choose to render them as a row by `filterPosition`:
+
+#### Render in the top of table body
+
+```js
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="top"
+/>
+```
+
+#### Render in the bottom of table body
+```js
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="bottom"
+/>
+```

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -66,7 +66,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       rowEvents,
       selectRow,
       expandRow,
-      cellEdit
+      cellEdit,
+      filterPosition
     } = this.props;
 
     const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
@@ -94,17 +95,21 @@ 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 }
+            filterPosition={ filterPosition }
           />
-          {hasFilters && (
+          {hasFilters && filterPosition !== Const.FILTERS_POSITION_INLINE && (
             <Filters
               columns={ columns }
               className={ this.props.filtersClasses }
               onSort={ this.props.onSort }
               onFilter={ this.props.onFilter }
               currFilters={ this.props.currFilters }
-              position={ this.props.filtersPosition }
+              filterPosition={ this.props.filterPosition }
               onExternalFilter={ this.props.onExternalFilter }
             />
           )}
@@ -211,8 +216,9 @@ BootstrapTable.propTypes = {
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   headerClasses: PropTypes.string,
   filtersClasses: PropTypes.string,
-  filtersPosition: PropTypes.oneOf([
+  filterPosition: PropTypes.oneOf([
     Const.FILTERS_POSITION_TOP,
+    Const.FILTERS_POSITION_INLINE,
     Const.FILTERS_POSITION_BOTTOM
   ]),
   footerClasses: PropTypes.string,
@@ -256,7 +262,8 @@ BootstrapTable.defaultProps = {
   cellEdit: {
     mode: null,
     nonEditableRows: []
-  }
+  },
+  filterPosition: Const.FILTERS_POSITION_INLINE
 };
 
 export default BootstrapTable;

packages/react-bootstrap-table2/src/const.js

@@ -13,6 +13,7 @@ export default {
   TYPE_NUMBER: 'number',
   TYPE_BOOLEAN: 'bool',
   TYPE_DATE: 'date',
+  FILTERS_POSITION_INLINE: 'inline',
   FILTERS_POSITION_TOP: 'top',
   FILTERS_POSITION_BOTTOM: 'bottom'
 };

packages/react-bootstrap-table2/src/filters.js

@@ -10,7 +10,7 @@ const Filters = (props) => {
     columns,
     onFilter,
     currFilters,
-    position,
+    filterPosition,
     onExternalFilter,
     className
   } = props;
@@ -35,25 +35,26 @@ const Filters = (props) => {
   });
 
   return (
-    <tfoot
+    <tbody
       className={ className }
       style={ {
         display:
-          position === Const.FILTERS_POSITION_TOP
-            ? 'table-header-group'
-            : 'table-footer-group'
+        filterPosition === Const.FILTERS_POSITION_TOP
+          ? 'table-header-group'
+          : 'table-footer-group'
       } }
     >
       <tr>{filterColumns}</tr>
-    </tfoot>
+    </tbody>
   );
 };
 
 Filters.propTypes = {
   columns: PropTypes.array.isRequired,
   onFilter: PropTypes.func,
-  position: PropTypes.oneOf([
+  filterPosition: PropTypes.oneOf([
     Const.FILTERS_POSITION_TOP,
+    Const.FILTERS_POSITION_INLINE,
     Const.FILTERS_POSITION_BOTTOM
   ]),
   currFilters: PropTypes.object,

packages/react-bootstrap-table2/src/header-cell.js

@@ -21,6 +21,7 @@ class HeaderCell extends eventDelegater(React.Component) {
       isLastSorting,
       onFilter,
       currFilters,
+      filterPosition,
       onExternalFilter
     } = this.props;
 
@@ -104,18 +105,20 @@ class HeaderCell extends eventDelegater(React.Component) {
     if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
     if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
 
-    if (filterRenderer) {
-      const onCustomFilter = onExternalFilter(column, filter.props.type);
-      filterElm = filterRenderer(onCustomFilter, column);
-    } else if (filter) {
-      filterElm = (
-        <filter.Filter
-          { ...filter.props }
-          filterState={ currFilters[column.dataField] }
-          onFilter={ onFilter }
-          column={ column }
-        />
-      );
+    if (filterPosition === Const.FILTERS_POSITION_INLINE) {
+      if (filterRenderer) {
+        const onCustomFilter = onExternalFilter(column, filter.props.type);
+        filterElm = filterRenderer(onCustomFilter, column);
+      } else if (filter) {
+        filterElm = (
+          <filter.Filter
+            { ...filter.props }
+            filterState={ currFilters[column.dataField] }
+            onFilter={ onFilter }
+            column={ column }
+          />
+        );
+      }
     }
 
     const children = headerFormatter ?
@@ -180,6 +183,8 @@ HeaderCell.propTypes = {
   sortCaret: PropTypes.func,
   isLastSorting: PropTypes.bool,
   onFilter: PropTypes.func,
+  filterPosition: PropTypes.oneOf([Const.FILTERS_POSITION_INLINE,
+    Const.FILTERS_POSITION_BOTTOM, Const.FILTERS_POSITION_TOP]),
   currFilters: PropTypes.object,
   onExternalFilter: PropTypes.func
 };