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>
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" |