Merge pull request #525 from react-bootstrap-table/develop

release

docs/columns.md

@@ -7,6 +7,7 @@ Available properties in a column object:
 * [text (**required**)](#text)
 
 #### Optional
+* [isDummyField](#isDummyField)
 * [hidden](#hidden)
 * [formatter](#formatter)
 * [formatExtraData](#formatExtraData)
@@ -84,6 +85,11 @@ dataField: 'address.city'
 ## <a name='text'>column.text (**required**) - [String]</a>
 `text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#headerFormatter)
 
+## <a name='isDummyField'>column.isDummyField - [Bool]</a>
+Sometime, you just want to have a column which is not perform any data but just some action components. In this situation, we suggest you to use `isDummyField`. If column is dummy, the [`column.dataField`](#dataField) can be any string value, cause of it's meaningless.
+
+There's only one different for dummy column than normal column, which is dummy column will compare the whole row value instead of cell value when call `shouldComponentUpdate`.
+
 ## <a name='hidden'>column.hidden - [Bool]</a>
 `hidden` allow you to hide column when `true` given.
 

packages/react-bootstrap-table2-editor/src/checkbox-editor.js

@@ -13,7 +13,9 @@ class CheckBoxEditor extends Component {
   }
 
   componentDidMount() {
+    const { didMount } = this.props;
     this.checkbox.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -28,7 +30,7 @@ class CheckBoxEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('editor edit-chseckbox checkbox', className);
     return (
       <input
@@ -50,12 +52,14 @@ CheckBoxEditor.propTypes = {
   ]),
   value: PropTypes.string,
   defaultValue: PropTypes.any,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  didMount: PropTypes.func
 };
 CheckBoxEditor.defaultProps = {
   className: '',
   value: 'on:off',
   defaultValue: false,
-  onChange: undefined
+  onChange: undefined,
+  didMount: undefined
 };
 export default CheckBoxEditor;

packages/react-bootstrap-table2-editor/src/context.js

@@ -23,6 +23,7 @@ export default (
         blurToSave: PropTypes.bool,
         beforeSaveCell: PropTypes.func,
         afterSaveCell: PropTypes.func,
+        onStartEdit: PropTypes.func,
         nonEditableRows: PropTypes.func,
         timeToCloseMessage: PropTypes.number,
         errorMessage: PropTypes.any
@@ -31,7 +32,7 @@ export default (
 
     constructor(props) {
       super(props);
-      EditingCell = props.cellEdit.editingCellFactory(_);
+      EditingCell = props.cellEdit.editingCellFactory(_, props.cellEdit.options.onStartEdit);
       this.startEditing = this.startEditing.bind(this);
       this.escapeEditing = this.escapeEditing.bind(this);
       this.completeEditing = this.completeEditing.bind(this);

packages/react-bootstrap-table2-editor/src/date-editor.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class DateEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.date.valueAsDate = new Date(defaultValue);
     this.date.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class DateEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-date', className);
     return (
       <input
@@ -33,10 +34,12 @@ DateEditor.propTypes = {
     PropTypes.string,
     PropTypes.object
   ]),
-  defaultValue: PropTypes.string
+  defaultValue: PropTypes.string,
+  didMount: PropTypes.func
 };
 DateEditor.defaultProps = {
   className: '',
-  defaultValue: ''
+  defaultValue: '',
+  didMount: undefined
 };
 export default DateEditor;

packages/react-bootstrap-table2-editor/src/dropdown-editor.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class DropDownEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.select.value = defaultValue;
     this.select.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class DropDownEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, options, ...rest } = this.props;
+    const { defaultValue, didMount, className, options, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-select', className);
 
     const attr = {
@@ -51,11 +52,13 @@ DropDownEditor.propTypes = {
       label: PropTypes.string,
       value: PropTypes.any
     }))
-  ]).isRequired
+  ]).isRequired,
+  didMount: PropTypes.func
 };
 DropDownEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  style: {}
+  style: {},
+  didMount: undefined
 };
 export default DropDownEditor;

packages/react-bootstrap-table2-editor/src/editing-cell.js

@@ -14,7 +14,7 @@ import TextEditor from './text-editor';
 import EditorIndicator from './editor-indicator';
 import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
 
-export default _ =>
+export default (_, onStartEdit) =>
   class EditingCell extends Component {
     static propTypes = {
       row: PropTypes.object.isRequired,
@@ -151,6 +151,10 @@ export default _ =>
         onBlur: this.handleBlur
       };
 
+      if (onStartEdit) {
+        editorProps.didMount = () => onStartEdit(row, column, rowIndex, columnIndex);
+      }
+
       const isDefaultEditorDefined = _.isObject(column.editor);
 
       if (isDefaultEditorDefined) {

packages/react-bootstrap-table2-editor/src/text-editor.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class TextEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class TextEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-text', className);
     return (
       <input
@@ -36,10 +37,12 @@ TextEditor.propTypes = {
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
-  ])
+  ]),
+  didMount: PropTypes.func
 };
 TextEditor.defaultProps = {
   className: null,
-  defaultValue: ''
+  defaultValue: '',
+  didMount: undefined
 };
 export default TextEditor;

packages/react-bootstrap-table2-editor/src/textarea-editor.js

@@ -10,9 +10,10 @@ class TextAreaEditor extends Component {
   }
 
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -27,7 +28,7 @@ class TextAreaEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-textarea', className);
     return (
       <textarea
@@ -50,11 +51,13 @@ TextAreaEditor.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
-  onKeyDown: PropTypes.func
+  onKeyDown: PropTypes.func,
+  didMount: PropTypes.func
 };
 TextAreaEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  onKeyDown: undefined
+  onKeyDown: undefined,
+  didMount: undefined
 };
 export default TextAreaEditor;

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js

@@ -41,6 +41,7 @@ const columns = [{
   columns={ columns }
   cellEdit={ cellEditFactory({
     mode: 'click',
+    onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('start to edit!!!'); },
     beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
     afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
   }) }
@@ -55,6 +56,7 @@ export default () => (
       columns={ columns }
       cellEdit={ cellEditFactory({
         mode: 'click',
+        onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('Start to edit!!!'); },
         beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
         afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
       }) }

packages/react-bootstrap-table2-example/examples/cell-edit/checkbox-editor-table.js

@@ -52,7 +52,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Checkbox Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ todos }

packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js

@@ -118,7 +118,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Custom Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ products }

packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js

@@ -65,7 +65,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Date Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ stocks }

packages/react-bootstrap-table2-example/examples/cell-edit/textarea-editor-table.js

@@ -56,7 +56,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Textarea Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ jobs }

packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js

@@ -0,0 +1,221 @@
+/* eslint jsx-a11y/label-has-for: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+
+
+const products = [
+  { id: 12, name: 'Item 12', price: 12.5, inStock: false },
+  { id: 13, name: 'Item 13', price: 13.5, inStock: true },
+  { id: 14, name: 'Item 14', price: 14.5, inStock: true }
+];
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price'
+  },
+  {
+    dataField: 'inStock',
+    text: 'In Stock',
+    formatter: (cellContent, row) => (
+      <div className="checkbox disabled">
+        <label>
+          <input type="checkbox" checked={ row.inStock } disabled />
+        </label>
+      </div>
+    )
+  },
+  {
+    dataField: 'df1',
+    isDummyField: true,
+    text: 'Action 1',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  },
+  {
+    dataField: 'df2',
+    isDummyField: true,
+    text: 'Action 2',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  }
+];
+
+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'
+  },
+  {
+    dataField: 'inStock',
+    text: 'In Stock',
+    formatter: (cellContent, row) => (
+      <div className="checkbox disabled">
+        <label>
+          <input type="checkbox" checked={ row.inStock } disabled />
+        </label>
+      </div>
+    )
+  },
+  {
+    dataField: 'df1',
+    isDummyField: true,
+    text: 'Action 1',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  },
+  {
+    dataField: 'df2',
+    isDummyField: true,
+    text: 'Action 2',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  }
+];
+
+class ProductList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { products };
+  }
+
+  toggleInStock = () => {
+    let newProducts = [...this.state.products];
+    newProducts = newProducts.map((d) => {
+      if (d.id === 13) {
+        return {
+          ...d,
+          inStock: !d.inStock
+        };
+      }
+      return d;
+    });
+    this.setState(curr => ({ ...curr, products: newProducts }));
+  };
+
+  render() {
+    return (
+      <div>
+        <h1 className="h2">Products</h1>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.products }
+          columns={ columns }
+        />
+        <button onClick={ this.toggleInStock } className="btn btn-primary">
+          Toggle item 13 stock status
+        </button>
+      </div>
+    );
+  }
+}
+`;
+
+class ProductList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { products };
+  }
+
+  toggleInStock = () => {
+    let newProducts = [...this.state.products];
+    newProducts = newProducts.map((d) => {
+      if (d.id === 13) {
+        return {
+          ...d,
+          inStock: !d.inStock
+        };
+      }
+      return d;
+    });
+    this.setState(curr => ({ ...curr, products: newProducts }));
+  };
+
+  render() {
+    return (
+      <div>
+        <h3>Action 1 and Action 2 are dummy column</h3>
+        <button onClick={ this.toggleInStock } className="btn btn-primary">
+          Toggle item 13 stock status
+        </button>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.products }
+          columns={ columns }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+
+export default ProductList;

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

@@ -0,0 +1,98 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+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';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const MyExportCSV = (props) => {
+  const handleClick = () => {
+    props.onExport();
+  };
+  return (
+    <div>
+      <button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
+    </div>
+  );
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV
+>
+  {
+    props => (
+      <div>
+        <BootstrapTable { ...props.baseProps } />
+        <hr />
+        <MyExportCSV { ...props.csvProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const MyExportCSV = (props) => {
+  const handleClick = () => {
+    // passing my custom data
+    props.onExport(products.filter(r => r.id > 2));
+  };
+  return (
+    <div>
+      <button className="btn btn-success" onClick={ handleClick }>Only export Product ID bigger than 2</button>
+    </div>
+  );
+};
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV
+    >
+      {
+        props => (
+          <div>
+            <BootstrapTable { ...props.baseProps } />
+            <hr />
+            <MyExportCSV { ...props.csvProps } />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,140 @@
+/* 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 paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ExportCSVButton } = CSVExport;
+const products1 = productsGenerator(15);
+const products2 = productsGenerator(15);
+
+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';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products1 }
+  columns={ columns }
+  exportCSV={ { onlyExportSelection: true, exportAll: true } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          selectRow={ selectRow }
+          pagination={ paginationFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+
+<ToolkitProvider
+  keyField="id"
+  data={ products2 }
+  columns={ columns }
+  exportCSV={ { onlyExportSelection: true, exportAll: false } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          selectRow={ selectRow }
+          pagination={ paginationFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+export default () => (
+  <div>
+    <h3>Export all selected row</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products1 }
+      columns={ columns }
+      exportCSV={ { onlyExportSelection: true, exportAll: true } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              selectRow={ selectRow }
+              pagination={ paginationFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <h3>Export all selected rows in currect visible rows</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products2 }
+      columns={ columns }
+      exportCSV={ { onlyExportSelection: true, exportAll: false } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              selectRow={ selectRow }
+              pagination={ paginationFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -15,7 +15,7 @@
   "peerDependencies": {
     "prop-types": "^15.0.0",
     "react": "^16.3.0",
-    "react-dom": "^116.3.0"
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
     "@storybook/addon-console": "^1.0.0",

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

@@ -30,6 +30,7 @@ import ColumnTitleTable from 'examples/columns/column-title-table';
 import ColumnEventTable from 'examples/columns/column-event-table';
 import ColumnHiddenTable from 'examples/columns/column-hidden-table';
 import ColumnAttrsTable from 'examples/columns/column-attrs-table';
+import DummyColumnTable from 'examples/columns/dummy-column-table';
 
 // work on header columns
 import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -145,8 +146,10 @@ import ExportCSV from 'examples/csv';
 import CSVFormatter from 'examples/csv/csv-column-formatter';
 import CustomCSVHeader from 'examples/csv/custom-csv-header';
 import HideCSVColumn from 'examples/csv/hide-column';
+import ExportOnlySelected from 'examples/csv/export-only-selected';
 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';
 
 // loading overlay
@@ -201,7 +204,8 @@ storiesOf('Work on Columns', module)
   .add('Column Event', () => <ColumnEventTable />)
   .add('Customize Column Class', () => <ColumnClassTable />)
   .add('Customize Column Style', () => <ColumnStyleTable />)
-  .add('Customize Column HTML attribute', () => <ColumnAttrsTable />);
+  .add('Customize Column HTML attribute', () => <ColumnAttrsTable />)
+  .add('Dummy Column', () => <DummyColumnTable />);
 
 storiesOf('Work on Header Columns', module)
   .addDecorator(bootstrapStyle())
@@ -328,8 +332,10 @@ storiesOf('Export CSV', module)
   .add('Format CSV Column', () => <CSVFormatter />)
   .add('Custom CSV Header', () => <CustomCSVHeader />)
   .add('Hide CSV Column', () => <HideCSVColumn />)
+  .add('Only Export Selected Rows', () => <ExportOnlySelected />)
   .add('CSV Column Type', () => <CSVColumnType />)
   .add('Custom CSV Button', () => <CustomCSVButton />)
+  .add('Export Custom Data', () => <ExportCustomData />)
   .add('Custom CSV', () => <CustomCSV />);
 
 storiesOf('EmptyTableOverlay', module)

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

@@ -123,4 +123,7 @@ Default is `false`. Give true to avoid to attach the csv header.
 Default is `true`.
 
 #### exportAll - [bool]
-Default is `true`. `false` will only export current data which display on table.
+Default is `true`. `false` will only export current data which display on table.
+
+#### onlyExportSelection - [bool]
+Default is `false`. `true` will only export the data which is selected.

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

@@ -26,7 +26,9 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
         fileName: PropTypes.string,
         separator: PropTypes.string,
         ignoreHeader: PropTypes.bool,
-        noAutoBOM: PropTypes.bool
+        noAutoBOM: PropTypes.bool,
+        exportAll: PropTypes.bool,
+        onlyExportSelection: PropTypes.bool
       })
     ])
   }

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

@@ -11,7 +11,7 @@ const ExportCSVButton = (props) => {
   return (
     <button
       type="button"
-      onClick={ onExport }
+      onClick={ () => onExport() }
       { ...rest }
     >
       { children }

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

@@ -5,13 +5,14 @@ const csvDefaultOptions = {
   separator: ',',
   ignoreHeader: false,
   noAutoBOM: true,
-  exportAll: true
+  exportAll: true,
+  onlyExportSelection: false
 };
 
 export default Base =>
   class CSVOperation extends Base {
-    handleExportCSV = () => {
-      const { columns, exportCSV } = this.props;
+    handleExportCSV = (source) => {
+      const { columns, exportCSV, keyField } = this.props;
       const meta = getMetaInfo(columns);
       const options = exportCSV === true ?
         csvDefaultOptions :
@@ -20,7 +21,19 @@ export default Base =>
           ...exportCSV
         };
 
-      const data = options.exportAll ? this.props.data : this.getData();
+      // get data for csv export
+      let data;
+      if (typeof source !== 'undefined') {
+        data = source;
+      } else {
+        data = options.exportAll ? this.props.data : this.getData();
+      }
+
+      // filter data
+      if (options.onlyExportSelection) {
+        const selections = this.getSelected();
+        data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
+      }
       const content = transform(data, meta, this._.get, options);
       save(content, options);
     }

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

@@ -11,9 +11,18 @@ class Cell extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    const shouldUpdate =
-      _.get(this.props.row, this.props.column.dataField)
-        !== _.get(nextProps.row, nextProps.column.dataField) ||
+    let shouldUpdate = false;
+    if (nextProps.column.isDummyField) {
+      shouldUpdate = !_.isEqual(this.props.row, nextProps.row);
+    } else {
+      shouldUpdate =
+        _.get(this.props.row, this.props.column.dataField)
+          !== _.get(nextProps.row, nextProps.column.dataField);
+    }
+
+    if (shouldUpdate) return true;
+
+    shouldUpdate =
       this.props.column.hidden !== nextProps.column.hidden ||
       this.props.rowIndex !== nextProps.rowIndex ||
       this.props.columnIndex !== nextProps.columnIndex ||
@@ -64,7 +73,7 @@ class Cell extends Component {
       formatExtraData
     } = column;
     const attrs = { ...rest };
-    let content = _.get(row, dataField);
+    let content = column.isDummyField ? null : _.get(row, dataField);
 
     if (formatter) {
       content = column.formatter(content, row, rowIndex, formatExtraData);

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

@@ -269,8 +269,9 @@ const withContext = Base =>
     }
 
     render() {
-      const { keyField, columns, bootstrap4 } = this.props;
+      const { keyField, columns, bootstrap4, registerExposedAPI } = this.props;
       const baseProps = { keyField, columns };
+      if (registerExposedAPI) baseProps.registerExposedAPI = registerExposedAPI;
 
       let base = this.renderBase();
 

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

@@ -15,6 +15,14 @@ export default (
       keyField: PropTypes.string.isRequired
     }
 
+    constructor(props) {
+      super(props);
+      if (props.registerExposedAPI) {
+        const getSelected = () => this.getSelected();
+        props.registerExposedAPI(getSelected);
+      }
+    }
+
     state = { selected: (this.props.selectRow && this.props.selectRow.selected) || [] };
 
     componentWillReceiveProps(nextProps) {
@@ -25,6 +33,11 @@ export default (
       }
     }
 
+    // exposed API
+    getSelected() {
+      return this.state.selected;
+    }
+
     handleRowSelect = (rowKey, checked, rowIndex, e) => {
       const { data, keyField, selectRow: { mode, onSelect } } = this.props;
       const { ROW_SELECT_SINGLE } = Const;

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

@@ -114,6 +114,7 @@ HeaderCell.propTypes = {
   column: PropTypes.shape({
     dataField: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
+    isDummyField: PropTypes.bool,
     hidden: PropTypes.bool,
     headerFormatter: PropTypes.func,
     formatter: PropTypes.func,

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

@@ -177,22 +177,45 @@ describe('Cell', () => {
     let props;
     let nextProps;
 
-    describe('when content is change', () => {
-      const column = { dataField: 'name', text: 'Product Name' };
-      beforeEach(() => {
-        props = {
-          row,
-          columnIndex: 1,
-          rowIndex: 1,
-          column
-        };
-        wrapper = shallow(
-          <Cell { ...props } />);
-      });
+    describe('if column.isDummyField is false', () => {
+      describe('when content is change', () => {
+        const column = { dataField: 'name', text: 'Product Name' };
+        beforeEach(() => {
+          props = {
+            row,
+            columnIndex: 1,
+            rowIndex: 1,
+            column
+          };
+          wrapper = shallow(
+            <Cell { ...props } />);
+        });
 
-      it('should return true', () => {
-        nextProps = { ...props, row: { id: 1, name: 'CDE' } };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+        it('should return true', () => {
+          nextProps = { ...props, row: { id: 1, name: 'CDE' } };
+          expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+        });
+      });
+    });
+
+    describe('if column.isDummyField is true', () => {
+      describe('when content is change', () => {
+        const column = { dataField: '', text: 'Product Name', isDummyField: true };
+        beforeEach(() => {
+          props = {
+            row,
+            columnIndex: 1,
+            rowIndex: 1,
+            column
+          };
+          wrapper = shallow(
+            <Cell { ...props } />);
+        });
+
+        it('should return true', () => {
+          nextProps = { ...props, row: { id: 1, name: 'CDE', test: 'This is new Field' } };
+          expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+        });
       });
     });