From 6f45ae7886eb13488930ca6dc9eeb93fff66cf20 Mon Sep 17 00:00:00 2001
From: Allen <ayu780129@hotmail.com>
Date: Sat, 2 Sep 2017 02:36:26 -0500
Subject: [PATCH] fix #31

* implement column.hidden

* add story for column.hidden

* add docs for column.hidden
---
 docs/columns.md                               |  4 ++
 .../examples/columns/column-hidden-table.js   | 50 +++++++++++++++++++
 .../stories/index.js                          |  2 +
 packages/react-bootstrap-table2/src/cell.js   |  5 ++
 .../react-bootstrap-table2/src/header-cell.js |  5 ++
 .../react-bootstrap-table2/test/cell.test.js  | 18 +++++++
 .../test/header-cell.test.js                  | 18 +++++++
 7 files changed, 102 insertions(+)
 create mode 100644 packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js

diff --git a/docs/columns.md b/docs/columns.md
index 1a28af7..281221a 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -4,6 +4,7 @@ Available properties in a column object:
 
 * [dataField (**required**)](#dataField)
 * [text (**required**)](#text)
+* [hidden](#hidden)
 * [formatter](#formatter)
 * [headerFormatter](#headerFormatter)
 * [formatExtraData](#formatExtraData)
@@ -57,6 +58,9 @@ dataField: 'address.city'
 ## <a name='text'>column.text (**required**) - [String]</a>
 `text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter)
 
+## <a name='hidden'>column.hidden - [Bool]</a>
+`hidden` allow you to hide column when `true` given.
+
 ## <a name='formatter'>column.formatter - [Function]</a>
 `formatter` allow you to customize the table column and only accept a callback function which take four arguments and a JSX/String are expected for return.
 
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
new file mode 100644
index 0000000..37d3519
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
@@ -0,0 +1,50 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import { BootstrapTable } from 'react-bootstrap-table2';
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i += 1) {
+    const id = startId + i;
+    products.push({
+      id,
+      name: `Item name ${id}`,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(5);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  hidden: true
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <pre className="prettyprint lang-js"><code className="language-javascript">{`
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  hidden: true
+},
+// omit...
+];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+    `}
+    </code></pre>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index a0ea9d0..45f5309 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -18,6 +18,7 @@ import ColumnStyleTable from 'examples/columns/column-style-table';
 import ColumnAlignTable from 'examples/columns/column-align-table';
 import ColumnTitleTable from 'examples/columns/column-title-table';
 import ColumnEventTable from 'examples/columns/column-event-table';
+import ColumnHiddenTable from 'examples/columns/column-hidden-table';
 
 // work on header columns
 import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -46,6 +47,7 @@ storiesOf('Work on Columns', module)
   .add('Column Formatter with Custom Data', () => <ColumnFormatExtraDataTable />)
   .add('Column Align', () => <ColumnAlignTable />)
   .add('Column Title', () => <ColumnTitleTable />)
+  .add('Column Hidden', () => <ColumnHiddenTable />)
   .add('Column Event', () => <ColumnEventTable />)
   .add('Customize Column Class', () => <ColumnClassTable />)
   .add('Customize Column Style', () => <ColumnStyleTable />);
diff --git a/packages/react-bootstrap-table2/src/cell.js b/packages/react-bootstrap-table2/src/cell.js
index 844e501..8f590f5 100644
--- a/packages/react-bootstrap-table2/src/cell.js
+++ b/packages/react-bootstrap-table2/src/cell.js
@@ -6,6 +6,7 @@ import _ from './utils';
 const Cell = ({ row, rowIndex, column, columnIndex }) => {
   const {
     dataField,
+    hidden,
     formatter,
     formatExtraData,
     style,
@@ -43,6 +44,10 @@ const Cell = ({ row, rowIndex, column, columnIndex }) => {
   attrs.style = cellStyle;
   attrs.className = cellClasses;
 
+  if (hidden) {
+    attrs.style.display = 'none';
+  }
+
   return (
     <td { ...attrs }>{ content }</td>
   );
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 3f1e7b8..036366b 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -7,6 +7,7 @@ import _ from './utils';
 const HeaderCell = ({ column, index }) => {
   const {
     text,
+    hidden,
     headerTitle,
     headerAlign,
     headerFormatter,
@@ -28,6 +29,9 @@ const HeaderCell = ({ column, index }) => {
 
   attrs.style = headerStyle;
 
+  if (hidden) {
+    attrs.style.display = 'none';
+  }
 
   return (
     <th { ...attrs }>
@@ -40,6 +44,7 @@ HeaderCell.propTypes = {
   column: PropTypes.shape({
     dataField: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
+    hidden: PropTypes.bool,
     headerFormatter: PropTypes.func,
     formatter: PropTypes.func,
     formatExtraData: PropTypes.any,
diff --git a/packages/react-bootstrap-table2/test/cell.test.js b/packages/react-bootstrap-table2/test/cell.test.js
index 2a1cd75..aebc348 100644
--- a/packages/react-bootstrap-table2/test/cell.test.js
+++ b/packages/react-bootstrap-table2/test/cell.test.js
@@ -27,6 +27,24 @@ describe('Cell', () => {
     });
   });
 
+  describe('when column.hidden prop is true', () => {
+    const column = {
+      dataField: 'id',
+      text: 'ID',
+      hidden: true
+    };
+
+    beforeEach(() => {
+      wrapper = shallow(<Cell row={ row } columnIndex={ 1 } rowIndex={ 1 } column={ column } />);
+    });
+
+    it('should have \'none\' value for style.display', () => {
+      const style = wrapper.find('td').prop('style');
+      expect(style).toBeDefined();
+      expect(style.display).toEqual('none');
+    });
+  });
+
   describe('when column.formatter prop is defined', () => {
     const rowIndex = 1;
     const column = {
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index 76a2962..019f35b 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -30,6 +30,24 @@ describe('HeaderCell', () => {
     });
   });
 
+  describe('when column.hidden props is true', () => {
+    const column = {
+      dataField: 'id',
+      text: 'ID',
+      hidden: true
+    };
+
+    beforeEach(() => {
+      wrapper = shallow(<HeaderCell column={ column } index={ index } />);
+    });
+
+    it('should have \'none\' value for style.display', () => {
+      const style = wrapper.find('th').prop('style');
+      expect(style).toBeDefined();
+      expect(style.display).toEqual('none');
+    });
+  });
+
   describe('when column.headerTitle prop is defined', () => {
     let column;
     beforeEach(() => {