Table

Tables are used to organize and display data efficiently. It renders a <table> element by default.

Import#

import { Table, Thead, Tbody, Tr, Th, Td, TableCaption } from "@chakra-ui/react"

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#

Imperial to metric conversion factors
To convertintomultiply by
inchesmillimetres (mm)25.4
feetcentimetres (cm)30.48
yardsmetres (m)0.91444
Editable Example

Striped Table#

Imperial to metric conversion factors
To convertintomultiply by
inchesmillimetres (mm)25.4
feetcentimetres (cm)30.48
yardsmetres (m)0.91444
Editable Example

Table Sizing#

The table component is available in 3 sizes: sm, md, lg. The default size is md.

To convertintomultiply by
inchesmillimetres (mm)25.4
feetcentimetres (cm)30.48
yardsmetres (m)0.91444
Editable Example

Props#

Table#

NameTypeDescriptionDefault
colorSchemestring-
size"sm" | "md" | "lg"md
variant"simple" | "striped" | "unstyled"simple

Td#

NameTypeDescriptionDefault
isNumericbooleanAligns the cell content to the right-

Th#

NameTypeDescriptionDefault
isNumericbooleanAligns the cell content to the right-

TableCaption#

NameTypeDescriptionDefault
placement"top" | "bottom"The placement of the table caption. This sets the `caption-side` CSS attribute."bottom"