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.