Reactstrap Tables
Bootstrap Tables are designed to be opt-in due to the
widespread use of tables across third-party widgets like calendars
and date pickers.
Keep reading some Bootstrap Tables examples to see how these tables
work.
Examples
# | Name | Job Position | Since | Salary | Actions |
---|---|---|---|---|---|
1 | Andrew Mike | Develop | 2013 | € 99,225 | |
2 | John Doe | Design | 2012 | € 89,241 | |
3 | Alex Mike | Design | 2010 | € 92,144 |
import React from "react";
// reactstrap components
import { Button, Table } from "reactstrap";
function Example() {
return (
<>
<Table>
<thead>
<tr>
<th className=" text-center">#</th>
<th>Name</th>
<th>Job Position</th>
<th>Since</th>
<th className=" text-right">Salary</th>
<th className=" text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td className=" text-center">1</td>
<td>Andrew Mike</td>
<td>Develop</td>
<td>2013</td>
<td className=" text-right">€ 99,225</td>
<td className=" td-actions text-right">
<Button
className=" btn-icon"
color="info"
size="sm"
type="button"
>
<i className=" ni ni-circle-08 pt-1"></i>
</Button>
<Button
className=" btn-icon"
color="success"
size="sm"
type="button"
>
<i className=" ni ni-settings-gear-65 pt-1"></i>
</Button>
<Button
className=" btn-icon"
color="danger"
size="sm"
type="button"
>
<i className=" ni ni-fat-remove pt-1"></i>
</Button>
</td>
</tr>
<tr>
<td className=" text-center">2</td>
<td>John Doe</td>
<td>Design</td>
<td>2012</td>
<td className=" text-right">€ 89,241</td>
<td className=" td-actions text-right">
<Button
className=" btn-icon"
color="info"
size="sm"
type="button"
>
<i className=" ni ni-circle-08 pt-1"></i>
</Button>
<Button
className=" btn-icon"
color="success"
size="sm"
type="button"
>
<i className=" ni ni-settings-gear-65 pt-1"></i>
</Button>
<Button
className=" btn-icon"
color="danger"
size="sm"
type="button"
>
<i className=" ni ni-fat-remove pt-1"></i>
</Button>
</td>
</tr>
<tr>
<td className=" text-center">3</td>
<td>Alex Mike</td>
<td>Design</td>
<td>2010</td>
<td className=" text-right">€ 92,144</td>
<td className=" td-actions text-right">
<Button
className=" btn-icon btn-simple"
color="info"
size="sm"
type="button"
>
<i className=" ni ni-circle-08 pt-1"></i>
</Button>
<Button
className=" btn-icon btn-simple"
color="success"
size="sm"
type="button"
>
<i className=" ni ni-settings-gear-65 pt-1"></i>
</Button>
<Button
className=" btn-icon btn-simple"
color="danger"
size="sm"
type="button"
>
<i className=" ni ni-fat-remove pt-1"></i>
</Button>
</td>
</tr>
</tbody>
</Table>
</>
);
}
export default Example;
Shopping Cart Table
Product | Color | Size | Price | Qty | Amount | ||
---|---|---|---|---|---|---|---|
![]() |
Spring Jacket
by theNorthFace |
Red | M | €549 |
1
|
€549 |
import React from "react";
// reactstrap components
import { Button, ButtonGroup, Table } from "reactstrap";
function Example() {
return (
<>
<Table className=" table-shopping" responsive>
<thead>
<tr>
<th className=" text-center"></th>
<th>Product</th>
<th className=" th-description">Color</th>
<th className=" th-description">Size</th>
<th className=" text-right">Price</th>
<th className=" text-right">Qty</th>
<th className=" text-right">Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className=" img-container">
<img
alt="..."
src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/jacket.png"
></img>
</div>
</td>
<td className=" td-name">
<a href="#pablo" onClick={(e) => e.preventDefault()}>
Spring Jacket
</a>
<br></br>
<small>by theNorthFace</small>
</td>
<td>Red</td>
<td>M</td>
<td className=" td-number">
<small>€</small>
549
</td>
<td className=" td-number">
1{" "}
<ButtonGroup>
<Button color="info" size="sm">
<i className=" ni ni-fat-delete"></i>
</Button>
<Button color="info" size="sm">
<i className=" ni ni-fat-add"></i>
</Button>
</ButtonGroup>
</td>
<td className=" td-number">
<small>€</small>
549
</td>
<td className=" td-actions">
<Button
className=" btn-icon btn-simple"
color="info"
type="button"
>
<i className=" ni ni-fat-remove"></i>
</Button>
</td>
</tr>
</tbody>
</Table>
</>
);
}
export default Example;
More examples
Please check our core tables page.
Props
If you want to see more examples and properties please check the official Reactstrap Documentation.