diff --git a/examples/js/others/demo.js b/examples/js/others/demo.js
index 1ea2765e2..e0a400eda 100644
--- a/examples/js/others/demo.js
+++ b/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 {
Use expose API by BootstrapTable to get page number by rowkey
+
+ Source in /examples/js/others/table-with-footer.js
+ Add a footer to the table. If the string is not specified uses the same as the header.
+
+
);
}
diff --git a/examples/js/others/table-with-footer.js b/examples/js/others/table-with-footer.js
new file mode 100644
index 000000000..7e83d83a4
--- /dev/null
+++ b/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 (
+
+ Product ID
+ Product Name
+ Product Price
+
+ );
+ }
+}
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
index 93710c608..983feceab 100644
--- a/src/BootstrapTable.js
+++ b/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 }
{ tableFilter }
{ pagination }
@@ -826,6 +829,23 @@ class BootstrapTable extends Component {
}
}
+ renderTableFooter() {
+ if (this.props.showFooter) {
+ return (
+
+ { this.props.children }
+ );
+ }
+ 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;
diff --git a/src/TableFooter.js b/src/TableFooter.js
new file mode 100644
index 000000000..d0b673c53
--- /dev/null
+++ b/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 (
+
+
+
+
+ { selectRowHeaderCol }
+ {
+ this.props.children.map( child => {
+ console.log('child ', child);
+ return { child.props.footerText || child.props.children } | ;
+ })
+ }
+
+
+
+
+ );
+ }
+ renderSelectRowHeader() {
+ if (this.props.rowSelectType === Const.ROW_SELECT_SINGLE) {
+ return ();
+ } 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;
diff --git a/src/TableHeaderColumn.js b/src/TableHeaderColumn.js
index c411c0446..ece2baea1 100644
--- a/src/TableHeaderColumn.js
+++ b/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;