Merge pull request react-bootstrap-table#1246 from react-bootstrap-table/develop

20200209 release

Author: AllenFang

docs/README.md

@@ -21,6 +21,7 @@
 * [classes](#classes)
 * [wrapperClasses](#wrapperClasses)
 * [headerClasses](#headerClasses)
+* [headerWrapperClasses](#headerWrapperClasses)
 * [cellEdit](#cellEdit)
 * [selectRow](#selectRow)
 * [expandRow](#expandRow)
@@ -137,6 +138,9 @@ Customize class on the outer element which wrap up the `table` element.
 ### <a name='headerClasses'>headerClasses - [String]</a>
 Customize class on the header row(`tr`). 
 
+### <a name='headerWrapperClasses'>headerWrapperClasses - [String]</a>
+Customize class on the `thead`. 
+
 ### <a name='cellEdit'>cellEdit - [Object]</a>
 Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
 

packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js

@@ -33,6 +33,8 @@ const columns = [{
 
 <BootstrapTable id="bar" keyField='id' data={ products } columns={ columns } />
 <BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
+<BootstrapTable headerWrapperClasses="foo" keyField="id" data={ products } columns={ columns } />
+<BootstrapTable bodyClasses="foo" keyField="id" data={ products } columns={ columns } />
 <BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
 `;
 
@@ -44,6 +46,12 @@ export default () => (
     <h4> Customized table className </h4>
     <BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
 
+    <h4> Customized thead className </h4>
+    <BootstrapTable headerWrapperClasses="foo" keyField="id" data={ products } columns={ columns } />
+
+    <h4> Customized tbody className </h4>
+    <BootstrapTable bodyClasses="foo" keyField="id" data={ products } columns={ columns } />
+
     <h4> Customized wrapper className </h4>
     <BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
 

packages/react-bootstrap-table2-example/examples/csv/export-footer.js

@@ -48,11 +48,7 @@ const columns = [{
   data={ products }
   columns={ columns }
   exportCSV={ {
-    fileName: 'custom.csv',
-    separator: '|',
-    ignoreHeader: true,
-    noAutoBOM: false,
-    blobType: 'text/csv;charset=ansi'
+    ignoreFooter: false
   } }
 >
   {

packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss

@@ -1,4 +1,4 @@
-table.foo {
+.foo {
   background-color: $grey-500;
 }
 

packages/react-bootstrap-table2-toolkit/context.js

@@ -64,6 +64,24 @@ class ToolkitProvider extends statelessDecorator(React.Component) {
     this.state = state;
   }
 
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    let columnToggle = this.state.columnToggle;
+    if (nextProps.columnToggle) {
+      columnToggle = nextProps.columns
+        .reduce((obj, column) => {
+          obj[column.dataField] = !column.hidden;
+          return obj;
+        }, {});
+    } else {
+      columnToggle = null;
+    }
+    this.setState({
+      ...this.state,
+      columnToggle
+    });
+  }
+
   onSearch(searchText) {
     if (searchText !== this.state.searchText) {
       this.setState({ searchText });

packages/react-bootstrap-table2/package.json

@@ -36,7 +36,7 @@
     }
   ],
   "dependencies": {
-    "classnames": "2.2.5",
+    "classnames": "^2.2.5",
     "react-transition-group": "2.5.3",
     "underscore": "1.9.1"
   },

packages/react-bootstrap-table2/src/body.js

@@ -60,7 +60,8 @@ class Body extends React.Component {
       rowStyle,
       rowClasses,
       rowEvents,
-      expandRow
+      expandRow,
+      className
     } = this.props;
 
     let content;
@@ -110,7 +111,7 @@ class Body extends React.Component {
     }
 
     return (
-      <tbody>{ content }</tbody>
+      <tbody className={ className }>{ content }</tbody>
     );
   }
 }

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -94,6 +94,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
           <Header
             columns={ columns }
             className={ this.props.headerClasses }
+            wrapperClasses={ this.props.headerWrapperClasses }
             sortField={ this.props.sortField }
             sortOrder={ this.props.sortOrder }
             onSort={ this.props.onSort }
@@ -119,6 +120,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             />
           )}
           <Body
+            className={ this.props.bodyClasses }
             data={ this.getData() }
             keyField={ keyField }
             tabIndexCell={ tabIndexCell }
@@ -163,7 +165,10 @@ BootstrapTable.propTypes = {
   tabIndexCell: PropTypes.bool,
   id: PropTypes.string,
   classes: PropTypes.string,
+  headerClasses: PropTypes.string,
+  bodyClasses: PropTypes.string,
   wrapperClasses: PropTypes.string,
+  headerWrapperClasses: PropTypes.string,
   condensed: PropTypes.bool,
   caption: PropTypes.oneOfType([
     PropTypes.node,
@@ -221,7 +226,6 @@ BootstrapTable.propTypes = {
   rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   rowEvents: PropTypes.object,
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  headerClasses: PropTypes.string,
   filtersClasses: PropTypes.string,
   filterPosition: PropTypes.oneOf([
     Const.FILTERS_POSITION_TOP,

packages/react-bootstrap-table2/src/contexts/index.js

@@ -85,6 +85,12 @@ const withContext = Base =>
     }
 
     UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.columns.filter(col => col.sort).length > 0 && !this.SortContext) {
+        this.SortContext = createSortContext(
+          dataOperator, this.isRemoteSort, this.handleRemoteSortChange);
+      } else {
+        this.SortContext = null;
+      }
       if (!nextProps.pagination && this.props.pagination) {
         this.PaginationContext = null;
       }

packages/react-bootstrap-table2/src/header-cell.js

@@ -77,6 +77,12 @@ class HeaderCell extends eventDelegater(React.Component) {
 
     if (sort) {
       const customClick = cellAttrs.onClick;
+      cellAttrs.onKeyUp = (e) => {
+        if (e.key === 'Enter') {
+          onSort(column);
+          if (_.isFunction(customClick)) customClick(e);
+        }
+      };
       cellAttrs.onClick = (e) => {
         onSort(column);
         if (_.isFunction(customClick)) customClick(e);