Open
Description
I tried to expand a table and edit the inner table. Well, I was able to edit but the values are not saving. If I edit a input field from top row, all the changes are reflecting in my last row. Here is the code I am using.
const products = [];
const cellEditProp = {
mode: 'click',
blurToSave: true
};
function addProducts(quantity) {
const startId = products.length;
for (let i = 0; i < quantity; i++) {
const id = startId + i;
if (i < 3) {
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i,
expand: [ {
fieldA: i,
fieldB: "B",
fieldC: (i + 1) * Math.random() * 100,
fieldD: '123eedd' + i
}, {
fieldA: i+1,
fieldB: "A",
fieldC: i * Math.random() * 100,
fieldD: '123eedd' + i
} ]
});
} else {
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i
});
}
}
}
addProducts(5);
class BSTable extends React.Component {
render() {
if (this.props.data) {
return (
<BootstrapTable data={ this.props.data } cellEdit={ cellEditProp }>
<TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn>
<TableHeaderColumn dataField='fieldB'editable={ { type: 'select', options: { values: ["A","B"] } } } >Field B</TableHeaderColumn>
<TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn>
<TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn>
</BootstrapTable>);
} else {
return (<p>?</p>);
}
}
}
class dataCenterTable extends React.Component {
constructor(props) {
super(props);
}
isExpandableRow(row) {
if (row.id < 3) return true;
else return false;
}
expandComponent(row) {
return (
<BSTable data={ row.expand } />
);
}
expandColumnComponent({ isExpandableRow, isExpanded }) {
let content = '';
if (isExpandableRow) {
content = (isExpanded ? '(-)' : '(+)' );
} else {
content = ' ';
}
return (
<div> { content } </div>
);
}
render() {
const options = {
expandRowBgColor: 'rgb(242, 255, 163)',
expandBy: 'column' // Currently, available value is row and column, default is row
};
const selectRow = {
mode: 'checkbox',
clickToSelect: false, // click to select, default is false
clickToExpand: true // click to expand row, default is false
};
return (
<BootstrapTable data={ products }
options={ options } selectRow={ selectRow }
expandableRow={ this.isExpandableRow }
expandComponent={ this.expandComponent }
search>
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name' expandable={ false }>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price' expandable={ false }>Product Price</TableHeaderColumn>
</BootstrapTable>
);
}
}