diff --git a/packages/react-bootstrap-table2/src/cell.js b/packages/react-bootstrap-table2/src/cell.js
index d50eeb4..dc535a7 100644
--- a/packages/react-bootstrap-table2/src/cell.js
+++ b/packages/react-bootstrap-table2/src/cell.js
@@ -39,7 +39,6 @@ class Cell extends Component {
     } = this.props;
     const {
       dataField,
-      hidden,
       formatter,
       formatExtraData,
       style,
@@ -80,10 +79,6 @@ class Cell extends Component {
         _.isFunction(align) ? align(content, row, rowIndex, columnIndex) : align;
     }
 
-    if (hidden) {
-      cellStyle.display = 'none';
-    }
-
     if (cellClasses) cellAttrs.className = cellClasses;
 
     if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index b6af21e..bb012d1 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -24,7 +24,6 @@ const HeaderCell = (props) => {
     text,
     sort,
     filter,
-    hidden,
     headerTitle,
     headerAlign,
     headerFormatter,
@@ -58,10 +57,6 @@ const HeaderCell = (props) => {
     cellStyle.textAlign = _.isFunction(headerAlign) ? headerAlign(column, index) : headerAlign;
   }
 
-  if (hidden) {
-    cellStyle.display = 'none';
-  }
-
   if (sort) {
     const customClick = cellAttrs.onClick;
     cellAttrs.onClick = (e) => {
diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js
index ddbc7bf..38b8c3a 100644
--- a/packages/react-bootstrap-table2/src/header.js
+++ b/packages/react-bootstrap-table2/src/header.js
@@ -27,20 +27,23 @@ const Header = (props) => {
         }
         {
           columns.map((column, i) => {
-            const currSort = column.dataField === sortField;
-            const isLastSorting = column.dataField === sortField;
+            if (!column.hidden) {
+              const currSort = column.dataField === sortField;
+              const isLastSorting = column.dataField === sortField;
 
-            return (
-              <HeaderCell
-                index={ i }
-                key={ column.dataField }
-                column={ column }
-                onSort={ onSort }
-                sorting={ currSort }
-                onFilter={ onFilter }
-                sortOrder={ sortOrder }
-                isLastSorting={ isLastSorting }
-              />);
+              return (
+                <HeaderCell
+                  index={ i }
+                  key={ column.dataField }
+                  column={ column }
+                  onSort={ onSort }
+                  sorting={ currSort }
+                  onFilter={ onFilter }
+                  sortOrder={ sortOrder }
+                  isLastSorting={ isLastSorting }
+                />);
+            }
+            return false;
           })
         }
       </tr>
diff --git a/packages/react-bootstrap-table2/src/row.js b/packages/react-bootstrap-table2/src/row.js
index 7b1df37..3efb0c5 100644
--- a/packages/react-bootstrap-table2/src/row.js
+++ b/packages/react-bootstrap-table2/src/row.js
@@ -58,46 +58,49 @@ class Row extends eventDelegater(Component) {
         }
         {
           columns.map((column, index) => {
-            const { dataField } = column;
-            const content = _.get(row, dataField);
-            let editable = _.isDefined(column.editable) ? column.editable : true;
-            if (dataField === keyField || !editableRow) editable = false;
-            if (_.isFunction(column.editable)) {
-              editable = column.editable(content, row, rowIndex, index);
-            }
-            if (rowIndex === editingRowIdx && index === editingColIdx) {
-              let editCellstyle = column.editCellStyle || {};
-              let editCellclasses = column.editCellClasses;
-              if (_.isFunction(column.editCellStyle)) {
-                editCellstyle = column.editCellStyle(content, row, rowIndex, index);
+            if (!column.hidden) {
+              const { dataField } = column;
+              const content = _.get(row, dataField);
+              let editable = _.isDefined(column.editable) ? column.editable : true;
+              if (dataField === keyField || !editableRow) editable = false;
+              if (_.isFunction(column.editable)) {
+                editable = column.editable(content, row, rowIndex, index);
               }
-              if (_.isFunction(column.editCellClasses)) {
-                editCellclasses = column.editCellClasses(content, row, rowIndex, index);
+              if (rowIndex === editingRowIdx && index === editingColIdx) {
+                let editCellstyle = column.editCellStyle || {};
+                let editCellclasses = column.editCellClasses;
+                if (_.isFunction(column.editCellStyle)) {
+                  editCellstyle = column.editCellStyle(content, row, rowIndex, index);
+                }
+                if (_.isFunction(column.editCellClasses)) {
+                  editCellclasses = column.editCellClasses(content, row, rowIndex, index);
+                }
+                return (
+                  <EditingCell
+                    key={ `${content}-${index}` }
+                    row={ row }
+                    column={ column }
+                    className={ editCellclasses }
+                    style={ editCellstyle }
+                    { ...rest }
+                  />
+                );
               }
               return (
-                <EditingCell
+                <Cell
                   key={ `${content}-${index}` }
                   row={ row }
+                  rowIndex={ rowIndex }
+                  columnIndex={ index }
                   column={ column }
-                  className={ editCellclasses }
-                  style={ editCellstyle }
-                  { ...rest }
+                  onStart={ onStart }
+                  editable={ editable }
+                  clickToEdit={ mode === CLICK_TO_CELL_EDIT }
+                  dbclickToEdit={ mode === DBCLICK_TO_CELL_EDIT }
                 />
               );
             }
-            return (
-              <Cell
-                key={ `${content}-${index}` }
-                row={ row }
-                rowIndex={ rowIndex }
-                columnIndex={ index }
-                column={ column }
-                onStart={ onStart }
-                editable={ editable }
-                clickToEdit={ mode === CLICK_TO_CELL_EDIT }
-                dbclickToEdit={ mode === DBCLICK_TO_CELL_EDIT }
-              />
-            );
+            return false;
           })
         }
       </tr>
diff --git a/packages/react-bootstrap-table2/test/cell.test.js b/packages/react-bootstrap-table2/test/cell.test.js
index b83bcc9..439a638 100644
--- a/packages/react-bootstrap-table2/test/cell.test.js
+++ b/packages/react-bootstrap-table2/test/cell.test.js
@@ -27,24 +27,6 @@ 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 = {
@@ -390,20 +372,6 @@ describe('Cell', () => {
         });
       });
 
-      describe('when column.hidden prop is defined', () => {
-        it('attrs.style.hidden should be overwrited', () => {
-          column.hidden = true;
-          column.attrs = { style: { hidden: true } };
-
-          wrapper = shallow(
-            <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
-
-          const style = wrapper.find('td').prop('style');
-          expect(style).toBeDefined();
-          expect(style.display).toEqual('none');
-        });
-      });
-
       describe('when column.align prop is defined', () => {
         it('attrs.style.textAlign should be overwrited', () => {
           column.align = 'center';
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index 5983964..535d222 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -33,24 +33,6 @@ 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(() => {
diff --git a/packages/react-bootstrap-table2/test/header.test.js b/packages/react-bootstrap-table2/test/header.test.js
index 8ae604b..c502602 100644
--- a/packages/react-bootstrap-table2/test/header.test.js
+++ b/packages/react-bootstrap-table2/test/header.test.js
@@ -101,6 +101,29 @@ describe('Header', () => {
       });
     });
 
+    describe('when column.hidden is true', () => {
+      beforeEach(() => {
+        const newColumns = [{
+          dataField: 'id',
+          text: 'ID',
+          hidden: true
+        }, {
+          dataField: 'name',
+          text: 'Name'
+        }];
+        wrapper = shallow(
+          <Header
+            { ...mockHeaderResolvedProps }
+            columns={ newColumns }
+          />
+        );
+      });
+
+      it('should not render column with hidden value true', () => {
+        expect(wrapper.find(HeaderCell).length).toBe(1);
+      });
+    });
+
     describe('when selectRow.mode is checkbox (multiple selection)', () => {
       beforeEach(() => {
         const selectRow = { mode: 'checkbox' };
diff --git a/packages/react-bootstrap-table2/test/row.test.js b/packages/react-bootstrap-table2/test/row.test.js
index 02cc068..117a24f 100644
--- a/packages/react-bootstrap-table2/test/row.test.js
+++ b/packages/react-bootstrap-table2/test/row.test.js
@@ -502,6 +502,32 @@ describe('Row', () => {
     });
   });
 
+  describe('when cloumn.hidden is true', () => {
+    beforeEach(() => {
+      const newColumns = [{
+        dataField: 'id',
+        text: 'ID',
+        hidden: true
+      }, {
+        dataField: 'name',
+        text: 'Name'
+      }, {
+        dataField: 'price',
+        text: 'Price'
+      }];
+      wrapper = shallow(
+        <Row
+          { ...mockBodyResolvedProps }
+          rowIndex={ rowIndex }
+          columns={ newColumns }
+          row={ row }
+        />);
+    });
+
+    it('should not render column with hidden value true', () => {
+      expect(wrapper.find(Cell).length).toBe(2);
+    });
+  });
 
   describe('selectRow', () => {
     let selectRow;