vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-06-28 21:20:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add dummy column story

Browse Source
This commit is contained in:
AllenFang
2018-09-01 14:55:48 +08:00
parent 849d9af8c4
commit 3b1fc3a559
3 changed files with 262 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js vendored Normal file
View File

@@ -0,0 +1,221 @@
/* eslint jsx-a11y/label-has-for: 0 */
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import Code from 'components/common/code-block';
const products = [
{ id: 12, name: 'Item 12', price: 12.5, inStock: false },
{ id: 13, name: 'Item 13', price: 13.5, inStock: true },
{ id: 14, name: 'Item 14', price: 14.5, inStock: true }
];
const columns = [
{
dataField: 'id',
text: 'Product ID'
},
{
dataField: 'name',
text: 'Product Name'
},
{
dataField: 'price',
text: 'Product Price'
},
{
dataField: 'inStock',
text: 'In Stock',
formatter: (cellContent, row) => (
<div className="checkbox disabled">
<label>
<input type="checkbox" checked={ row.inStock } disabled />
</label>
</div>
)
},
{
dataField: 'df1',
isDummyField: true,
text: 'Action 1',
formatter: (cellContent, row) => {
if (row.inStock) {
return (
<h5>
<span className="label label-success"> Available</span>
</h5>
);
}
return (
<h5>
<span className="label label-danger"> Backordered</span>
</h5>
);
}
},
{
dataField: 'df2',
isDummyField: true,
text: 'Action 2',
formatter: (cellContent, row) => {
if (row.inStock) {
return (
<h5>
<span className="label label-success"> Available</span>
</h5>
);
}
return (
<h5>
<span className="label label-danger"> Backordered</span>
</h5>
);
}
}
];
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [
{
dataField: 'id',
text: 'Product ID'
},
{
dataField: 'name',
text: 'Product Name'
},
{
dataField: 'price',
text: 'Product Price'
},
{
dataField: 'inStock',
text: 'In Stock',
formatter: (cellContent, row) => (
<div className="checkbox disabled">
<label>
<input type="checkbox" checked={ row.inStock } disabled />
</label>
</div>
)
},
{
dataField: 'df1',
isDummyField: true,
text: 'Action 1',
formatter: (cellContent, row) => {
if (row.inStock) {
return (
<h5>
<span className="label label-success"> Available</span>
</h5>
);
}
return (
<h5>
<span className="label label-danger"> Backordered</span>
</h5>
);
}
},
{
dataField: 'df2',
isDummyField: true,
text: 'Action 2',
formatter: (cellContent, row) => {
if (row.inStock) {
return (
<h5>
<span className="label label-success"> Available</span>
</h5>
);
}
return (
<h5>
<span className="label label-danger"> Backordered</span>
</h5>
);
}
}
];
class ProductList extends React.Component {
constructor(props) {
super(props);
this.state = { products };
}
toggleInStock = () => {
let newProducts = [...this.state.products];
newProducts = newProducts.map((d) => {
if (d.id === 13) {
return {
...d,
inStock: !d.inStock
};
}
return d;
});
this.setState(curr => ({ ...curr, products: newProducts }));
};
render() {
return (
<div>
<h1 className="h2">Products</h1>
<BootstrapTable
keyField="id"
data={ this.state.products }
columns={ columns }
/>
<button onClick={ this.toggleInStock } className="btn btn-primary">
Toggle item 13 stock status
</button>
</div>
);
}
}
`;
class ProductList extends React.Component {
constructor(props) {
super(props);
this.state = { products };
}
toggleInStock = () => {
let newProducts = [...this.state.products];
newProducts = newProducts.map((d) => {
if (d.id === 13) {
return {
...d,
inStock: !d.inStock
};
}
return d;
});
this.setState(curr => ({ ...curr, products: newProducts }));
};
render() {
return (
<div>
<h3>Action 1 and Action 2 are dummy column</h3>
<button onClick={ this.toggleInStock } className="btn btn-primary">
Toggle item 13 stock status
</button>
<BootstrapTable
keyField="id"
data={ this.state.products }
columns={ columns }
/>
<Code>{ sourceCode }</Code>
</div>
);
}
}
export default ProductList;