diff --git a/docs/columns.md b/docs/columns.md
index 6d77335a5..5636c26ac 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -594,6 +594,7 @@ This prop also accept a function:
 
 * `column`
 * `columnIndex`
+* `props`: It's an object and contain `text` property only.
 
 ## <a name='footerClasses'>column.footerClasses - [String | Function]</a>
 It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js b/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js
index 3e2a25bfa..c15f560a8 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js
@@ -1,13 +1,20 @@
 import React from 'react';
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, dateFilter, selectFilter } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
 import { stockGenerator } from 'utils/common';
 
 const products = stockGenerator(8);
 
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
 let nameFilter;
 let priceFilter;
+let qualityFilter;
 let stockDateFilter;
 
 const columns = [{
@@ -19,7 +26,19 @@ const columns = [{
   filter: textFilter({
     getFilter: (filter) => {
       nameFilter = filter;
-    }
+    },
+    onFilter: filterVal => console.log(`Filter product name ${filterVal}`)
+  })
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      qualityFilter = filter;
+    },
+    onFilter: filterVal => console.log(`Filter quality ${filterVal}`)
   })
 }, {
   dataField: 'price',
@@ -27,7 +46,8 @@ const columns = [{
   filter: textFilter({
     getFilter: (filter) => {
       priceFilter = filter;
-    }
+    },
+    onFilter: filterVal => console.log(`Filter Price: ${filterVal}`)
   })
 }, {
   dataField: 'inStockDate',
@@ -36,13 +56,15 @@ const columns = [{
   filter: dateFilter({
     getFilter: (filter) => {
       stockDateFilter = filter;
-    }
+    },
+    onFilter: filterVal => console.log(`Filter date: ${filterVal}`)
   })
 }];
 
 const handleClick = () => {
   nameFilter('');
   priceFilter('');
+  qualityFilter('');
   stockDateFilter();
 };
 
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
index c3789be40..58dc30828 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
@@ -14,7 +14,9 @@ const columns = [{
   dataField: 'name',
   text: 'Product Name',
   footer: 'hello',
-  filter: textFilter()
+  filter: textFilter({
+    id: 'identify'
+  })
 }, {
   dataField: 'price',
   text: 'Product Price',
@@ -54,7 +56,6 @@ export default () => (
       data={ products }
       columns={ columns }
       filter={ filterFactory() }
-      filterPosition="bottom"
       selectRow={ selectRow }
     />
     <Code>{ sourceCode }</Code>
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
index 26fbbc08b..ccd85bfd7 100644
--- a/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
@@ -7,7 +7,7 @@ import { productsGenerator } from 'utils/common';
 
 const products = productsGenerator();
 
-function priceFormatter(column, colIndex) {
+function priceFormatter(column, colIndex, { text }) {
   return (
     <h5>
       <strong>$$ {column.text} $$</strong>
@@ -37,7 +37,7 @@ const columns = [
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 
-function priceFormatter(column, colIndex) {
+function priceFormatter(column, colIndex, { text }) {
   return (
     <h5><strong>$$ { column.text } $$</strong></h5>
   );
diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js
index 5592779d7..131e30877 100644
--- a/packages/react-bootstrap-table2-example/src/utils/common.js
+++ b/packages/react-bootstrap-table2-example/src/utils/common.js
@@ -77,6 +77,7 @@ export const stockGenerator = (quantity = 5) =>
     name: `Stock Name ${index}`,
     price: Math.floor((Math.random() * 2) + 1),
     visible: Math.random() > 0.5,
+    quality: index % 3,
     inStockDate:
       new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
   }));
diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md
index 78720441a..7d83e1fb7 100644
--- a/packages/react-bootstrap-table2-filter/README.md
+++ b/packages/react-bootstrap-table2-filter/README.md
@@ -64,7 +64,8 @@ const priceFilter = textFilter({
   comparator: Comparator.EQ, // default is Comparator.LIKE
   caseSensitive: true, // default is false, and true will only work when comparator is LIKE
   style: { ... }, // your custom styles on input
-  delay: 1000 // how long will trigger filtering after user typing, default is 500 ms
+  delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 });
 
 // omit...
@@ -110,6 +111,7 @@ const qualityFilter = selectFilter({
   comparator: Comparator.LIKE, // default is Comparator.EQ
   style: { ... }, // your custom styles on input
   withoutEmptyOption: true  // hide the default select option
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 });
 
 // omit...
@@ -197,6 +199,7 @@ const qualityFilter = multiSelectFilter({
   comparator: Comparator.LIKE, // default is Comparator.EQ
   style: { ... }, // your custom styles on input
   withoutEmptyOption: true  // hide the default select option
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 });
 
 // omit...
@@ -236,6 +239,7 @@ const numberFilter = numberFilter({
   numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on number input/select
   numberClassName: 'custom-number-class',  // custom the class on ber input/select
   defaultValue: { number: 2103, comparator: Comparator.GT }  // default value
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 })
 
 // omit...
@@ -275,6 +279,7 @@ const dateFilter = dateFilter({
   dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on date input
   dateClassName: 'custom-date-class',  // custom the class on date input
   defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }  // default value
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 })
 
 // omit...
diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index 3d8ff4536..54bb761ea 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -128,8 +128,9 @@ class DateFilter extends Component {
 
   render() {
     const {
+      id,
       placeholder,
-      column: { text },
+      column: { dataField, text },
       style,
       comparatorStyle,
       dateStyle,
@@ -138,6 +139,9 @@ class DateFilter extends Component {
       dateClassName
     } = this.props;
 
+    const comparatorElmId = `date-filter-comparator-${dataField}${id ? `-${id}` : ''}`;
+    const inputElmId = `date-filter-column-${dataField}${id ? `-${id}` : ''}`;
+
     return (
       <div
         onClick={ e => e.stopPropagation() }
@@ -146,12 +150,12 @@ class DateFilter extends Component {
       >
         <label
           className="filter-label"
-          htmlFor={ `date-filter-comparator-${text}` }
+          htmlFor={ comparatorElmId }
         >
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.dateFilterComparator = n }
-            id={ `date-filter-comparator-${text}` }
+            id={ comparatorElmId }
             style={ comparatorStyle }
             className={ `date-filter-comparator form-control ${comparatorClassName}` }
             onChange={ this.onChangeComparator }
@@ -160,11 +164,11 @@ class DateFilter extends Component {
             { this.getComparatorOptions() }
           </select>
         </label>
-        <label htmlFor={ `date-filter-column-${text}` }>
+        <label htmlFor={ inputElmId }>
           <span className="sr-only">Enter ${ text }</span>
           <input
             ref={ n => this.inputDate = n }
-            id={ `date-filter-column-${text}` }
+            id={ inputElmId }
             className={ `filter date-filter-input form-control ${dateClassName}` }
             style={ dateStyle }
             type="date"
@@ -181,6 +185,7 @@ class DateFilter extends Component {
 DateFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  id: PropTypes.string,
   filterState: PropTypes.object,
   delay: PropTypes.number,
   defaultValue: PropTypes.shape({
@@ -232,7 +237,8 @@ DateFilter.defaultProps = {
   comparatorStyle: undefined,
   comparatorClassName: '',
   dateStyle: undefined,
-  dateClassName: ''
+  dateClassName: '',
+  id: null
 };
 
 
diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
index 1d8794ccc..0676dcc74 100644
--- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js
+++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
@@ -112,6 +112,7 @@ class MultiSelectFilter extends Component {
 
   render() {
     const {
+      id,
       style,
       className,
       filterState,
@@ -128,17 +129,18 @@ class MultiSelectFilter extends Component {
 
     const selectClass =
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
+    const elmId = `multiselect-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
 
     return (
       <label
         className="filter-label"
-        htmlFor={ `multiselect-filter-column-${column.text}` }
+        htmlFor={ elmId }
       >
         <span className="sr-only">Filter by {column.text}</span>
         <select
           { ...rest }
           ref={ n => this.selectInput = n }
-          id={ `multiselect-filter-column-${column.text}` }
+          id={ elmId }
           style={ style }
           multiple
           className={ selectClass }
@@ -157,6 +159,7 @@ MultiSelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
   options: PropTypes.object.isRequired,
+  id: PropTypes.string,
   filterState: PropTypes.object,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
@@ -174,7 +177,8 @@ MultiSelectFilter.defaultProps = {
   className: '',
   withoutEmptyOption: false,
   comparator: EQ,
-  caseSensitive: true
+  caseSensitive: true,
+  id: null
 };
 
 export default MultiSelectFilter;
diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 7abea580e..3d04a0ed7 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -170,6 +170,7 @@ class NumberFilter extends Component {
   render() {
     const { isSelected } = this.state;
     const {
+      id,
       column,
       options,
       style,
@@ -188,6 +189,9 @@ class NumberFilter extends Component {
       ${!isSelected ? 'placeholder-selected' : ''}
     `;
 
+    const comparatorElmId = `number-filter-comparator-${column.dataField}${id ? `-${id}` : ''}`;
+    const inputElmId = `number-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
+
     return (
       <div
         onClick={ e => e.stopPropagation() }
@@ -196,13 +200,13 @@ class NumberFilter extends Component {
       >
         <label
           className="filter-label"
-          htmlFor={ `number-filter-comparator-${column.text}` }
+          htmlFor={ comparatorElmId }
         >
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.numberFilterComparator = n }
             style={ comparatorStyle }
-            id={ `number-filter-comparator-${column.text}` }
+            id={ comparatorElmId }
             className={ `number-filter-comparator form-control ${comparatorClassName}` }
             onChange={ this.onChangeComparator }
             defaultValue={ this.getDefaultComparator() }
@@ -214,12 +218,12 @@ class NumberFilter extends Component {
           options ?
             <label
               className="filter-label"
-              htmlFor={ `number-filter-column-${column.text}` }
+              htmlFor={ inputElmId }
             >
               <span className="sr-only">{`Select ${column.text}`}</span>
               <select
                 ref={ n => this.numberFilter = n }
-                id={ `number-filter-column-${column.text}` }
+                id={ inputElmId }
                 style={ numberStyle }
                 className={ selectClass }
                 onChange={ this.onChangeNumberSet }
@@ -228,11 +232,11 @@ class NumberFilter extends Component {
                 { this.getNumberOptions() }
               </select>
             </label> :
-            <label htmlFor={ `number-filter-column-${column.text}` }>
+            <label htmlFor={ inputElmId }>
               <span className="sr-only">{`Enter ${column.text}`}</span>
               <input
                 ref={ n => this.numberFilter = n }
-                id={ `number-filter-column-${column.text}` }
+                id={ inputElmId }
                 type="number"
                 style={ numberStyle }
                 className={ `number-filter-input form-control ${numberClassName}` }
@@ -250,6 +254,7 @@ class NumberFilter extends Component {
 NumberFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  id: PropTypes.string,
   filterState: PropTypes.object,
   options: PropTypes.arrayOf(PropTypes.number),
   defaultValue: PropTypes.shape({
@@ -305,7 +310,8 @@ NumberFilter.defaultProps = {
   comparatorStyle: undefined,
   comparatorClassName: '',
   numberStyle: undefined,
-  numberClassName: ''
+  numberClassName: '',
+  id: null
 };
 
 export default NumberFilter;
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 7b49a8c68..297ed6fc3 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -144,6 +144,7 @@ class SelectFilter extends Component {
 
   render() {
     const {
+      id,
       style,
       className,
       defaultValue,
@@ -160,17 +161,18 @@ class SelectFilter extends Component {
 
     const selectClass =
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
+    const elmId = `select-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
 
     return (
       <label
         className="filter-label"
-        htmlFor={ `select-filter-column-${column.text}` }
+        htmlFor={ elmId }
       >
         <span className="sr-only">Filter by { column.text }</span>
         <select
           { ...rest }
           ref={ n => this.selectInput = n }
-          id={ `select-filter-column-${column.text}` }
+          id={ elmId }
           style={ style }
           className={ selectClass }
           onChange={ this.filter }
@@ -187,6 +189,7 @@ class SelectFilter extends Component {
 SelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  id: PropTypes.string,
   filterState: PropTypes.object,
   options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   comparator: PropTypes.oneOf([LIKE, EQ]),
@@ -205,7 +208,8 @@ SelectFilter.defaultProps = {
   className: '',
   withoutEmptyOption: false,
   comparator: EQ,
-  caseSensitive: true
+  caseSensitive: true,
+  id: null
 };
 
 export default SelectFilter;
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index b02e6d542..256aca37a 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -88,8 +88,9 @@ class TextFilter extends Component {
 
   render() {
     const {
+      id,
       placeholder,
-      column: { text },
+      column: { dataField, text },
       style,
       className,
       onFilter,
@@ -100,18 +101,19 @@ class TextFilter extends Component {
       ...rest
     } = this.props;
 
-    // stopPropagation for onClick event is try to prevent sort was triggered.
+    const elmId = `text-filter-column-${dataField}${id ? `-${id}` : ''}`;
+
     return (
       <label
         className="filter-label"
-        htmlFor={ `text-filter-column-${text}` }
+        htmlFor={ elmId }
       >
         <span className="sr-only">Filter by {text}</span>
         <input
           { ...rest }
           ref={ n => this.input = n }
           type="text"
-          id={ `text-filter-column-${text}` }
+          id={ elmId }
           className={ `filter text-filter form-control ${className}` }
           style={ style }
           onChange={ this.filter }
@@ -127,6 +129,7 @@ class TextFilter extends Component {
 TextFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  id: PropTypes.string,
   filterState: PropTypes.object,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   defaultValue: PropTypes.string,
@@ -142,7 +145,8 @@ TextFilter.defaultProps = {
   delay: FILTER_DELAY,
   filterState: {},
   defaultValue: '',
-  caseSensitive: false
+  caseSensitive: false,
+  id: null
 };
 
 
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index f9be85f18..64f2d195f 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -25,6 +25,7 @@ export default (
     constructor(props) {
       super(props);
       this.currFilters = {};
+      this.clearFilters = {};
       this.onFilter = this.onFilter.bind(this);
       this.doFilter = this.doFilter.bind(this);
       this.onExternalFilter = this.onExternalFilter.bind(this);
@@ -42,6 +43,7 @@ export default (
       return (filterVal) => {
         // watch out here if migration to context API, #334
         const currFilters = Object.assign({}, this.currFilters);
+        this.clearFilters = {};
         const { dataField, filter } = column;
 
         const needClearFilters =
@@ -51,6 +53,7 @@ export default (
 
         if (needClearFilters) {
           delete currFilters[dataField];
+          this.clearFilters = { [dataField]: { clear: true, filterVal } };
         } else {
           // select default comparator is EQ, others are LIKE
           const {
@@ -93,7 +96,7 @@ export default (
 
     doFilter(props, ignoreEmitDataChange = false) {
       const { dataChangeListener, data, columns } = props;
-      const result = filters(data, columns, _)(this.currFilters);
+      const result = filters(data, columns, _)(this.currFilters, this.clearFilters);
       this.data = result;
       if (dataChangeListener && !ignoreEmitDataChange) {
         this.isEmitDataChange = true;
diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js
index 8769e4fd6..7aad77bc3 100644
--- a/packages/react-bootstrap-table2-filter/src/filter.js
+++ b/packages/react-bootstrap-table2-filter/src/filter.js
@@ -229,14 +229,13 @@ export const filterFactory = _ => (filterType) => {
   return filterFn;
 };
 
-export const filters = (data, columns, _) => (currFilters) => {
+export const filters = (data, columns, _) => (currFilters, clearFilters = {}) => {
   const factory = filterFactory(_);
+  const filterState = { ...clearFilters, ...currFilters };
   let result = data;
   let filterFn;
-  Object.keys(currFilters).forEach((dataField) => {
+  Object.keys(filterState).forEach((dataField) => {
     let currentResult;
-    const filterObj = currFilters[dataField];
-    filterFn = factory(filterObj.filterType);
     let filterValue;
     let customFilter;
     for (let i = 0; i < columns.length; i += 1) {
@@ -248,13 +247,23 @@ export const filters = (data, columns, _) => (currFilters) => {
         break;
       }
     }
-    if (customFilter) {
-      currentResult = customFilter(filterObj.filterVal, result);
-    }
-    if (typeof currentResult === 'undefined') {
-      result = filterFn(result, dataField, filterObj, filterValue);
+
+    if (clearFilters[dataField] && customFilter) {
+      currentResult = customFilter(clearFilters[dataField].filterVal, result);
+      if (typeof currentResult !== 'undefined') {
+        result = currentResult;
+      }
     } else {
-      result = currentResult;
+      const filterObj = filterState[dataField];
+      filterFn = factory(filterObj.filterType);
+      if (customFilter) {
+        currentResult = customFilter(filterObj.filterVal, result);
+      }
+      if (typeof currentResult === 'undefined') {
+        result = filterFn(result, dataField, filterObj, filterValue);
+      } else {
+        result = currentResult;
+      }
     }
   });
   return result;
diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js
index 7b15a28d2..eccef3063 100644
--- a/packages/react-bootstrap-table2-filter/test/context.test.js
+++ b/packages/react-bootstrap-table2-filter/test/context.test.js
@@ -171,6 +171,7 @@ describe('FilterContext', () => {
         filterVals.forEach((filterVal) => {
           instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
           expect(Object.keys(instance.currFilters)).toHaveLength(0);
+          expect(Object.keys(instance.clearFilters)).toHaveLength(1);
         });
       });
     });
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index d96764225..fe3c1cb34 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -13,6 +13,7 @@ import Const from './const';
 class Pagination extends pageResolver(Component) {
   render() {
     const {
+      tableId,
       currPage,
       pageStartIndex,
       showTotal,
@@ -43,6 +44,7 @@ class Pagination extends pageResolver(Component) {
       <div className="row react-bootstrap-table-pagination">
         <div className="col-md-6 col-xs-6 col-sm-6 col-lg-6">
           <SizePerPageDropdownWithAdapter
+            tableId={ tableId }
             sizePerPageList={ sizePerPageList }
             currSizePerPage={ currSizePerPage }
             hideSizePerPage={ hideSizePerPage }
diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
index b2d6a1fac..dc28f1a7f 100644
--- a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
+++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
@@ -30,6 +30,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
 
     render() {
       const {
+        tableId,
         sizePerPageList,
         currSizePerPage,
         hideSizePerPage,
@@ -56,6 +57,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
             onClick={ this.toggleDropDown }
             onBlur={ this.closeDropDown }
             open={ open }
+            tableId={ tableId }
           />
         );
       }
diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
index e7588b304..df3f278c6 100644
--- a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
+++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
@@ -9,6 +9,7 @@ const sizePerPageDefaultClass = 'react-bs-table-sizePerPage-dropdown';
 const SizePerPageDropDown = (props) => {
   const {
     open,
+    tableId,
     hidden,
     onClick,
     onBlur,
@@ -30,6 +31,8 @@ const SizePerPageDropDown = (props) => {
     className,
   );
 
+  const id = tableId ? `${tableId}-pageDropDown` : 'pageDropDown';
+
   return (
     <BootstrapContext.Consumer>
       {
@@ -39,7 +42,8 @@ const SizePerPageDropDown = (props) => {
             className={ dropdownClasses }
           >
             <button
-              id="pageDropDown"
+              id={ id }
+              type="button"
               className={ `btn ${btnContextual} dropdown-toggle` }
               data-toggle="dropdown"
               aria-expanded={ open }
@@ -59,7 +63,7 @@ const SizePerPageDropDown = (props) => {
             <ul
               className={ `dropdown-menu ${openClass}` }
               role="menu"
-              aria-labelledby="pageDropDown"
+              aria-labelledby={ id }
             >
               {
                 options.map((option) => {
@@ -93,6 +97,7 @@ SizePerPageDropDown.propTypes = {
   onClick: PropTypes.func.isRequired,
   onBlur: PropTypes.func.isRequired,
   onSizePerPageChange: PropTypes.func.isRequired,
+  tableId: PropTypes.string,
   open: PropTypes.bool,
   hidden: PropTypes.bool,
   btnContextual: PropTypes.string,
@@ -106,7 +111,8 @@ SizePerPageDropDown.defaultProps = {
   btnContextual: 'btn-default btn-secondary',
   variation: 'dropdown',
   className: '',
-  optionRenderer: null
+  optionRenderer: null,
+  tableId: null
 };
 
 
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index b1079ef6e..096eb737a 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -47,7 +47,7 @@ class StateProvider extends React.Component {
   }
 
   getPaginationProps = () => {
-    const { pagination: { options }, bootstrap4 } = this.props;
+    const { pagination: { options }, bootstrap4, tableId } = this.props;
     const { currPage, currSizePerPage, dataSize } = this;
     const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
       Const.With_FIRST_AND_LAST : options.withFirstAndLast;
@@ -62,6 +62,7 @@ class StateProvider extends React.Component {
     return {
       ...options,
       bootstrap4,
+      tableId,
       page: currPage,
       sizePerPage: currSizePerPage,
       pageStartIndex,
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index fcf5d312e..fa5d6e74f 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -37,7 +37,7 @@
   ],
   "dependencies": {
     "classnames": "^2.2.5",
-    "react-transition-group": "2.5.3",
+    "react-transition-group": "^4.2.0",
     "underscore": "1.9.1"
   },
   "peerDependencies": {
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 19449e73b..9ebaaa43c 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -226,6 +226,7 @@ const withContext = Base =>
           isRemotePagination={ this.isRemotePagination }
           remoteEmitter={ this.remoteEmitter }
           onDataSizeChange={ this.props.onDataSizeChange }
+          tableId={ this.props.id }
         >
           <this.PaginationContext.Consumer>
             {
diff --git a/packages/react-bootstrap-table2/src/footer-cell.js b/packages/react-bootstrap-table2/src/footer-cell.js
index e47ad0ae0..efad6dd38 100644
--- a/packages/react-bootstrap-table2/src/footer-cell.js
+++ b/packages/react-bootstrap-table2/src/footer-cell.js
@@ -54,7 +54,7 @@ class FooterCell extends eventDelegater(React.Component) {
     if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
     if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
 
-    const children = footerFormatter ? footerFormatter(column, index) : text;
+    const children = footerFormatter ? footerFormatter(column, index, { text }) : text;
 
     return React.createElement('th', cellAttrs, children);
   }