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
NAMETYPEDEFAULTDESCRIPTION
children*React.ReactNodeShows table content
stripedbooleanfalseGives table strip color
borderedbooleanfalseAdd border color
hoverbooleanfalseActivates table hover
responsivebooleanfalseAdd horizontal scroll bar when needed
whiteSpaceanyCostumizes the cells
alignTopbooleanfalseWrites content vertically top

Was this page helpful?