fix #31

* implement column.hidden

* add story for column.hidden

* add docs for column.hidden

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.
 

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

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

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

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,

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

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