Allow conditionally specify columns

Fix: #1317
AllenFang · May 13, 2017 · 9b748df · 9b748df
1 parent 47f6e34
commit 9b748df
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
@@ -58,6 +58,10 @@ class BootstrapTable extends Component {
 
     const isKeyFieldDefined = typeof keyField === 'string' && keyField.length;
     React.Children.forEach(props.children, column => {
+      if (column === null || column === undefined) {
+        // Skip null and undefined value
+        return;
+      }
       if (column.props.isKey) {
         if (keyField) {
           throw new Error('Error. Multiple key column be detected in TableHeaderColumn.');
@@ -141,11 +145,21 @@ class BootstrapTable extends Component {
   getColumnsDescription({ children }) {
     let rowCount = 0;
     React.Children.forEach(children, (column) => {
+      if (column === null || column === undefined) {
+        // Skip null and undefined value
+        return;
+      }
+
       if (Number(column.props.row) > rowCount) {
         rowCount = Number(column.props.row);
       }
     });
     return React.Children.map(children, (column, i) => {
+      if (column === null || column === undefined) {
+        // Return null for empty objects
+        return null;
+      }
+
       const rowIndex = column.props.row ? Number(column.props.row) : 0;
       const rowSpan = column.props.rowSpan ? Number(column.props.rowSpan) : 1;
       if ((rowSpan + rowIndex) === (rowCount + 1)) {
@@ -1250,7 +1264,7 @@ class BootstrapTable extends Component {
         }
       }
     } else {
-      React.Children.forEach(this.props.children, (child, i) => {
+      React.Children.forEach(this.props.children.filter(_ => !!_), (child, i) => {
         if (child.props.width) {
           header[i].style.width = `${child.props.width}px`;
           header[i].style.minWidth = `${child.props.width}px`;

diff --git a/src/TableBody.js b/src/TableBody.js
@@ -43,7 +43,7 @@ class TableBody extends Component {
       keyBoardNav.customStyle :
       null;
     const ExpandColumnCustomComponent = this.props.expandColumnOptions.expandColumnComponent;
-    let expandColSpan = this.props.columns.filter(col => !col.hidden).length;
+    let expandColSpan = this.props.columns.filter(col => col && !col.hidden).length;
     if (isSelectRowDefined && !this.props.selectRow.hideSelectColumn) {
       expandColSpan += 1;
     }
@@ -53,7 +53,7 @@ class TableBody extends Component {
     }
 
     let tableRows = this.props.data.map(function(data, r) {
-      const tableColumns = this.props.columns.map(function(column, i) {
+      const tableColumns = this.props.columns.filter(_ => _ != null).map(function(column, i) {
         const fieldValue = data[column.name];
         const isFocusCell = r === y && i === x;
         if (column.name !== this.props.keyField && // Key field can't be edit

diff --git a/src/TableHeader.js b/src/TableHeader.js
@@ -45,7 +45,7 @@ class TableHeader extends Component {
     }, this.props.tableHeaderClass);
 
     const rowCount = Math.max(...React.Children.map(this.props.children, elm =>
-      elm.props.row ? Number(elm.props.row) : 0
+      (elm && elm.props.row) ? Number(elm.props.row) : 0
     ));
 
     const rows = [];
@@ -66,6 +66,10 @@ class TableHeader extends Component {
     const { sortIndicator, sortList, onSort, reset } = this.props;
 
     React.Children.forEach(this.props.children, (elm) => {
+      if (elm === null || elm === undefined) {
+        // Skip null or undefined elements.
+        return;
+      }
       const { dataField, dataSort } = elm.props;
       const sort = getSortOrder(sortList, dataField, dataSort);
       const rowIndex = elm.props.row ? Number(elm.props.row) : 0;