Table
Bordered
Add border color with bordered
prop.
<Table bordered>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>James</td>
<td>Smith</td>
<td>@james</td>
<tr>
<tr>
<td>2</td>
<td>Robert</td>
<td>Rodriguez</td>
<td>@robert</td>
<tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>Bird</td>
<td>@twitter</td>
<tr>
</tbody>
</Table>
Striped
Add striped color with striped
prop.
<Table striped>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>James</td>
<td>Smith</td>
<td>@james</td>
<tr>
<tr>
<td>2</td>
<td>Robert</td>
<td>Rodriguez</td>
<td>@robert</td>
<tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>Bird</td>
<td>@larry</td>
<tr>
</tbody>
</Table>
Table hover
Activate hover of table row by hover
prop.
<Table hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>James</td>
<td>Smith</td>
<td>@james</td>
<tr>
<tr>
<td>2</td>
<td>Robert</td>
<td>Rodriguez</td>
<td>@robert</td>
<tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>Bird</td>
<td>@larry</td>
<tr>
</tbody>
</Table>
White-space
Customize cell type with white-space
prop.
<Table whiteSpace="normal">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>James</td>
<td>Smith</td>
<td>@james</td>
<tr>
<tr>
<td>2</td>
<td>Robert</td>
<td>Rodriguez</td>
<td>@robert</td>
<tr>
<tr>
<td>3</td>
<td>Larry the Bird. Larry Joe Bird (born December 7, 1956) is an American former professional basketball player, coach and executive in the National Basketball Association (NBA). Nicknamed the Hick from French Lick and Larry Legend,Bird is widely regarded as one of the greatest basketball players of all time.</td>
<td>Bird</td>
<td>@larry</td>
<tr>
</tbody>
</Table>
API
import Table from "erxes-ui/lib/components/table/index";
- required prop
NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
children* | React.ReactNode | Shows table content | |
striped | boolean | false | Gives table strip color |
bordered | boolean | false | Add border color |
hover | boolean | false | Activates table hover |
responsive | boolean | false | Add horizontal scroll bar when needed |
whiteSpace | any | Costumizes the cells | |
alignTop | boolean | false | Writes content vertically top |