"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Table
Tables are used to organize and display data efficiently. It renders a <table>
element by default.
Import#
import {Table,Thead,Tbody,Tfoot,Tr,Th,Td,TableCaption,TableContainer,} from '@chakra-ui/react'
Table Container#
The table container component renders a div
that wraps the table component to
not allow the table to overflow the parent container, not allow data content to
break lines without exception, and enable horizontal scrolling.
It renders the following props:
Property | Value |
---|---|
display | block |
maxWidth | 100% |
overflowX | auto |
overflowY | hidden |
whiteSpace | nowrap |
It can optionally accept the overflow
or overflowX
props to override the
overflowX
default value of auto
rendered by this component.
This component will be shown on all examples in this page. View the examples in mobile to see the effects.
Table Variants#
The table component comes in 3 variants: simple
, striped
, and unstyled
.
The default variant is simple
Change the
variant
values to see the other variants.
Simple Table#
<TableContainer><Table variant='simple'><TableCaption>Imperial to metric conversion factors</TableCaption><Thead><Tr><Th>To convert</Th><Th>into</Th><Th isNumeric>multiply by</Th></Tr></Thead><Tbody><Tr><Td>inches</Td><Td>millimetres (mm)</Td><Td isNumeric>25.4</Td></Tr><Tr><Td>feet</Td><Td>centimetres (cm)</Td><Td isNumeric>30.48</Td></Tr><Tr><Td>yards</Td><Td>metres (m)</Td><Td isNumeric>0.91444</Td></Tr></Tbody><Tfoot><Tr><Th>To convert</Th><Th>into</Th><Th isNumeric>multiply by</Th></Tr></Tfoot></Table></TableContainer>
Striped Table#
<TableContainer><Table variant='striped' colorScheme='teal'><TableCaption>Imperial to metric conversion factors</TableCaption><Thead><Tr><Th>To convert</Th><Th>into</Th><Th isNumeric>multiply by</Th></Tr></Thead><Tbody><Tr><Td>inches</Td><Td>millimetres (mm)</Td><Td isNumeric>25.4</Td></Tr><Tr><Td>feet</Td><Td>centimetres (cm)</Td><Td isNumeric>30.48</Td></Tr><Tr><Td>yards</Td><Td>metres (m)</Td><Td isNumeric>0.91444</Td></Tr></Tbody><Tfoot><Tr><Th>To convert</Th><Th>into</Th><Th isNumeric>multiply by</Th></Tr></Tfoot></Table></TableContainer>
Table Sizing#
The table component is available in 3 sizes: sm
, md
, lg
. The default size
is md
.
<TableContainer><Table size='sm'><Thead><Tr><Th>To convert</Th><Th>into</Th><Th isNumeric>multiply by</Th></Tr></Thead><Tbody><Tr><Td>inches</Td><Td>millimetres (mm)</Td><Td isNumeric>25.4</Td></Tr><Tr><Td>feet</Td><Td>centimetres (cm)</Td><Td isNumeric>30.48</Td></Tr><Tr><Td>yards</Td><Td>metres (m)</Td><Td isNumeric>0.91444</Td></Tr></Tbody><Tfoot><Tr><Th>To convert</Th><Th>into</Th><Th isNumeric>multiply by</Th></Tr></Tfoot></Table></TableContainer>
Props#
Table#
colorScheme
colorScheme
"gray"
size
size
"sm" | "md" | "lg"
"md"
variant
variant
"simple" | "striped" | "unstyled"
"simple"
Td#
isNumeric
isNumeric
Aligns the cell content to the right
boolean
Th#
isNumeric
isNumeric
Aligns the cell content to the right
boolean
TableCaption#
placement
placement
The placement of the table caption. This sets the `caption-side` CSS attribute.
"top" | "bottom"
"bottom"