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;