Footer

examples/js/others/demo.js

@@ -2,6 +2,7 @@ import React from 'react';
 import MouseEventTable from './mouse-event-table';
 import TableInTabs from './table-in-tabs';
 import GetPageNumByKeyTable from './expose-api-table';
+import TableWithFooter from './table-with-footer';
 import { Col, Panel } from 'react-bootstrap';
 
 class Demo extends React.Component {
@@ -23,6 +24,11 @@ class Demo extends React.Component {
           <h5>Use expose API by BootstrapTable to get page number by rowkey</h5>
           <GetPageNumByKeyTable/>
         </Panel>
+        <Panel header={ 'Add a footer' }>
+          <h5>Source in /examples/js/others/table-with-footer.js</h5>
+          <h5>Add a footer to the table.  If the string is not specified uses the same as the header.</h5>
+          <TableWithFooter/>
+        </Panel>
       </Col>
     );
   }

examples/js/others/table-with-footer.js

@@ -0,0 +1,33 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    products.push({
+      id: id,
+      name: 'Item name ' + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(5);
+
+export default class BasicTable extends React.Component {
+  render() {
+    const total = products.reduce( (a, product) => a + product.price, 0);
+    return (
+      <BootstrapTable data={ products } showFooter={ true }>
+          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name' footerText='Total'>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='price' footerText={ total }>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}

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';
@@ -245,6 +246,7 @@ class BootstrapTable extends Component {
     const sortInfo = this.store.getSortInfo();
     const pagination = this.renderPagination();
     const toolBar = this.renderToolBar();
+    const tableFooter = this.renderTableFooter();
     const tableFilter = this.renderTableFilter(columns);
     const isSelectAll = this.isSelectAll();
     let sortIndicator = this.props.options.sortIndicator;
@@ -291,6 +293,7 @@ class BootstrapTable extends Component {
             onRowMouseOut={ this.handleRowMouseOut }
             onSelectRow={ this.handleSelectRow }
             noDataText={ this.props.options.noDataText } />
+          { tableFooter }
         </div>
         { tableFilter }
         { pagination }
@@ -826,6 +829,23 @@ class BootstrapTable extends Component {
     }
   }
 
+  renderTableFooter() {
+    if (this.props.showFooter) {
+      return (
+        <TableFooter
+          ref='footer'
+          tableFooterClass={ this.props.tableFooterClass }
+          style={ this.props.headerStyle }
+          hideSelectColumn={ this.props.selectRow.hideSelectColumn }
+          bordered={ this.props.bordered }
+          condensed={ this.props.condensed }
+          isFiltered={ this.filter ? true : false }>
+          { this.props.children }
+        </TableFooter>);
+    }
+    return null;
+  }
+
   _scrollHeader = (e) => {
     this.refs.header.refs.container.scrollLeft = e.currentTarget.scrollLeft;
   }
@@ -943,6 +963,7 @@ BootstrapTable.propTypes = {
   bodyStyle: PropTypes.object,
   tableHeaderClass: PropTypes.string,
   tableBodyClass: PropTypes.string,
+  tableFooterClass: PropTypes.string,
   options: PropTypes.shape({
     clearSearch: PropTypes.bool,
     sortName: PropTypes.string,
@@ -989,7 +1010,8 @@ BootstrapTable.propTypes = {
   }),
   exportCSV: PropTypes.bool,
   csvFileName: PropTypes.string,
-  ignoreSinglePage: PropTypes.bool
+  ignoreSinglePage: PropTypes.bool,
+  showFooter: PropTypes.bool
 };
 BootstrapTable.defaultProps = {
   height: '100%',
@@ -1030,6 +1052,7 @@ BootstrapTable.defaultProps = {
   bodyStyle: undefined,
   tableHeaderClass: null,
   tableBodyClass: null,
+  tableFooterClass: null,
   options: {
     clearSearch: false,
     sortName: undefined,
@@ -1074,7 +1097,8 @@ BootstrapTable.defaultProps = {
   },
   exportCSV: false,
   csvFileName: 'spreadsheet.csv',
-  ignoreSinglePage: false
+  ignoreSinglePage: false,
+  showFooter: false
 };
 
 export default BootstrapTable;

src/TableFooter.js

@@ -0,0 +1,52 @@
+import React, { Component, PropTypes } from 'react';
+import classSet from 'classnames';
+import Const from './Const';
+import SelectRowHeaderColumn from './SelectRowHeaderColumn';
+
+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.tableFooterClass);
+    let selectRowHeaderCol = null;
+    if (!this.props.hideSelectColumn) selectRowHeaderCol = this.renderSelectRowHeader();
+    return (
+      <div ref='container' className={ containerClasses } style={ this.props.style }>
+        <table className={ tableClasses }>
+          <tfoot>
+            <tr ref='footer'>
+              { selectRowHeaderCol }
+              {
+                this.props.children.map( child => {
+                  console.log('child ', child);
+                  return <td>{ child.props.footerText || child.props.children }</td>;
+                })
+              }
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    );
+  }
+  renderSelectRowHeader() {
+    if (this.props.rowSelectType === Const.ROW_SELECT_SINGLE) {
+      return (<SelectRowHeaderColumn />);
+    } else {
+      return null;
+    }
+  }
+}
+TableHeader.propTypes = {
+  tableHeaderClass: PropTypes.string,
+  style: PropTypes.object,
+  hideSelectColumn: PropTypes.bool,
+  bordered: PropTypes.bool,
+  condensed: PropTypes.bool,
+  isFiltered: PropTypes.bool,
+  sortIndicator: PropTypes.bool
+};
+
+export default TableHeader;

src/TableHeaderColumn.js

@@ -161,7 +161,8 @@ TableHeaderColumn.propTypes = {
     getElement: PropTypes.func,
     customFilterParameters: PropTypes.object
   }),
-  sortIndicator: PropTypes.bool
+  sortIndicator: PropTypes.bool,
+  footerText: PropTypes.string
 };
 
 TableHeaderColumn.defaultProps = {
@@ -187,7 +188,8 @@ TableHeaderColumn.defaultProps = {
   formatExtraData: undefined,
   sortFuncExtraData: undefined,
   filter: undefined,
-  sortIndicator: true
+  sortIndicator: true,
+  footerText: undefined
 };
 
 export default TableHeaderColumn;