tweak stories

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 }

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'

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'

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

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 }

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'

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'

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'

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'

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'

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 }

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 }

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 }

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 }

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 }

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'];

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 = [{

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 = [{

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 = [{

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 = [{

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',

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>

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',

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',

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 (

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] } />

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',

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',

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>

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'

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',

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',

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'

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',

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 }) {

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>

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'

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',

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'

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'

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

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 => (

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(() => ({

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 => (

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

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'

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'

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'

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'

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'

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'

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'

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'

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'

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'

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>

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'

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>

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',

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',

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

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 = [{