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#

function DataTable() {
const data = React.useMemo(
() => [
{
fromUnit: "inches",
toUnit: "millimetres (mm)",
factor: 25.4,
},
{
fromUnit: "feet",
toUnit: "centimetres (cm)",
factor: 30.48,
},
{
fromUnit: "yards",
toUnit: "metres (m)",
factor: 0.91444,
},
],
[],
)
const columns = React.useMemo(
() => [
{
Header: "To convert",
accessor: "fromUnit",
},
{
Header: "Into",
accessor: "toUnit",
},
{
Header: "Multiply by",
accessor: "factor",
isNumeric: true,
},
],
[],
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({ columns, data }, useSortBy)
return (
<Table {...getTableProps()}>
<Thead>
{headerGroups.map((headerGroup) => (
<Tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<Th
{...column.getHeaderProps(column.getSortByToggleProps())}
isNumeric={column.isNumeric}
>
{column.render("Header")}
<chakra.span pl="4">
{column.isSorted ? (
column.isSortedDesc ? (
<TriangleDownIcon aria-label="sorted descending" />
) : (
<TriangleUpIcon aria-label="sorted ascending" />
)
) : null}
</chakra.span>
</Th>
))}
</Tr>
))}
</Thead>
<Tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row)
return (
<Tr {...row.getRowProps()}>
{row.cells.map((cell) => (
<Td {...cell.getCellProps()} isNumeric={cell.column.isNumeric}>
{cell.render("Cell")}
</Td>
))}
</Tr>
)
})}
</Tbody>
</Table>
)
}

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

Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel