From 0a1640a18f5aa95d113f92dbd1753e7b726bcee6 Mon Sep 17 00:00:00 2001 From: Rigo Pinto Date: Thu, 7 Jul 2016 17:57:55 -0600 Subject: [PATCH 1/4] Adds a TableFooter --- src/BootstrapTable.js | 18 +++++++++++++++++ src/TableFooter.js | 46 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 src/TableFooter.js diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js index 93710c608..6e1d35009 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'; @@ -291,6 +292,23 @@ class BootstrapTable extends Component { onRowMouseOut={ this.handleRowMouseOut } onSelectRow={ this.handleSelectRow } noDataText={ this.props.options.noDataText } /> + + { this.props.children } + { tableFilter } { pagination } diff --git a/src/TableFooter.js b/src/TableFooter.js new file mode 100644 index 000000000..030e1087f --- /dev/null +++ b/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 ( +
+ + + + { + this.props.children.map( child => { + console.log('child ', child); + return ; + }) + } + + +
{ child.props.footer || child.props.children }
+
+ ); + } +} +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; From e99c02886a4eeca42351434b607109317f6fead0 Mon Sep 17 00:00:00 2001 From: Rigo Pinto Date: Fri, 8 Jul 2016 12:46:19 -0600 Subject: [PATCH 2/4] Adds checks and style. --- src/BootstrapTable.js | 44 +++++++++++++++++++++++----------------- src/TableFooter.js | 22 ++++++++++++-------- src/TableHeaderColumn.js | 6 ++++-- 3 files changed, 43 insertions(+), 29 deletions(-) diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js index 6e1d35009..983feceab 100644 --- a/src/BootstrapTable.js +++ b/src/BootstrapTable.js @@ -246,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; @@ -292,23 +293,7 @@ class BootstrapTable extends Component { onRowMouseOut={ this.handleRowMouseOut } onSelectRow={ this.handleSelectRow } noDataText={ this.props.options.noDataText } /> - - { this.props.children } - + { tableFooter } { tableFilter } { pagination } @@ -844,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; } @@ -961,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, @@ -1007,7 +1010,8 @@ BootstrapTable.propTypes = { }), exportCSV: PropTypes.bool, csvFileName: PropTypes.string, - ignoreSinglePage: PropTypes.bool + ignoreSinglePage: PropTypes.bool, + showFooter: PropTypes.bool }; BootstrapTable.defaultProps = { height: '100%', @@ -1048,6 +1052,7 @@ BootstrapTable.defaultProps = { bodyStyle: undefined, tableHeaderClass: null, tableBodyClass: null, + tableFooterClass: null, options: { clearSearch: false, sortName: undefined, @@ -1092,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 index 030e1087f..d0b673c53 100644 --- a/src/TableFooter.js +++ b/src/TableFooter.js @@ -1,5 +1,7 @@ import React, { Component, PropTypes } from 'react'; import classSet from 'classnames'; +import Const from './Const'; +import SelectRowHeaderColumn from './SelectRowHeaderColumn'; class TableHeader extends Component { @@ -8,16 +10,19 @@ class TableHeader extends Component { const tableClasses = classSet('table', 'table-hover', { 'table-bordered': this.props.bordered, 'table-condensed': this.props.condensed - }, this.props.tableHeaderClass); + }, 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 ; + return ; }) } @@ -26,20 +31,21 @@ class TableHeader extends Component { ); } + renderSelectRowHeader() { + if (this.props.rowSelectType === Const.ROW_SELECT_SINGLE) { + return (); + } else { + return null; + } + } } 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 }; 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; From 1a50fb8fdd05d19e0e1c160190ba76307f6a7fe8 Mon Sep 17 00:00:00 2001 From: Rigo Pinto Date: Fri, 8 Jul 2016 12:46:57 -0600 Subject: [PATCH 3/4] Adds a demo for table-with-footer.js --- examples/js/others/demo.js | 6 +++++ examples/js/others/table-with-footer.js | 33 +++++++++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 examples/js/others/table-with-footer.js 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..d80bc39c7 --- /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 + + ); + } +} From bac660e4be1ee61bd028b9522e16ea6382cba5cf Mon Sep 17 00:00:00 2001 From: Rigo Pinto Date: Fri, 8 Jul 2016 14:37:45 -0600 Subject: [PATCH 4/4] Style fix --- examples/js/others/table-with-footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/js/others/table-with-footer.js b/examples/js/others/table-with-footer.js index d80bc39c7..7e83d83a4 100644 --- a/examples/js/others/table-with-footer.js +++ b/examples/js/others/table-with-footer.js @@ -25,7 +25,7 @@ export default class BasicTable extends React.Component { return ( Product ID - Product Name + Product Name Product Price );
{ child.props.footer || child.props.children }{ child.props.footerText || child.props.children }