Chakra UI + React Table

This example shows how to build a sortable data table with Chakra UI's table components, and the React Table library.

Explore on codesandbox

Imports#

import { Table, Thead, Tbody, Tr, Th, Td, chakra } from '@chakra-ui/react'
import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons'
import { useTable, useSortBy } from 'react-table'

Usage#

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

Many examples from the React Table docs are portable to use Chakra UI's components by converting <table /> to <Table />, <td /> to <Td />, etc.

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel