@asphalt-react/table v1.16.0

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>john@random.com</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>George</TableCell>
      <TableCell>Bush</TableCell>
      <TableCell>george@random.com</TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

children

Content to render inside the Table

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.

TableHead

Props

children

React node to render inside the TableHead

TableBody

Props

children

React node to render inside the TableBody

TableRow

Props

children

React node to be rendered within the TableRow

selected

Apply selected look to highlight the selected row

TableHeaderCell

Props

children

Content to display inside the TableHeaderCell

align

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

TableCell

Props

children

Content to render inside the TableCell

align

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