Table

Table component is 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>

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

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

<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

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"gray"

size

Type

"sm" | "md" | "lg"

Default

"md"

variant

Type

"simple" | "striped" | "unstyled"

Default

"simple"

Td

isNumeric

Description

Aligns the cell content to the right

Type

boolean

Th

isNumeric

Description

Aligns the cell content to the right

Type

boolean

TableCaption

placement

Description

The placement of the table caption. This sets the `caption-side` CSS attribute.

Type

"top" | "bottom"

Default

"bottom"