From 85f1eba7cbe70287f5184ba7e392943b40b31745 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sun, 21 Jan 2018 17:11:50 +0800
Subject: [PATCH] tweak stories

---
 .../examples/basic/borderless-table.js        |  3 +
 .../examples/basic/caption-table.js           |  2 +
 .../examples/basic/index.js                   |  2 +
 .../examples/basic/no-data-table.js           |  5 +-
 .../basic/striped-hover-condensed-table.js    |  3 +
 .../examples/cell-edit/blur-to-save-table.js  |  3 +-
 .../cell-edit/cell-edit-class-table.js        |  3 +-
 .../cell-edit/cell-edit-hooks-table.js        |  3 +-
 .../cell-edit/cell-edit-style-table.js        |  3 +-
 .../cell-edit/cell-edit-validator-table.js    |  3 +-
 .../cell-edit/cell-level-editable-table.js    |  4 +-
 .../examples/cell-edit/click-to-edit-table.js |  4 +-
 .../cell-edit/column-level-editable-table.js  |  4 +-
 .../cell-edit/dbclick-to-edit-table.js        |  4 +-
 .../cell-edit/row-level-editable-table.js     |  4 +-
 .../column-filter/custom-filter-value.js      |  1 +
 .../column-filter/custom-text-filter.js       |  1 +
 .../text-filter-default-value.js              |  1 +
 .../text-filter-eq-comparator.js              |  1 +
 .../examples/column-filter/text-filter.js     |  1 +
 .../examples/columns/column-align-table.js    |  2 +
 .../examples/columns/column-attrs-table.js    |  3 +
 .../examples/columns/column-class-table.js    |  2 +
 .../examples/columns/column-event-table.js    |  2 +
 .../examples/columns/column-format-table.js   |  2 +
 .../column-format-with-extra-data-table.js    |  2 +
 .../examples/columns/column-hidden-table.js   |  2 +
 .../examples/columns/column-style-table.js    |  2 +
 .../examples/columns/column-title-table.js    |  1 +
 .../examples/columns/nested-data-table.js     |  2 +
 .../header-columns/column-align-table.js      |  2 +
 .../header-columns/column-attrs-table.js      |  2 +
 .../header-columns/column-class-table.js      |  2 +
 .../header-columns/column-event-table.js      |  2 +
 .../column-format-filter-sort-table.js        |  1 +
 .../header-columns/column-format-table.js     |  2 +
 .../header-columns/column-style-table.js      |  2 +
 .../header-columns/column-title-table.js      |  2 +
 .../examples/pagination/index.js              |  2 +-
 .../examples/pagination/pagination-hooks.js   |  2 +-
 .../examples/remote/remote-celledit.js        |  8 +--
 .../examples/remote/remote-filter.js          | 57 ++++++++++++++++-
 .../examples/remote/remote-pagination.js      |  2 +-
 .../examples/remote/remote-sort.js            | 61 ++++++++++++++++++-
 .../click-to-select-with-cell-edit.js         | 19 ++++--
 .../examples/row-selection/click-to-select.js |  2 +
 .../row-selection/hide-selection-column.js    |  2 +
 .../row-selection/multiple-selection.js       |  2 +
 .../row-selection/non-selectable-rows.js      |  2 +
 .../row-selection/selection-bgcolor.js        |  2 +
 .../examples/row-selection/selection-class.js |  2 +
 .../examples/row-selection/selection-hooks.js |  2 +
 .../examples/row-selection/selection-style.js |  2 +
 .../row-selection/single-selection.js         |  2 +
 .../examples/rows/row-class.js                |  2 +
 .../examples/rows/row-event.js                | 11 ++--
 .../examples/rows/row-style.js                |  2 +
 .../examples/sort/custom-sort-table.js        |  3 +
 .../examples/sort/default-sort-table.js       |  2 +
 .../examples/sort/enable-sort-table.js        |  2 +
 .../examples/sort/header-sorting-classes.js   |  2 +
 .../examples/sort/header-sorting-style.js     |  2 +
 62 files changed, 252 insertions(+), 33 deletions(-)

diff --git a/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js b/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
index 4a763f0..bccdef1 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
@@ -18,6 +18,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
 <BootstrapTable
   keyField="id"
   data={ products }
