diff --git a/packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js b/packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js
new file mode 100644
index 0000000..10b6948
--- /dev/null
+++ b/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) => (
+
+
+
+ )
+ },
+ {
+ dataField: 'df1',
+ isDummyField: true,
+ text: 'Action 1',
+ formatter: (cellContent, row) => {
+ if (row.inStock) {
+ return (
+
+ Available
+
+ );
+ }
+ return (
+
+ Backordered
+
+ );
+ }
+ },
+ {
+ dataField: 'df2',
+ isDummyField: true,
+ text: 'Action 2',
+ formatter: (cellContent, row) => {
+ if (row.inStock) {
+ return (
+
+ Available
+
+ );
+ }
+ return (
+
+ Backordered
+
+ );
+ }
+ }
+];
+
+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) => (
+
+
+
+ )
+ },
+ {
+ dataField: 'df1',
+ isDummyField: true,
+ text: 'Action 1',
+ formatter: (cellContent, row) => {
+ if (row.inStock) {
+ return (
+
+ Available
+
+ );
+ }
+ return (
+
+ Backordered
+
+ );
+ }
+ },
+ {
+ dataField: 'df2',
+ isDummyField: true,
+ text: 'Action 2',
+ formatter: (cellContent, row) => {
+ if (row.inStock) {
+ return (
+
+ Available
+
+ );
+ }
+ return (
+
+ Backordered
+
+ );
+ }
+ }
+];
+
+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 (
+
+
Products
+
+
+
+ );
+ }
+}
+`;
+
+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 (
+
+
Action 1 and Action 2 are dummy column
+
+
+ { sourceCode }
+
+ );
+ }
+}
+
+export default ProductList;
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index eff1ee0..45fb5cc 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/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';
@@ -201,7 +202,8 @@ storiesOf('Work on Columns', module)
.add('Column Event', () => )
.add('Customize Column Class', () => )
.add('Customize Column Style', () => )
- .add('Customize Column HTML attribute', () => );
+ .add('Customize Column HTML attribute', () => )
+ .add('Dummy Column', () => );
storiesOf('Work on Header Columns', module)
.addDecorator(bootstrapStyle())
diff --git a/packages/react-bootstrap-table2/test/cell.test.js b/packages/react-bootstrap-table2/test/cell.test.js
index 86bf393..e2e42ab 100644
--- a/packages/react-bootstrap-table2/test/cell.test.js
+++ b/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(
- | );
- });
+ 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(
+ | );
+ });
- 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(
+ | );
+ });
+
+ it('should return true', () => {
+ nextProps = { ...props, row: { id: 1, name: 'CDE', test: 'This is new Field' } };
+ expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+ });
});
});