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'
## column.text (**required**) - [String]
`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)
+## column.hidden - [Bool]
+`hidden` allow you to hide column when `true` given.
+
## column.formatter - [Function]
`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 () => (
+
+
+
{`
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ hidden: true
+},
+// omit...
+];
+
+
+ `}
+
+
+);
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', () => )
.add('Column Align', () => )
.add('Column Title', () => )
+ .add('Column Hidden', () => )
.add('Column Event', () => )
.add('Customize Column Class', () => )
.add('Customize Column Style', () => );
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 (
{ content } |
);
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 (
@@ -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( | );
+ });
+
+ 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();
+ });
+
+ 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(() => {
|