diff --git a/packages/react-bootstrap-table2-example/examples/basic/caption-table.js b/packages/react-bootstrap-table2-example/examples/basic/caption-table.js
index 3d8a2b8..e613545 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/caption-table.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/caption-table.js
@@ -18,6 +18,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/basic/index.js b/packages/react-bootstrap-table2-example/examples/basic/index.js
index d7ec0ba..310583c 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/index.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/index.js
@@ -18,6 +18,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
index b171f7b..329fabf 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
@@ -15,9 +15,12 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
 <BootstrapTable keyField='id' data={ [] } columns={ columns } noDataIndication="Table is Empty" />
 
-// Following is more customizable example
+// Following is a more flexible example
 
 function indication() {
   // return something here
diff --git a/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js b/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
index a8f1dbe..3451b8f 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
@@ -18,6 +18,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
 <BootstrapTable
   keyField="id"
   data={ products }
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js
index 3018294..15175ba 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js
@@ -19,8 +19,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js
index 40eb2ee..b2b58e8 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js
@@ -23,8 +23,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js
index 1793cc5..afb1523 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js
@@ -21,8 +21,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js
index db79d95..59e40d8 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js
@@ -27,8 +27,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js
index 5ad7974..457c890 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js
@@ -34,8 +34,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js
index e9c946c..2338df1 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js
@@ -21,8 +21,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -45,6 +46,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Only Product Price is bigger than 2101 is editable</h3>
     <BootstrapTable
       keyField="id"
       data={ products }
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js
index 7776e7f..38bfb0c 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js
@@ -20,8 +20,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -43,6 +44,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Click to edit cell</h3>
     <BootstrapTable
       keyField="id"
       data={ products }
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js
index ea14397..5e9d8a9 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js
@@ -20,8 +20,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -48,6 +49,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Product Name is non editable</h3>
     <BootstrapTable
       keyField="id"
       data={ products }
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js
index 3990ccc..9c0deee 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js
@@ -19,8 +19,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -42,6 +43,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Double click to edit cell</h3>
     <BootstrapTable
       keyField="id"
       data={ products }
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js
index e25d8ca..f0ef206 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js
@@ -19,8 +19,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -45,6 +46,7 @@ const columns = [{
 `;
 export default () => (
   <div>
+    <h3>Product ID: 0, 3 is non editable</h3>
     <BootstrapTable
       keyField="id"
       data={ products }
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js
index e074bac..0901eb6 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js
@@ -32,6 +32,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const owners = ['Allen', 'Bob', 'Cat'];
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
index da8d343..e4be0a8 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
@@ -29,6 +29,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
index 5e581a2..d37c2f5 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
@@ -22,6 +22,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
index 6cc2678..cb34658 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
@@ -22,6 +22,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
 
 const columns = [{
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 bdb3201..19eab47 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
@@ -20,6 +20,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
index e004f1e..6e98f2e 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
@@ -24,6 +24,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js
index ab1a742..7e7bfcb 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js
@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -39,6 +41,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Try to hover on Product Name header column</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
index bf22a57..5fb7db3 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
@@ -24,6 +24,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
index 4d74d0e..32f0d69 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
@@ -23,6 +23,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
index eb87f69..dc5bb29 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
@@ -31,6 +31,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 function priceFormatter(cell, row) {
   if (row.onSale) {
     return (
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
index caf9ccf..ac388ca 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
@@ -34,6 +34,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 function rankFormatter(cell, row, rowIndex, formatExtraData) {
   return (
     <i className={ formatExtraData[cell] } />
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
index 584e6c4..9930248 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
@@ -20,6 +20,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
index d9d9a8f..f37d7b9 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
@@ -33,6 +33,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
index 153a07d..016b0cb 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
@@ -39,6 +39,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Try to hover on any Product Name cells</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
diff --git a/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
index 6c9f88b..eb62ddc 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
@@ -32,6 +32,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'User ID'
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
index 9bfd6fe..f9fcab8 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js
index 9313f77..7f01864 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js
@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
index b976f62..b897bc2 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
@@ -24,6 +24,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
index 2ab473c..7928a37 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
@@ -23,6 +23,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js
index 1672c46..ce30d70 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js
@@ -41,6 +41,7 @@ const defaultSorted = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 // ...
 function priceFormatter(column, colIndex, { sortElement, filterElement }) {
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
index 3b89145..16e34fd 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
@@ -26,6 +26,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 function priceFormatter(column, colIndex) {
   return (
     <h5><strong>$$ { column.text } $$</strong></h5>
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
index bb041d3..80ec299 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
@@ -32,6 +32,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
index aa4fbc9..94c71b7 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/index.js b/packages/react-bootstrap-table2-example/examples/pagination/index.js
index 1822a75..728f62d 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/index.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/index.js
@@ -22,7 +22,7 @@ const columns = [{
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js b/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js
index 397ced2..21807d8 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js
@@ -23,7 +23,7 @@ const columns = [{
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-celledit.js b/packages/react-bootstrap-table2-example/examples/remote/remote-celledit.js
index 9e1aaa4..68ec867 100644
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-celledit.js
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-celledit.js
@@ -19,8 +19,10 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
 // ...
+
 const RemoteCellEdit = (props) => {
   const cellEdit = {
     mode: 'click',
@@ -42,12 +44,6 @@ const RemoteCellEdit = (props) => {
   );
 };
 
-RemoteCellEdit.propTypes = {
-  data: PropTypes.array.isRequired,
-  onTableChange: PropTypes.func.isRequired,
-  errorMessage: PropTypes.string.isRequired
-};
-
 class Container extends React.Component {
   constructor(props) {
     super(props);
diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-filter.js b/packages/react-bootstrap-table2-example/examples/remote/remote-filter.js
index 459744f..85932a6 100644
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-filter.js
@@ -23,6 +23,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{
@@ -38,7 +39,61 @@ const columns = [{
   filter: textFilter()
 }];
 
-<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+const RemoteFilter = props => (
+  <div>
+    <BootstrapTable
+      remote={ { filter: true } }
+      keyField="id"
+      data={ props.data }
+      columns={ columns }
+      filter={ filterFactory() }
+      onTableChange={ props.onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: products
+    };
+  }
+
+  handleTableChange = (type, { filters }) => {
+    setTimeout(() => {
+      const result = products.filter((row) => {
+        let valid = true;
+        for (const dataField in filters) {
+          const { filterVal, filterType, comparator } = filters[dataField];
+
+          if (filterType === 'TEXT') {
+            if (comparator === Comparator.LIKE) {
+              valid = row[dataField].toString().indexOf(filterVal) > -1;
+            } else {
+              valid = row[dataField] === filterVal;
+            }
+          }
+          if (!valid) break;
+        }
+        return valid;
+      });
+      this.setState(() => ({
+        data: result
+      }));
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <RemoteFilter
+        data={ this.state.data }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
 `;
 
 const RemoteFilter = props => (
diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js b/packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js
index a971a4b..0765863 100644
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js
@@ -47,7 +47,7 @@ class Container extends React.Component {
     };
   }
 
-  handleTableChange = ({ page, sizePerPage }) => {
+  handleTableChange = (type, { page, sizePerPage }) => {
     const currentIndex = (page - 1) * sizePerPage;
     setTimeout(() => {
       this.setState(() => ({
diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-sort.js b/packages/react-bootstrap-table2-example/examples/remote/remote-sort.js
index fc370ae..bd6147f 100644
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-sort.js
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-sort.js
@@ -21,7 +21,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import BootstrapTable from 'react-bootstrap-table-next';
 
 const columns = [{
   dataField: 'id',
@@ -36,7 +36,64 @@ const columns = [{
   filter: textFilter()
 }];
 
-<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+const RemoteSort = props => (
+  <div>
+    <BootstrapTable
+      remote={ { sort: true } }
+      keyField="id"
+      data={ props.data }
+      columns={ columns }
+      onTableChange={ props.onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: products
+    };
+  }
+
+  handleTableChange = (type, { sortField, sortOrder, data }) => {
+    setTimeout(() => {
+      let result;
+      if (sortOrder === 'asc') {
+        result = data.sort((a, b) => {
+          if (a[sortField] > b[sortField]) {
+            return 1;
+          } else if (b[sortField] > a[sortField]) {
+            return -1;
+          }
+          return 0;
+        });
+      } else {
+        result = data.sort((a, b) => {
+          if (a[sortField] > b[sortField]) {
+            return -1;
+          } else if (b[sortField] > a[sortField]) {
+            return 1;
+          }
+          return 0;
+        });
+      }
+      this.setState(() => ({
+        data: result
+      }));
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <RemoteSort
+        data={ this.state.data }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
 `;
 
 const RemoteSort = props => (
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select-with-cell-edit.js b/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select-with-cell-edit.js
index cafe0d2..742d072 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select-with-cell-edit.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select-with-cell-edit.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -23,11 +24,10 @@ const selectRow = {
   clickToEdit: true
 };
 
-const cellEdit = {
-  mode: 'click'
-};
-
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -50,16 +50,23 @@ const cellEdit = {
 };
 
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
   selectRow={ selectRow }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
 />
 `;
 
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } cellEdit={ cellEdit } />
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ selectRow }
+      cellEdit={ cellEditFactory({ mode: 'click' }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js b/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js
index 8c0617e..6789789 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js
@@ -23,6 +23,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js b/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js
index 3e754b4..134e378 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js
@@ -25,6 +25,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js b/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js
index 8c0617e..6789789 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js
@@ -23,6 +23,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js
index e6248d8..7cf5e15 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js
@@ -24,6 +24,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js
index 5ba6e9e..ea391e4 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js
@@ -31,6 +31,8 @@ const selectRow2 = {
 };
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js
index 78e2eb7..7804c60 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js
@@ -32,6 +32,8 @@ const selectRow2 = {
 };
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
index 1c3172e..9b104c0 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
@@ -34,6 +34,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js
index 7f16344..97f32b9 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js
@@ -34,6 +34,8 @@ const selectRow2 = {
 };
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js b/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js
index ef87d7d..4df2109 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js
@@ -23,6 +23,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-class.js b/packages/react-bootstrap-table2-example/examples/rows/row-class.js
index b37e865..b7aa8bb 100644
--- a/packages/react-bootstrap-table2-example/examples/rows/row-class.js
+++ b/packages/react-bootstrap-table2-example/examples/rows/row-class.js
@@ -20,6 +20,8 @@ const columns = [{
 const rowClasses1 = 'custom-row-class';
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-event.js b/packages/react-bootstrap-table2-example/examples/rows/row-event.js
index c4a943d..915f9af 100644
--- a/packages/react-bootstrap-table2-example/examples/rows/row-event.js
+++ b/packages/react-bootstrap-table2-example/examples/rows/row-event.js
@@ -1,5 +1,5 @@
 /* eslint no-unused-vars: 0 */
-/* eslint no-console: 0 */
+/* eslint no-alert: 0 */
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
@@ -21,11 +21,13 @@ const columns = [{
 
 const rowEvents = {
   onClick: (e) => {
-    console.log('click on row');
+    alert('click on row');
   }
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -39,15 +41,16 @@ const columns = [{
 
 const rowEvents = {
   onClick: (e) => {
-    console.log('click on row');
+    alert('click on row');
   }
 };
 
-<BootstrapTable keyField='id' data={ products } columns={ columns } rowStyle={ rowStyle } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } rowEvents={ rowEvents } />
 `;
 
 export default () => (
   <div>
+    <h3>Try to click on any rows</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } rowEvents={ rowEvents } />
     <Code>{ sourceCode }</Code>
   </div>
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-style.js b/packages/react-bootstrap-table2-example/examples/rows/row-style.js
index 8f6e008..024cc84 100644
--- a/packages/react-bootstrap-table2-example/examples/rows/row-style.js
+++ b/packages/react-bootstrap-table2-example/examples/rows/row-style.js
@@ -20,6 +20,8 @@ const columns = [{
 const rowStyle1 = { backgroundColor: '#c8e6c9' };
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
diff --git a/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js
index 1672e84..a04b5ae 100644
--- a/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js
+++ b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js
@@ -29,6 +29,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -54,6 +56,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Product ID sorting is reverted</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
diff --git a/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js
index a64e578..115fe16 100644
--- a/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js
+++ b/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js
@@ -27,6 +27,8 @@ const defaultSorted = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js
index cdab74d..16e628f 100644
--- a/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js
+++ b/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js
@@ -20,6 +20,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
diff --git a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js
index 609c51f..b1b470e 100644
--- a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js
+++ b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js
@@ -31,6 +31,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
   sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
 );
diff --git a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js
index 3a7e33c..cd2c6f0 100644
--- a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js
+++ b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js
@@ -26,6 +26,8 @@ const columns = [{
 
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const headerSortingStyle = { backgroundColor: '#c8e6c9' };
 
 const columns = [{