Table

A 12px container on Colors/surface/raised. 40px header row and footer on Colors/surface/muted, 48px rows with Colors/border/subtle dividers. Includes cell text, pagination and LinkCard.

Figma: 10 / Components / Table

Name	Source	Total given
Jacob Jones	Facebook Direct	$169.43
Jerome Bell	Platform	$779.58
Darlene Robertson	Messenger Ads	$576.28

Showing 1 to 3 of 3 supporters

Usage

Source: src/components/ui/table.tsx, src/components/ui/pagination.tsx, src/components/ui/link-card.tsx

import {
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableFooterBar,
    TableHead,
    TableHeader,
    TableRow
} from '@/components/ui/table'

<TableContainer>
    <Table>
        <TableHeader>
            <TableRow>
                <TableHead sort='ascending' onSort={toggleSort}>Name</TableHead>
                <TableHead align='end'>Total given</TableHead>
            </TableRow>
        </TableHeader>
        <TableBody>
            <TableRow>
                <TableCell>Jacob Jones</TableCell>
                <TableCell align='end'>$169.43</TableCell>
            </TableRow>
        </TableBody>
    </Table>
    <TableFooterBar>Showing 1 to 1 of 1 supporters</TableFooterBar>
</TableContainer>

Examples

Cell text

A value with supporting text (text-detail), optionally strong and with a leading icon.

You Are Not Alone03/20/2024

Pagination

24px page buttons; the current page fills with Colors/action/primary.

LinkCard

A compact tile that opens or copies a link, used inside table cells.

See Flow

Journey URLhttps://m.me/stopsoldiersuicide

When to use

When to reach for it, and when to use something else.

Use it for

Lists of records people compare or act on.

The table blocks for supporters, links and tools.

Avoid

Layout. Tables are for data only.

Rows taller than their content needs.

API reference

TableHead

Prop	Type	Default	Description
align	'start' \| 'end' \| 'center'	'start'	Numbers align to the end.
sort	'ascending' \| 'descending' \| 'none' \| 'unsorted'	–	Shows the sort icon; active sorts use Colors/icon/brand.
onSort	() => void	–	Makes the header a sort button.

TableRow

Prop	Type	Default	Description
selected	boolean	false	Selected rows use Colors/text/selection-background.

Pagination

Prop	Type	Default	Description
page	number	–	The current page, from 1.
pageCount	number	–	Total pages.
onPageChange	(page: number) => void	–	Called with the new page.
siblings	number	2	Pages shown either side of the current one.

PreviousSwitch NextTabs