Footer

src/BootstrapTable.js

@@ -3,6 +3,7 @@
 import React, { Component, PropTypes } from 'react';
 import Const from './Const';
 import TableHeader from './TableHeader';
+import TableFooter from './TableFooter';
 import TableBody from './TableBody';
 import PaginationList from './pagination/PaginationList';
 import ToolBar from './toolbar/ToolBar';
@@ -291,6 +292,23 @@ class BootstrapTable extends Component {
             onRowMouseOut={ this.handleRowMouseOut }
             onSelectRow={ this.handleSelectRow }
             noDataText={ this.props.options.noDataText } />
+          <TableFooter
+            ref='footer'
+            tableHeaderClass={ this.props.tableHeaderClass }
+            style={ this.props.headerStyle }
+            rowSelectType={ this.props.selectRow.mode }
+            hideSelectColumn={ this.props.selectRow.hideSelectColumn }
+            sortName={ sortInfo ? sortInfo.sortField : undefined }
+            sortOrder={ sortInfo ? sortInfo.order : undefined }
+            sortIndicator={ sortIndicator }
+            onSort={ this.handleSort }
+            onSelectAllRow={ this.handleSelectAllRow }
+            bordered={ this.props.bordered }
+            condensed={ this.props.condensed }
+            isFiltered={ this.filter ? true : false }
+            isSelectAll={ isSelectAll }>
+            { this.props.children }
+          </TableFooter>
         </div>
         { tableFilter }
         { pagination }

src/TableFooter.js

@@ -0,0 +1,46 @@
+import React, { Component, PropTypes } from 'react';
+import classSet from 'classnames';
+
+class TableHeader extends Component {
+
+  render() {
+    const containerClasses = classSet('react-bs-container-header', 'table-header-wrapper');
+    const tableClasses = classSet('table', 'table-hover', {
+      'table-bordered': this.props.bordered,
+      'table-condensed': this.props.condensed
+    }, this.props.tableHeaderClass);
+    return (
+      <div ref='container' className={ containerClasses } style={ this.props.style }>
+        <table className={ tableClasses }>
+          <tfoot>
+            <tr ref='footer'>
+              {
+                this.props.children.map( child => {
+                  console.log('child ', child);
+                  return <td>{ child.props.footer || child.props.children }</td>;
+                })
+              }
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    );
+  }
+}
+TableHeader.propTypes = {
+  tableHeaderClass: PropTypes.string,
+  style: PropTypes.object,
+  rowSelectType: PropTypes.string,
+  onSort: PropTypes.func,
+  onSelectAllRow: PropTypes.func,
+  sortName: PropTypes.string,
+  sortOrder: PropTypes.string,
+  hideSelectColumn: PropTypes.bool,
+  bordered: PropTypes.bool,
+  condensed: PropTypes.bool,
+  isFiltered: PropTypes.bool,
+  isSelectAll: PropTypes.oneOf([ true, 'indeterminate', false ]),
+  sortIndicator: PropTypes.bool
+};
+
+export default TableHeader;