@asphalt-react/table

Table

Table displays large amount of information in a way that's easy to read. You can create complex designs by bringing components like Avatar, Tag & Checkbox to the Table.

💡

All components in the table family support HTML global attributes.

Usage

import Table, {
  TableHead,
  TableBody,
  TableRow,
  TableHeaderCell,
  TableCell,
} from "@asphalt-react/table"
;<Table>
  <TableHead>
    <TableRow>
      <TableHeaderCell>First Name</TableHeaderCell>
      <TableHeaderCell>Last Name</TableHeaderCell>
      <TableHeaderCell>Email</TableHeaderCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>John</TableCell>
      <TableCell>Kennedy</TableCell>
      <TableCell>[e-mail]</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>George</TableCell>
      <TableCell>Bush</TableCell>
      <TableCell>[e-mail]</TableCell>
    </TableRow>
  </TableBody>
</Table>

Table

Props

children

Content to render inside the Table

type	required	default
node	true	N/A

contentFit

Content of the table dictates its width. Applying contentFit will not wrap the table with scroll bars.

Note: If applying contentFit prop, you have to manage the width of the table if content's width exceeds.

type	required	default
bool	false	false

fence

Each table row appears distinctively separate from each other, it adds a colored border at the bottom of every table row

type	required	default
bool	false	false

TableHead

Props

children

React node to render inside the TableHead

type	required	default
node	false	N/A

TableBody

Props

children

React node to render inside the TableBody

type	required	default
node	false	N/A

TableRow

Props

children

React node to be rendered within the TableRow

type	required	default
node	false	N/A

selected

Apply selected look to highlight the selected row

type	required	default
bool	false	false

TableHeaderCell

Props

children

Content to display inside the TableHeaderCell

type	required	default
node	false	N/A

align

Aligns content inside TableHeaderCell to left, right or center. Default is left

type	required	default
enum	false	"left"

TableCell

Props

children

Content to render inside the TableCell

type	required	default
node	false	N/A

align

Aligns content inside TableCell to left, right or center. Default is left.

type	required	default
enum	false	"left"