Skip to main content

Table

Bordered#

Add border color with bordered prop.

#First NameLast NameUsername
1JamesSmith@james
2RobertRodriguez@robert
3LarryBird@twitter
<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>undefined
</tbody>
</Table>

Merge cells#

Merge cells by colSpan prop.

#First NameLast NameUsername
1JamesSmith@james
2RobertRodriguez@robert
3Larry the bird@twitter
<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 colSpan="2">Larry the bird</td>
<td>@twitter</td>
<tr>
</tbody>
</Table>

Striped#

Add striped color with striped prop.

#First NameLast NameUsername
1JamesSmith@james
2RobertRodriguez@robert
3LarryBird@larry
<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>undefined
</tbody>
</Table>

Table hover#

Activate hover of table row by hover prop.

#First NameLast NameUsername
1JamesSmith@james
2RobertRodriguez@robert
3LarryBird@larry
<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>undefined
</tbody>
</Table>

White-space#

Customize cell type with white-space prop.

#First NameLast NameUsername
1JamesSmith@james
2RobertRodriguez@robert
3Larry 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.@twitter
<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 colSpan="2">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>@twitter</td>
<tr>
</tbody>
</Table>

API#

import Table from "erxes-ui/lib/components/table/index";
NameTypeDefaultDescription
borderedbooleanfalseAdds border color
colSpannumberMerges the number of row cells
stripedbooleanfalseGives table strip color
hoverbooleanfalseActivates table hover
white-spacenormal | nowrap | pre | pre-wrap | pre-line | break-spacesCostumizes thee cells
Last updated on by zulaann