fix wrong story code

Fix 1185

docs/README.md

@@ -28,6 +28,7 @@
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
 * [hiddenRows](#hiddenRows)
+* [sort](#sort)
 * [defaultSorted](#defaultSorted)
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
@@ -199,6 +200,27 @@ const hiddenRows = [1, 4];
 <BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
 ```
 
+### <a name='sort'>sort - [Object]</a>
+Two cases you probably need to configure `sort` prop:
+
+#### Manage sorting state
+You can give `dataField` and `order` to specify the sorting state in table, For example
+
+```js
+<BootstrapTable sort={ { dataField: 'price', order: 'asc' } }>
+```
+
+#### One-time sorting configuration
+In earily version, we only can configure [`sortCaret`](./columns.md#sortCaret) and [`sortFunc` ](./columns.md#sortFunc) per column. But they are same in most of cases.   
+So here we give you a chance to just setup these prop in one time.
+
+```js
+<BootstrapTable sort={ {
+  sortCaret: ...
+  sortFunc: ...
+} }>
+```
+
 ### <a name='defaultSorted'>defaultSorted - [Array]</a>
 `defaultSorted` accept an object array which allow you to define the default sort columns when first render.
 

docs/row-selection.md

@@ -1,6 +1,6 @@
 
 # Row selection
-`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column. 
+`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column.
 
 ## Required
 * [mode (**required**)](#mode)
@@ -11,6 +11,8 @@
 * [classes)](#classes)
 * [bgColor](#bgColor)
 * [nonSelectable)](#nonSelectable)
+* [nonSelectableStyle](#nonSelectableStyle)
+* [nonSelectableClasses](#nonSelectableClasses)
 * [clickToSelect)](#clickToSelect)
 * [clickToExpand)](#clickToExpand)
 * [clickToEdit](#clickToEdit)
@@ -139,6 +141,54 @@ const selectRow = {
 };
 ```
 
+### <a name='nonSelectableStyle'>selectRow.nonSelectableStyle - [Object | Function]</a>
+This prop allow you to customize the non selectable rows. `selectRow.nonSelectableStyle` accepts an style object
+and a callback function for more flexible customization.
+
+### Style Object
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  nonSelectable: [1, 3 ,5],
+  nonSelectableStyle: { backgroundColor: 'gray' }
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  nonSelectable: [1, 3 ,5],
+  nonSelectableStyle: (row, rowIndex) => { return ...; }
+};
+```
+
+### <a name='nonSelectableClasses'>selectRow.nonSelectableClasses - [String | Function]</a>
+This prop allow you to set a custom class for the non selectable rows, or use a callback function for more
+flexible customization
+
+### String
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  nonSelectable: [1, 3 ,5],
+  nonSelectableClasses: 'my-class'
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  nonSelectable: [1, 3 ,5],
+  nonSelectableClasses: (row, rowIndex) => { return ...; }
+};
+```
+
 ### <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
 Allow user to select row by clicking on the row.
 
@@ -149,7 +199,7 @@ const selectRow = {
 };
 ```
 
-> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing   
+> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
 > If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
 
 ### <a name='clickToExpand'>selectRow.clickToExpand - [Bool]</a>
@@ -307,7 +357,7 @@ const selectRow = {
   mode: 'checkbox',
   onSelectAll: (isSelect, rows, e) => {
     if (isSelect && SOME_CONDITION) {
-      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
+      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected
     }
   }
 };

packages/react-bootstrap-table2-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "1.4.0",
+  "version": "1.3.2",
   "description": "it's the editor addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "scripts": {

packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const CaptionElement = () => <h3 style={{ borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' }}>Component as Header</h3>;
+
+<BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+
+<BootstrapTable bootstrap4 keyField="id" data={ products } caption={<CaptionElement />} columns={ columns } />
+`;
+
+const Caption = () => <h3 style={ { borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' } }>Component as Header</h3>;
+
+export default () => (
+  <div>
+    <BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+    <BootstrapTable bootstrap4 keyField="id" data={ products } caption={ <Caption /> } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -71,6 +71,23 @@ const columns = [{
 />
 `;
 
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  showExpandColumn: true,
+  expandColumnPosition: 'right'
+};
+
 export default () => (
   <div>
     <BootstrapTable
@@ -79,6 +96,8 @@ export default () => (
       columns={ columns }
       filter={ filterFactory() }
       filterPosition="top"
+      expandRow={ expandRow }
+      selectRow={ selectRow }
     />
     <Code>{ sourceCode1 }</Code>
     <BootstrapTable
@@ -87,6 +106,8 @@ export default () => (
       columns={ columns }
       filter={ filterFactory() }
       filterPosition="bottom"
+      expandRow={ expandRow }
+      selectRow={ selectRow }
     />
     <Code>{ sourceCode2 }</Code>
   </div>

packages/react-bootstrap-table2-example/examples/csv/custom-csv.js

@@ -40,7 +40,13 @@ const columns = [{
   keyField="id"
   data={ products }
   columns={ columns }
-  exportCSV
+  exportCSV={ {
+    fileName: 'custom.csv',
+    separator: '|',
+    ignoreHeader: true,
+    noAutoBOM: false,
+    blobType: 'text/csv;charset=ansi'
+  } }
 >
   {
     props => (
@@ -64,7 +70,8 @@ export default () => (
         fileName: 'custom.csv',
         separator: '|',
         ignoreHeader: true,
-        noAutoBOM: false
+        noAutoBOM: false,
+        blobType: 'text/csv;charset=ansi'
       } }
     >
       {

packages/react-bootstrap-table2-example/examples/csv/export-footer.js

@@ -0,0 +1,88 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: '',
+  footerFormatter: column => column.text
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV={ {
+    ignoreFooter: false
+  } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable { ...props.baseProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV={ {
+        ignoreFooter: false
+      } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable { ...props.baseProps } />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  nonSelectable: [0, 2, 4],
+  nonSelectableClasses: 'row-index-bigger-than-2101'
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  nonSelectable: [0, 2, 4],
+  nonSelectableClasses: 'row-index-bigger-than-2101'
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  nonSelectable: [0, 2, 4],
+  nonSelectableStyle: { backgroundColor: 'gray' }
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  nonSelectable: [0, 2, 4],
+  nonSelectableStyle: { backgroundColor: 'gray' }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js

@@ -0,0 +1,98 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+class OnetimeSortConfiguration extends React.Component {
+  sortFunc = (a, b, order, dataField) => {
+    if (order === 'asc') {
+      return b - a;
+    }
+    return a - b; // desc
+  }
+
+  render() {
+    const sortOption = {
+      // No need to configure sortFunc per column
+      sortFunc: this.sortFunc,
+      // No need to configure sortCaret per column
+      sortCaret: (order, column) => {
+        if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+        else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+        else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+        return null;
+      }
+    };
+
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleClick }>Change Data</button>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class OnetimeSortConfiguration extends React.Component {
+  sortFunc = (a, b, order, dataField) => {
+    if (order === 'asc') {
+      return b - a;
+    }
+    return a - b; // desc
+  }
+
+  render() {
+    const sortOption = {
+      sortFunc: this.sortFunc,
+      sortCaret: (order, column) => {
+        if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+        else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+        else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+        return null;
+      }
+    };
+
+    return (
+      <div>
+        <h3>Reverse Sorting Table</h3>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/sort/sort-management.js

@@ -0,0 +1,118 @@
+/* eslint no-console: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class SortManagement extends React.Component {
+  state = {
+    field: null,
+    order: null
+  }
+
+  handleSort = (field, order) => {
+    this.setState({
+      field,
+      order
+    });
+  }
+
+  handleSortById = () => {
+    this.setState({
+      field: 'id',
+      order: 'desc'
+    });
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+    return (
+      <div>
+        <button className="btn btn-danger" onClick={ this.handleSortById }>Sort By ID</button>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          sort={ {
+            dataField: this.state.field,
+            order: this.state.order
+          } }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class SortManagement extends React.Component {
+  state = {
+    field: null,
+    order: null
+  }
+
+  handleSort = (field, order) => {
+    this.setState({
+      field,
+      order
+    });
+  }
+
+  handleSortById = () => {
+    this.setState({
+      field: 'id',
+      order: 'desc'
+    });
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+    return (
+      <div>
+        <button className="btn btn-danger" onClick={ this.handleSortById }>Sort By ID</button>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          sort={ {
+            dataField: this.state.field,
+            order: this.state.order
+          } }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "1.0.32",
+  "version": "1.0.30",
   "description": "",
   "main": "index.js",
   "private": true,

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

@@ -18,6 +18,7 @@ import TabIndexCellTable from 'examples/basic/tabindex-column';
 
 // bootstrap 4
 import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
+import Bootstrap4CaptionTable from 'examples/bootstrap4/caption-table';
 import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
 import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
 import Bootstrap4ColumnToggleTable from 'examples/bootstrap4/column-toggle';
@@ -105,6 +106,8 @@ import EnableSortTable from 'examples/sort/enable-sort-table';
 import DefaultSortTable from 'examples/sort/default-sort-table';
 import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
 import SortEvents from 'examples/sort/sort-events';
+import SortManagement from 'examples/sort/sort-management';
+import OneTimeSortConfiguration from 'examples/sort/one-time-sort-configuration';
 import CustomSortValue from 'examples/sort/custom-sort-value';
 import CustomSortTable from 'examples/sort/custom-sort-table';
 import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
@@ -152,6 +155,8 @@ import HeaderStyleTable from 'examples/row-selection/header-style';
 import HideSelectAllTable from 'examples/row-selection/hide-select-all';
 import CustomSelectionTable from 'examples/row-selection/custom-selection';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
+import NonSelectableRowsStyleTable from 'examples/row-selection/non-selectable-rows-style';
+import NonSelectableRowsClassTable from 'examples/row-selection/non-selectable-rows-class';
 import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
 import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
@@ -210,6 +215,7 @@ import CSVColumnType from 'examples/csv/csv-column-type';
 import CustomCSVButton from 'examples/csv/custom-csv-button';
 import ExportCustomData from 'examples/csv/export-custom-data';
 import CustomCSV from 'examples/csv/custom-csv';
+import ExportTableFooter from 'examples/csv/export-footer';
 
 // Column toggle
 import BasicColumnToggle from 'examples/column-toggle';
@@ -266,6 +272,7 @@ storiesOf('Basic Table', module)
 storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
   .add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
+  .add('Table Caption bootstrap 4', () => <Bootstrap4CaptionTable />)
   .add('Row selection table with bootstrap 4', () => <Bootstrap4RowSelectionTable />)
   .add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />)
   .add('Column Toggle with bootstrap 4', () => <Bootstrap4ColumnToggleTable />)
@@ -360,6 +367,8 @@ storiesOf('Sort Table', module)
   .add('Default Sort Table', () => <DefaultSortTable />)
   .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
+  .add('Sort Management', () => <SortManagement />)
+  .add('One-time Sort Configuation', () => <OneTimeSortConfiguration />)
   .add('Custom Sort Value', () => <CustomSortValue />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
   .add('Custom Sort Caret', () => <CustomSortCaretTable />)
@@ -410,6 +419,8 @@ storiesOf('Row Selection', module)
   .add('Custom Selection', () => <CustomSelectionTable />)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
+  .add('Not Selectabled Rows Style', () => <NonSelectableRowsStyleTable />)
+  .add('Not Selectabled Rows Class', () => <NonSelectableRowsClassTable />)
   .add('Selection Hooks', () => <SelectionHooks />)
   .add('Hide Selection Column', () => <HideSelectionColumnTable />)
   .add('Custom Selection Column Style', () => <SelectionColumnStyleTable />)
@@ -478,7 +489,8 @@ storiesOf('Export CSV', module)
   .add('CSV Column Type', () => <CSVColumnType />)
   .add('Custom CSV Button', () => <CustomCSVButton />)
   .add('Export Custom Data', () => <ExportCustomData />)
-  .add('Custom CSV', () => <CustomCSV />);
+  .add('Custom CSV', () => <CustomCSV />)
+  .add('Export Table Footer', () => <ExportTableFooter />);
 
 storiesOf('EmptyTableOverlay', module)
   .addDecorator(bootstrapStyle())

packages/react-bootstrap-table2-filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "1.2.0",
+  "version": "1.1.12",
   "description": "it's a column filter addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-paginator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-paginator",
-  "version": "2.1.0",
+  "version": "2.0.8",
   "description": "it's the pagination addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

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

@@ -209,6 +209,9 @@ Custom the csv file separator.
 #### ignoreHeader - [bool]
 Default is `false`. Give true to avoid to attach the csv header.
 
+#### ignoreFooter - [bool]
+Default is `true`. Give `false` to attach the table footer if enabled.
+
 #### noAutoBOM - [bool]
 Default is `true`.
 

packages/react-bootstrap-table2-toolkit/context.js

@@ -28,6 +28,7 @@ class ToolkitProvider extends statelessDecorator(React.Component) {
         fileName: PropTypes.string,
         separator: PropTypes.string,
         ignoreHeader: PropTypes.bool,
+        ignoreFooter: PropTypes.bool,
         noAutoBOM: PropTypes.bool,
         blobType: PropTypes.string,
         exportAll: PropTypes.bool,

packages/react-bootstrap-table2-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-toolkit",
-  "version": "2.1.0",
+  "version": "2.0.1",
   "description": "The toolkit for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-toolkit/src/csv/exporter.js

@@ -12,17 +12,21 @@ export const getMetaInfo = columns =>
       export: column.csvExport === false ? false : true,
       row: Number(column.row) || 0,
       rowSpan: Number(column.rowSpan) || 1,
-      colSpan: Number(column.colSpan) || 1
+      colSpan: Number(column.colSpan) || 1,
+      footer: column.footer,
+      footerFormatter: column.footerFormatter
     }))
     .filter(_ => _.export);
 
 export const transform = (
   data,
   meta,
-  getValue,
+  columns,
+  _,
   {
     separator,
-    ignoreHeader
+    ignoreHeader,
+    ignoreFooter
   }
 ) => {
   const visibleColumns = meta.filter(m => m.export);
@@ -37,7 +41,7 @@ export const transform = (
   content += data
     .map((row, rowIndex) =>
       visibleColumns.map((m) => {
-        let cellContent = getValue(row, m.field);
+        let cellContent = _.get(row, m.field);
         if (m.formatter) {
           cellContent = m.formatter(cellContent, row, rowIndex, m.formatExtraData);
         }
@@ -47,6 +51,18 @@ export const transform = (
         return cellContent;
       }).join(separator)).join('\n');
 
+  if (!ignoreFooter) {
+    content += '\n';
+    content += visibleColumns.map((m, i) => {
+      if (typeof m.footer === 'function') {
+        const columnData = _.pluck(data, columns[i].dataField);
+        return `"${m.footer(columnData, columns[i], i)}"`;
+      } else if (m.footerFormatter) {
+        return `"${m.footerFormatter(columns[i], i)}"`;
+      }
+      return `"${m.footer}"`;
+    }).join(separator);
+  }
   return content;
 };
 

packages/react-bootstrap-table2-toolkit/src/op/csv.js

@@ -4,6 +4,7 @@ const csvDefaultOptions = {
   fileName: 'spreadsheet.csv',
   separator: ',',
   ignoreHeader: false,
+  ignoreFooter: true,
   noAutoBOM: true,
   blobType: 'text/plain;charset=utf-8',
   exportAll: true,
@@ -46,7 +47,7 @@ export default Base =>
         data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
       }
 
-      const content = transform(data, meta, this._.get, options);
+      const content = transform(data, meta, columns, this._, options);
       save(content, options);
     }
   };

packages/react-bootstrap-table2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table-next",
-  "version": "3.2.1",
+  "version": "3.1.9",
   "description": "Next generation of react-bootstrap-table",
   "main": "./lib/index.js",
   "repository": {
@@ -36,7 +36,7 @@
     }
   ],
   "dependencies": {
-    "classnames": "2.2.5",
+    "classnames": "^2.2.5",
     "react-transition-group": "2.5.3",
     "underscore": "1.9.1"
   },

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

@@ -83,7 +83,9 @@ class BootstrapTable extends PropsBaseResolver(Component) {
 
     const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
 
-    const tableCaption = (caption && <Caption>{ caption }</Caption>);
+    const tableCaption = (
+      caption && <Caption bootstrap4={ bootstrap4 }>{ caption }</Caption>
+    );
 
     return (
       <div className={ tableWrapperClass }>
@@ -95,6 +97,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             sortField={ this.props.sortField }
             sortOrder={ this.props.sortOrder }
             onSort={ this.props.onSort }
+            globalSortCaret={ this.props.sort && this.props.sort.sortCaret }
             onFilter={ this.props.onFilter }
             currFilters={ this.props.currFilters }
             onExternalFilter={ this.props.onExternalFilter }
@@ -111,6 +114,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
               currFilters={ this.props.currFilters }
               filterPosition={ this.props.filterPosition }
               onExternalFilter={ this.props.onExternalFilter }
+              selectRow={ selectRow }
+              expandRow={ expandRow }
             />
           )}
           <Body
@@ -182,6 +187,8 @@ BootstrapTable.propTypes = {
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     nonSelectable: PropTypes.array,
+    nonSelectableStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    nonSelectableClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     hideSelectColumn: PropTypes.bool,
     selectionRenderer: PropTypes.func,
@@ -226,6 +233,12 @@ BootstrapTable.propTypes = {
     dataField: PropTypes.string.isRequired,
     order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
   })),
+  sort: PropTypes.shape({
+    dataField: PropTypes.string,
+    order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
+    sortFunc: PropTypes.func,
+    sortCaret: PropTypes.func
+  }),
   defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
   overlay: PropTypes.func,
   onTableChange: PropTypes.func,

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

@@ -4,16 +4,22 @@ import PropTypes from 'prop-types';
 
 const Caption = (props) => {
   if (!props.children) return null;
-  return (
-    <caption>{ props.children }</caption>
+
+  const caption = props.bootstrap4 ? (
+    <caption style={ { captionSide: 'top' } }>{props.children}</caption>
+  ) : (
+    <caption>{props.children}</caption>
   );
+
+  return caption;
 };
 
 Caption.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.string
-  ])
+  ]),
+  bootstrap4: PropTypes.bool
 };
 
 export default Caption;

packages/react-bootstrap-table2/src/contexts/index.js

@@ -247,6 +247,7 @@ const withContext = Base =>
           ref={ n => this.sortContext = n }
           defaultSorted={ this.props.defaultSorted }
           defaultSortDirection={ this.props.defaultSortDirection }
+          sort={ this.props.sort }
           data={ rootProps.getData(filterProps, searchProps) }
         >
           <this.SortContext.Consumer>

packages/react-bootstrap-table2/src/contexts/sort-context.js

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 /* eslint react/require-default-props: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -19,6 +20,11 @@ export default (
         dataField: PropTypes.string.isRequired,
         order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
       })),
+      sort: PropTypes.shape({
+        dataField: PropTypes.string,
+        order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
+        sortFunc: PropTypes.func
+      }),
       defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
     }
 
@@ -26,19 +32,14 @@ export default (
       super(props);
       let sortOrder;
       let sortColumn;
-      const { columns, defaultSorted, defaultSortDirection } = props;
+      const { defaultSorted, defaultSortDirection, sort } = props;
 
       if (defaultSorted && defaultSorted.length > 0) {
-        const sortField = defaultSorted[0].dataField;
         sortOrder = defaultSorted[0].order || defaultSortDirection;
-        const sortColumns = columns.filter(col => col.dataField === sortField);
-        if (sortColumns.length > 0) {
-          sortColumn = sortColumns[0];
-
-          if (sortColumn.onSort) {
-            sortColumn.onSort(sortField, sortOrder);
-          }
-        }
+        sortColumn = this.initSort(defaultSorted[0].dataField, sortOrder);
+      } else if (sort && sort.dataField && sort.order) {
+        sortOrder = sort.order;
+        sortColumn = this.initSort(sort.dataField, sortOrder);
       }
       this.state = { sortOrder, sortColumn };
     }
@@ -50,6 +51,30 @@ export default (
       }
     }
 
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      const { sort, columns } = nextProps;
+      if (sort && sort.dataField && sort.order) {
+        this.setState({
+          sortOrder: sort.order,
+          sortColumn: columns.find(col => col.dataField === sort.dataField)
+        });
+      }
+    }
+
+    initSort(sortField, sortOrder) {
+      let sortColumn;
+      const { columns } = this.props;
+      const sortColumns = columns.filter(col => col.dataField === sortField);
+      if (sortColumns.length > 0) {
+        sortColumn = sortColumns[0];
+
+        if (sortColumn.onSort) {
+          sortColumn.onSort(sortField, sortOrder);
+        }
+      }
+      return sortColumn;
+    }
+
     handleSort = (column) => {
       const sortOrder = dataOperator.nextOrder(column, this.state, this.props.defaultSortDirection);
 
@@ -68,9 +93,11 @@ export default (
 
     render() {
       let { data } = this.props;
+      const { sort } = this.props;
       const { sortOrder, sortColumn } = this.state;
       if (!isRemoteSort() && sortColumn) {
-        data = dataOperator.sort(data, sortOrder, sortColumn);
+        const sortFunc = sortColumn.sortFunc ? sortColumn.sortFunc : (sort && sort.sortFunc);
+        data = dataOperator.sort(data, sortOrder, { ...sortColumn, sortFunc });
       }
 
       return (

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 
 import FiltersCell from './filters-cell';
 import Const from './const';
+import RowTemplate from './row/row-template';
 
 const Filters = (props) => {
   const {
@@ -12,27 +13,33 @@ const Filters = (props) => {
     currFilters,
     filterPosition,
     onExternalFilter,
-    className
+    className,
+    selectRow,
+    expandRow
   } = props;
 
-  const filterColumns = [];
-  let showFiltersRow = false;
+  function renderContent() {
+    const filterColumns = [];
+    let showFiltersRow = false;
 
-  columns.forEach((column, i) => {
-    filterColumns.push(<FiltersCell
-      index={ i }
-      column={ column }
-      currFilters={ currFilters }
-      onExternalFilter={ onExternalFilter }
-      onFilter={ onFilter }
-    />);
+    columns.forEach((column, i) => {
+      filterColumns.push(<FiltersCell
+        index={ i }
+        key={ column.dataField }
+        column={ column }
+        currFilters={ currFilters }
+        onExternalFilter={ onExternalFilter }
+        onFilter={ onFilter }
+      />);
 
-    if (column.filterRenderer || column.filter) {
-      if (!showFiltersRow) {
-        showFiltersRow = true;
+      if (column.filterRenderer || column.filter) {
+        if (!showFiltersRow) {
+          showFiltersRow = true;
+        }
       }
-    }
-  });
+    });
+    return filterColumns;
+  }
 
   return (
     <tbody
@@ -44,7 +51,12 @@ const Filters = (props) => {
           : 'table-footer-group'
       } }
     >
-      <tr>{filterColumns}</tr>
+      <RowTemplate
+        renderContent={ renderContent }
+        selectRow={ selectRow }
+        expandRow={ expandRow }
+        cellEl="td"
+      />
     </tbody>
   );
 };
@@ -59,7 +71,9 @@ Filters.propTypes = {
   ]),
   currFilters: PropTypes.object,
   onExternalFilter: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
+  selectRow: PropTypes.object,
+  expandRow: PropTypes.object
 };
 
 Filters.defaultProps = {

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

@@ -2,57 +2,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Const from './const';
+import RowTemplate from './row/row-template';
 import FooterCell from './footer-cell';
 import _ from './utils';
 
 const Footer = (props) => {
   const { data, className, columns, selectRow, expandRow } = props;
-  const SelectionFooterCellComp = () => <th />;
-  const ExpansionFooterCellComp = () => <th />;
 
-  const isRenderFunctionColumnInLeft = (
-    position = Const.INDICATOR_POSITION_LEFT
-  ) => position === Const.INDICATOR_POSITION_LEFT;
+  function renderContent() {
+    return columns.map((column, i) => {
+      if (column.footer === undefined || column.footer === null) {
+        return false;
+      }
 
-  const childrens = columns.map((column, i) => {
-    if (column.footer === undefined || column.footer === null) {
-      return false;
-    }
+      const columnData = _.pluck(data, column.dataField);
 
-    const columnData = _.pluck(data, column.dataField);
-
-    return (
-      <FooterCell
-        index={ i }
-        key={ column.dataField }
-        column={ column }
-        columnData={ columnData }
-      />
-    );
-  });
-
-  if (selectRow && selectRow.hideSelectColumn !== true) {
-    if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
-      childrens.unshift(<SelectionFooterCellComp key="selection" />);
-    } else {
-      childrens.push(<SelectionFooterCellComp key="selection" />);
-    }
-  }
-
-  if (expandRow.showExpandColumn) {
-    if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
-      childrens.unshift(<ExpansionFooterCellComp key="expansion" />);
-    } else {
-      childrens.push(<ExpansionFooterCellComp key="expansion" />);
-    }
+      return (
+        <FooterCell
+          index={ i }
+          key={ column.dataField }
+          column={ column }
+          columnData={ columnData }
+        />
+      );
+    });
   }
 
   return (
     <tfoot>
-      <tr className={ className }>
-        { childrens }
-      </tr>
+      <RowTemplate
+        renderContent={ renderContent }
+        selectRow={ selectRow }
+        expandRow={ expandRow }
+        className={ className }
+        cellEl="th"
+      />
     </tfoot>
   );
 };

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

@@ -22,7 +22,8 @@ class HeaderCell extends eventDelegater(React.Component) {
       onFilter,
       currFilters,
       filterPosition,
-      onExternalFilter
+      onExternalFilter,
+      globalSortCaret
     } = this.props;
 
     const {
@@ -42,6 +43,8 @@ class HeaderCell extends eventDelegater(React.Component) {
       headerSortingStyle
     } = column;
 
+    const sortCaretfunc = sortCaret || globalSortCaret;
+
     const delegateEvents = this.delegate(headerEvents);
 
     const customAttrs = _.isFunction(headerAttrs)
@@ -81,7 +84,9 @@ class HeaderCell extends eventDelegater(React.Component) {
       cellAttrs.className = cs(cellAttrs.className, 'sortable');
 
       if (sorting) {
-        sortSymbol = sortCaret ? sortCaret(sortOrder, column) : <SortCaret order={ sortOrder } />;
+        sortSymbol = sortCaretfunc ?
+          sortCaretfunc(sortOrder, column) :
+          <SortCaret order={ sortOrder } />;
 
         // append customized classes or style if table was sorting based on the current column.
         cellClasses = cs(
@@ -98,7 +103,7 @@ class HeaderCell extends eventDelegater(React.Component) {
             : headerSortingStyle
         };
       } else {
-        sortSymbol = sortCaret ? sortCaret(undefined, column) : <SortSymbol />;
+        sortSymbol = sortCaretfunc ? sortCaretfunc(undefined, column) : <SortSymbol />;
       }
     }
 

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

@@ -21,7 +21,8 @@ const Header = (props) => {
     expandRow,
     currFilters,
     onExternalFilter,
-    filterPosition
+    filterPosition,
+    globalSortCaret
   } = props;
 
   let SelectionHeaderCellComp = () => null;
@@ -52,6 +53,7 @@ const Header = (props) => {
           onSort={ onSort }
           sorting={ currSort }
           sortOrder={ sortOrder }
+          globalSortCaret={ globalSortCaret }
           isLastSorting={ isLastSorting }
           onFilter={ onFilter }
           currFilters={ currFilters }
@@ -95,6 +97,7 @@ Header.propTypes = {
   selectRow: PropTypes.object,
   currFilters: PropTypes.object,
   onExternalFilter: PropTypes.func,
+  globalSortCaret: PropTypes.func,
   className: PropTypes.string,
   expandRow: PropTypes.object,
   filterPosition: PropTypes.oneOf([

packages/react-bootstrap-table2/src/props-resolver/column-resolver.js

@@ -1,7 +1,13 @@
 export default ExtendBase =>
   class ColumnResolver extends ExtendBase {
     visibleColumnSize(includeSelectColumn = true) {
-      let columnLen = this.props.columns.filter(c => !c.hidden).length;
+      let columnLen;
+      if (this.props.columnToggle && this.props.columnToggle.toggles) {
+        const columns = this.props.columnToggle.toggles;
+        columnLen = Object.keys(columns).filter(name => columns[name]).length;
+      } else {
+        columnLen = this.props.columns.filter(c => !c.hidden).length;
+      }
       if (!includeSelectColumn) return columnLen;
       if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) {
         columnLen += 1;

packages/react-bootstrap-table2/src/row-expand/expand-cell.js

@@ -44,7 +44,7 @@ export default class ExpandCell extends Component {
     if (tabIndex !== -1) attrs.tabIndex = tabIndex;
 
     return (
-      <td onClick={ this.handleClick } { ...attrs }>
+      <td className="expand-cell" onClick={ this.handleClick } { ...attrs }>
         {
           expandColumnRenderer ? expandColumnRenderer({
             expandable,

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

@@ -28,7 +28,7 @@ export default class ExpansionHeaderCell extends Component {
     };
 
     return (
-      <th data-row-selection { ...attrs }>
+      <th className="expand-cell-header" data-row-selection { ...attrs }>
         {
           expandHeaderColumnRenderer ?
             expandHeaderColumnRenderer({ isAnyExpands }) :

packages/react-bootstrap-table2/src/row-selection/row-consumer.js

@@ -9,6 +9,7 @@ export default (Component) => {
     const key = props.value;
     const selected = _.contains(selectRow.selected, key);
     const selectable = !selectRow.nonSelectable || !_.contains(selectRow.nonSelectable, key);
+    const notSelectable = _.contains(selectRow.nonSelectable, key);
 
     let {
       style,
@@ -38,6 +39,22 @@ export default (Component) => {
       }
     }
 
+    if (notSelectable) {
+      const notSelectableStyle = _.isFunction(selectRow.nonSelectableStyle)
+        ? selectRow.nonSelectableStyle(props.row, props.rowIndex)
+        : selectRow.nonSelectableStyle;
+
+      const notSelectableClasses = _.isFunction(selectRow.nonSelectableClasses)
+        ? selectRow.nonSelectableClasses(props.row, props.rowIndex)
+        : selectRow.nonSelectableClasses;
+
+      style = {
+        ...style,
+        ...notSelectableStyle
+      };
+      className = cs(className, notSelectableClasses) || undefined;
+    }
+
     return (
       <Component
         { ...props }

packages/react-bootstrap-table2/src/row-selection/selection-cell.js

@@ -86,7 +86,7 @@ export default class SelectionCell extends Component {
       <BootstrapContext.Consumer>
         {
           ({ bootstrap4 }) => (
-            <td onClick={ this.handleClick } { ...attrs }>
+            <td className="selection-cell" onClick={ this.handleClick } { ...attrs }>
               {
                 selectionRenderer ? selectionRenderer({
                   mode: inputType,

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

@@ -112,7 +112,7 @@ export default class SelectionHeaderCell extends Component {
               );
             }
             return (
-              <th data-row-selection { ...attrs }>{ content }</th>
+              <th className="selection-cell-header" data-row-selection { ...attrs }>{ content }</th>
             );
           }
         }

packages/react-bootstrap-table2/src/row/row-template.js

@@ -0,0 +1,48 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Const from '../const';
+
+const RowTemplate = (props) => {
+  const {
+    renderContent,
+    selectRow,
+    expandRow,
+    cellEl,
+    ...rest
+  } = props;
+
+  const isRenderFunctionColumnInLeft = (
+    position = Const.INDICATOR_POSITION_LEFT
+  ) => position === Const.INDICATOR_POSITION_LEFT;
+
+  const childrens = renderContent() || [];
+
+  if (selectRow && selectRow.hideSelectColumn !== true) {
+    if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
+      childrens.unshift(React.createElement(cellEl, { key: 'selection' }));
+    } else {
+      childrens.push(React.createElement(cellEl, { key: 'selection' }));
+    }
+  }
+
+  if (expandRow.showExpandColumn) {
+    if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
+      childrens.unshift(React.createElement(cellEl, { key: 'expansion' }));
+    } else {
+      childrens.push(React.createElement(cellEl, { key: 'expansion' }));
+    }
+  }
+
+  return <tr { ...rest }>{ childrens }</tr>;
+};
+
+RowTemplate.propTypes = {
+  renderContent: PropTypes.func.isRequired,
+  cellEl: PropTypes.string.isRequired,
+  selectRow: PropTypes.object,
+  expandRow: PropTypes.object
+};
+
+export default RowTemplate;

packages/react-bootstrap-table2/test/footer.test.js

@@ -48,7 +48,7 @@ describe('Footer', () => {
 
   describe('simplest footer', () => {
     beforeEach(() => {
-      wrapper = shallow(
+      wrapper = render(
         <Footer
           data={ data }
           columns={ columns }
@@ -61,7 +61,7 @@ describe('Footer', () => {
     it('should render successfully', () => {
       expect(wrapper.length).toBe(1);
       expect(wrapper.find('tr').length).toBe(1);
-      expect(wrapper.find(FooterCell).length).toBe(columns.length);
+      expect(wrapper.find('th').length).toBe(columns.length);
     });
   });
 
@@ -86,7 +86,7 @@ describe('Footer', () => {
     });
   });
 
-  describe('when selecrRow prop is enable', () => {
+  describe('when selectRow prop is enable', () => {
     beforeEach(() => {
       wrapper = render(
         <Footer

packages/react-bootstrap-table2/test/row-selection/__snapshots__/selection-cell.test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`<SelectionCell /> render should render component correctly 1`] = `
 <td
+  className="selection-cell"
   onClick={[Function]}
 >
   <input

yarn.lock

@@ -4410,7 +4410,6 @@ is-extendable@^0.1.0, is-extendable@^0.1.1:
 is-extendable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
-  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
   dependencies:
     is-plain-object "^2.0.4"
 
@@ -4636,7 +4635,6 @@ isobject@^2.0.0:
 isobject@^3.0.0, isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
@@ -5674,9 +5672,8 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
 
 mixin-deep@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
-  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.0.tgz#47a8732ba97799457c8c1eca28f95132d7e8150a"
   dependencies:
     for-in "^1.0.2"
     is-extendable "^1.0.1"