Skip to content

Instantly share code, notes, and snippets.

@philwills
Created February 5, 2015 15:26
Show Gist options
  • Save philwills/7d386dadaffb23a3d739 to your computer and use it in GitHub Desktop.
Save philwills/7d386dadaffb23a3d739 to your computer and use it in GitHub Desktop.
react-bootstrap-table-in-panel
<html>
<head>
<title>React Bootstrap issue - basic bootstrap</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="react-bootstrap.js"></script>
<script>
var Panel = ReactBootstrap.Panel
var Table = ReactBootstrap.Table
</script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
React.render(
<Panel header="Heading">
<Table condensed>
<thead><tr><th>Instance</th><th ><span >AutoScaling</span></th><th ><span >ELB</span></th><th ><span >Uptime</span></th><th ><span >Version</span></th></tr></thead>
<tbody>
<tr><td>i-3c78c4d8</td><td>InService</td><td >InService</td><td>7 mins</td><td >2944</td></tr>
<tr><td>i-93f25974</td><td>InService</td><td>InService</td><td>7 mins</td><td>2944</td></tr>
<tr><td>i-b83d835e</td><td>InService</td><td>InService</td><td>7 mins</td><td>2944</td></tr>
</tbody>
</Table>
<div>Some text</div>
</Panel>,
document.getElementById('container')
)
</script>
<div class="panel panel-default">
<div class="panel-heading">Heading</div>
<table class="table table-condensed">
<thead><tr><th>Instance</th><th ><span >AutoScaling</span></th><th ><span >ELB</span></th><th ><span >Uptime</span></th><th ><span >Version</span></th></tr></thead>
<tbody>
<tr><td>i-3c78c4d8</td><td>InService</td><td >InService</td><td>7 mins</td><td >2944</td></tr>
<tr><td >i-93f25974</td><td>InService</td><td>InService</td><td>7 mins</td><td>2944</td></tr>
<tr><td>i-b83d835e</td><td>InService</td><td>InService</td><td>7 mins</td><td>2944</td></tr>
</tbody>
</table>
<div>Some text</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment