Skip to content

Commit

Permalink
Support sections
Browse files Browse the repository at this point in the history
  • Loading branch information
Quentin Rousseau committed Sep 22, 2016
1 parent c5f4176 commit 9ca5de9
Show file tree
Hide file tree
Showing 13 changed files with 1,177 additions and 563 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ node_modules
*.idea
*.iml
lib/
npm-debug.log
npm-debug.log
1,198 changes: 779 additions & 419 deletions dist/react-bootstrap-table.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/react-bootstrap-table.js.map
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions dist/react-bootstrap-table.min.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions examples/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const routes = (
<Route path='getting-started' component={ GettingStarted }/>
<Route path='examples'>
<Route path='basic' component={ require('./basic/demo') } />
<Route path='sections' component={ require('./sections/demo') } />
<Route path='column' component={ require('./column/demo') } />
<Route path='sort' component={ require('./sort/demo') } />
<Route path='column-format' component={ require('./column-format/demo') } />
Expand Down
3 changes: 3 additions & 0 deletions examples/js/components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ class App extends React.Component {
const examples = [ {
text: 'Basic Table',
href: 'basic'
}, {
text: 'Table with sections',
href: 'sections'
}, {
text: 'Work on Column',
href: 'column'
Expand Down
57 changes: 57 additions & 0 deletions examples/js/sections/demo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/* eslint max-len: 0 */
/* eslint no-alert: 0 */
/* eslint no-console: 0 */
import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

import { Col, Panel } from 'react-bootstrap';

const products = { categoryA: [ { id: 1, name: 'Item 1', price: 1000 },
{ id: 2, name: 'Item 2', price: 2000 }
],
categoryB: [ { id: 3, name: 'Item 3', price: 3000 },
{ id: 4, name: 'Item 4', price: 4000 },
{ id: 5, name: 'Item 4', price: 5000 }
]
};

function onAfterSaveCell(row, cellName, cellValue, sectionKey) {
console.log('Section Key : ' + sectionKey);
console.log("Save cell '" + cellName + "' with value '" + cellValue + "'");
console.log('The whole row :');
console.log(row);
}

const cellEditProp = {
mode: 'click',
blurToSave: true,
afterSaveCell: onAfterSaveCell
};

function sectionFormat(row, cell, sectionKey) {
return (
<td colSpan={ 3 } style={ { textAlign: 'center', color: 'white', backgroundColor: '#324961' } }>
<h4>
{ sectionKey }
</h4>
</td>
);
}

class Demo extends React.Component {
render() {
return (
<Col md={ 8 } mdOffset={ 1 }>
<Panel header={ 'Sections for react-bootstrap-table' }>
<BootstrapTable data={ products } cellEdit={ cellEditProp } sections={ true } sectionFormat={ sectionFormat }>
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name' editable={ false } >Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>
</Panel>
</Col>
);
}
}

export default Demo;
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"gulp-concat-css": "^2.2.0",
"gulp-cssmin": "^0.1.7",
"gulp-shell": "^0.5.2",
"history": "^1.13.1",
"jquery": "^2.1.4",
"jsx-loader": "^0.13.2",
"react": "^0.14.3 || ^15.0.0",
Expand Down
120 changes: 86 additions & 34 deletions src/BootstrapTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class BootstrapTable extends Component {
this.isIE = document.documentMode;
}

this.store = new TableDataStore(this.props.data.slice());
this.store = new TableDataStore(this.props.data);

this.initTable(this.props);

Expand Down Expand Up @@ -155,7 +155,7 @@ class BootstrapTable extends Component {
this.initTable(nextProps);
const { options, selectRow } = nextProps;

this.store.setData(nextProps.data.slice());
this.store.setData(nextProps.data);

// from #481
let page = this.state.currPage;
Expand All @@ -170,7 +170,7 @@ class BootstrapTable extends Component {

if (this.isRemoteDataSource()) {
this.setState({
data: nextProps.data.slice(),
data: nextProps.data,
currPage: page,
sizePerPage
});
Expand Down Expand Up @@ -205,12 +205,12 @@ class BootstrapTable extends Component {
componentDidMount() {
this._adjustTable();
window.addEventListener('resize', this._adjustTable);
this.refs.body.refs.container.addEventListener('scroll', this._scrollHeader);
this.refs.body0.refs.container.addEventListener('scroll', this._scrollHeader);
}

componentWillUnmount() {
window.removeEventListener('resize', this._adjustTable);
this.refs.body.refs.container.removeEventListener('scroll', this._scrollHeader);
this.refs.body0.refs.container.removeEventListener('scroll', this._scrollHeader);
if (this.filter) {
this.filter.removeAllListeners('onFilterChange');
}
Expand Down Expand Up @@ -257,8 +257,65 @@ class BootstrapTable extends Component {
const toolBar = this.renderToolBar();
const tableFilter = this.renderTableFilter(columns);
const isSelectAll = this.isSelectAll();
const tableBodies = [];
let sortIndicator = this.props.options.sortIndicator;
if (typeof this.props.options.sortIndicator === 'undefined') sortIndicator = true;

if (this.props.sections === true) {
Object.keys(this.props.data).forEach(function(key, i) {
const tableBodyRef = 'body' + i;
tableBodies.push(
<TableBody ref={ tableBodyRef }
key= { key }
sectionKey = { key }
sections= { true }
sectionFormat={ this.props.sectionFormat }
bodyContainerClass={ this.props.bodyContainerClass }
tableBodyClass={ this.props.tableBodyClass }
style={ { ...style, ...this.props.bodyStyle } }
data={ this.props.data[key] }
columns={ columns }
trClassName={ this.props.trClassName }
striped={ this.props.striped }
bordered={ this.props.bordered }
hover={ this.props.hover }
keyField={ this.store.getKeyField() }
condensed={ this.props.condensed }
selectRow={ this.props.selectRow }
cellEdit={ this.props.cellEdit }
selectedRowKeys={ this.state.selectedRowKeys }
onRowClick={ this.handleRowClick }
onRowMouseOver={ this.handleRowMouseOver }
onRowMouseOut={ this.handleRowMouseOut }
onSelectRow={ this.handleSelectRow }
noDataText={ this.props.options.noDataText } />
);
}, this);
} else {
tableBodies.push(
<TableBody ref='body0'
bodyContainerClass={ this.props.bodyContainerClass }
tableBodyClass={ this.props.tableBodyClass }
style={ { ...style, ...this.props.bodyStyle } }
data={ this.props.data }
columns={ columns }
trClassName={ this.props.trClassName }
striped={ this.props.striped }
bordered={ this.props.bordered }
hover={ this.props.hover }
keyField={ this.store.getKeyField() }
condensed={ this.props.condensed }
selectRow={ this.props.selectRow }
cellEdit={ this.props.cellEdit }
selectedRowKeys={ this.state.selectedRowKeys }
onRowClick={ this.handleRowClick }
onRowMouseOver={ this.handleRowMouseOver }
onRowMouseOut={ this.handleRowMouseOut }
onSelectRow={ this.handleSelectRow }
noDataText={ this.props.options.noDataText } />
);
}

return (
<div className={ classSet('react-bs-table-container', this.props.containerClass) }
style={ this.props.containerStyle }>
Expand Down Expand Up @@ -287,26 +344,7 @@ class BootstrapTable extends Component {
isSelectAll={ isSelectAll }>
{ this.props.children }
</TableHeader>
<TableBody ref='body'
bodyContainerClass={ this.props.bodyContainerClass }
tableBodyClass={ this.props.tableBodyClass }
style={ { ...style, ...this.props.bodyStyle } }
data={ this.state.data }
columns={ columns }
trClassName={ this.props.trClassName }
striped={ this.props.striped }
bordered={ this.props.bordered }
hover={ this.props.hover }
keyField={ this.store.getKeyField() }
condensed={ this.props.condensed }
selectRow={ this.props.selectRow }
cellEdit={ this.props.cellEdit }
selectedRowKeys={ this.state.selectedRowKeys }
onRowClick={ this.handleRowClick }
onRowMouseOver={ this.handleRowMouseOver }
onRowMouseOut={ this.handleRowMouseOut }
onSelectRow={ this.handleSelectRow }
noDataText={ this.props.options.noDataText } />
{ tableBodies }
</div>
{ tableFilter }
{ pagination }
Expand Down Expand Up @@ -507,9 +545,10 @@ class BootstrapTable extends Component {
}
}

handleEditCell(newVal, rowIndex, colIndex) {
handleEditCell(newVal, rowIndex, colIndex, sectionKey = null) {
const { onCellEdit } = this.props.options;
const { beforeSaveCell, afterSaveCell } = this.props.cellEdit;
let data;
let fieldName;
React.Children.forEach(this.props.children, function(column, i) {
if (i === colIndex) {
Expand All @@ -518,8 +557,14 @@ class BootstrapTable extends Component {
}
});

if (sectionKey) {
data = this.state.data[sectionKey];
} else {
data = this.state.data;
}

if (beforeSaveCell) {
const isValid = beforeSaveCell(this.state.data[rowIndex], fieldName, newVal);
const isValid = beforeSaveCell(data[rowIndex], fieldName, newVal, sectionKey);
if (!isValid && typeof isValid !== 'undefined') {
this.setState({
data: this.store.get()
Expand All @@ -529,23 +574,23 @@ class BootstrapTable extends Component {
}

if (onCellEdit) {
newVal = onCellEdit(this.state.data[rowIndex], fieldName, newVal);
newVal = onCellEdit(data[rowIndex], fieldName, newVal, sectionKey);
}

if (this.isRemoteDataSource()) {
if (afterSaveCell) {
afterSaveCell(this.state.data[rowIndex], fieldName, newVal);
afterSaveCell(data[rowIndex], fieldName, newVal, sectionKey);
}
return;
}

const result = this.store.edit(newVal, rowIndex, fieldName).get();
const result = this.store.edit(newVal, rowIndex, fieldName, sectionKey).get();
this.setState({
data: result
});

if (afterSaveCell) {
afterSaveCell(this.state.data[rowIndex], fieldName, newVal);
afterSaveCell(data[rowIndex], fieldName, newVal, sectionKey);
}
}

Expand Down Expand Up @@ -899,7 +944,7 @@ class BootstrapTable extends Component {
_adjustHeaderWidth = () => {
const header = this.refs.header.refs.header;
const headerContainer = this.refs.header.refs.container;
const tbody = this.refs.body.refs.tbody;
const tbody = this.refs.body0.refs.tbody;
const firstRow = tbody.childNodes[0];
const isScroll = headerContainer.offsetWidth !== tbody.parentNode.offsetWidth;
const scrollBarWidth = isScroll ? Util.getScrollBarWidth() : 0;
Expand Down Expand Up @@ -939,15 +984,15 @@ class BootstrapTable extends Component {
const { height } = this.props;
let { maxHeight } = this.props;
if ((typeof height === 'number' && !isNaN(height)) || height.indexOf('%') === -1) {
this.refs.body.refs.container.style.height =
this.refs.body0.refs.container.style.height =
parseFloat(height, 10) - this.refs.header.refs.container.offsetHeight + 'px';
}
if (maxHeight) {
maxHeight = typeof maxHeight === 'number' ?
maxHeight :
parseInt(maxHeight.replace('px', ''), 10);

this.refs.body.refs.container.style.maxHeight =
this.refs.body0.refs.container.style.maxHeight =
maxHeight - this.refs.header.refs.container.offsetHeight + 'px';
}
}
Expand All @@ -974,9 +1019,15 @@ class BootstrapTable extends Component {
this.props.options.afterInsertRow(newObj);
}
}

_objectValues(obj) {
return Object.keys(obj).map(k => obj[k]);
}

}

BootstrapTable.propTypes = {
sectionFormat: PropTypes.func,
keyField: PropTypes.string,
height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
maxHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
Expand Down Expand Up @@ -1077,6 +1128,7 @@ BootstrapTable.propTypes = {
ignoreSinglePage: PropTypes.bool
};
BootstrapTable.defaultProps = {
sections: false,
height: '100%',
maxHeight: undefined,
striped: false,
Expand Down
Loading

0 comments on commit 9ca5de9

Please sign in to comment.