<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css" />
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="example"></div>
</div>
<script src="script.js"></script>
</body>
</html>
var products = [{
id: 0,
name: "Product0",
price: 120
},{
id: 1,
name: "Product1",
price: 120
}, {
id: 2,
name: "Product2",
price: 80
},
{
id: 3,
name: "Product3",
price: 800
},{
id: 4,
name: "Product4",
price: 810
},{
id: 5,
name: "Product5",
price: 210
},{
id: 6,
name: "Product5",
price: 210
},{
id: 7,
name: "Product7",
price: 210
},{
id: 8,
name: "Product8",
price: 210
},{
id: 9,
name: "Product9",
price: 210
},{
id: 10,
name: "Product10",
price: 210
},{
id: 11,
name: "Product11",
price: 210
},{
id: 0,
name: "Product0",
price: 120
},{
id: 1,
name: "Product1",
price: 120
}, {
id: 2,
name: "Product2",
price: 80
},
{
id: 3,
name: "Product3",
price: 800
},{
id: 4,
name: "Product4",
price: 810
},{
id: 5,
name: "Product5",
price: 210
},{
id: 6,
name: "Product5",
price: 210
},{
id: 7,
name: "Product7",
price: 210
},{
id: 8,
name: "Product8",
price: 210
},{
id: 9,
name: "Product9",
price: 210
},{
id: 10,
name: "Product10",
price: 210
},{
id: 11,
name: "Product11",
price: 210
},{
id: 0,
name: "Product0",
price: 120
},{
id: 1,
name: "Product1",
price: 120
}, {
id: 2,
name: "Product2",
price: 80
},
{
id: 3,
name: "Product3",
price: 800
},{
id: 4,
name: "Product4",
price: 810
},{
id: 5,
name: "Product5",
price: 210
},{
id: 6,
name: "Product5",
price: 210
},{
id: 7,
name: "Product7",
price: 210
},{
id: 8,
name: "Product8",
price: 210
},{
id: 9,
name: "Product9",
price: 210
},{
id: 10,
name: "Product10",
price: 210
},{
id: 11,
name: "Product11",
price: 210
}];
function renderShowsTotal(start, to, total) {
return (
<p style={ { color: 'blue' } }>
From { start } to { to }, totals is { total } (its a customize text)
</p>
);
}
const options = {
page: 1, // which page you want to show as default
/*sizePerPageList: [ {
text: '5', value: 5
}, {
text: '10', value: 10
}, {
text: 'All', value: products.length
} ],*/ // you can change the dropdown list for size per page
sizePerPage: 5, // which size per page you want to locate as default
pageStartIndex: 1, // where to start counting the pages
paginationSize: 4, // the pagination bar size.
prePage: '<', // Previous page button text
nextPage: '>', // Next page button text
firstPage: '<<', // First page button text
lastPage: '>>', // Last page button text
//paginationShowsTotal: renderShowsTotal // Accept bool or function
hideSizePerPage: true // You can hide the dropdown for sizePerPage
};
ReactDOM.render(
<BootstrapTable data={products} striped hover pagination={true} options={options}>
<TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>,
document.getElementById("example")
);
/* Styles go here */