Pluma
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Overview
Status
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
VisuallyHidden
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1

Table

Figma
Github
Storybook
Legacy component

A container for displaying display data in a tabular format.

A table consists of the following components:

  • Table
    • The container, renders a table tag.
  • TableThead
    • The thead tag to wrap table headers.
  • TableTbody
    • The tbody tag to wrap the table's main data.
  • TableTr
    • The tr tag - a table row.
  • TableTh
    • The th tag - a table header.
  • TableTd
    • The td tag - a table cell.

Importing

The components can be imported via:

import {
	Table,
	TableThead,
	TableTbody
	TableTr,
	TableTh,
	TableTd
} from '@customerio/pluma-components/react';

Usage

To build a table, use the Pluma components like you would the native HTML elements. For example:

Australian birds
NameGenusSpecies
Australian MagpieGymnorhinatibicen
GalahEolophusroseicapilla
Rainbow lorikeetTrichoglossusmoluccanus
<Table caption="Australian birds">
	<TableThead>
		<TableTr>
			<TableTh>Name</TableTh>
			<TableTh>Genus</TableTh>
			<TableTh>Species</TableTh>
		</TableTr>
	</TableThead>

	<TableTbody>
		<TableTr>
			<TableTd>Australian Magpie</TableTd>
			<TableTd>Gymnorhina</TableTd>
			<TableTd>tibicen</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Galah</TableTd>
			<TableTd>Eolophus</TableTd>
			<TableTd>roseicapilla</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Rainbow lorikeet</TableTd>
			<TableTd>Trichoglossus</TableTd>
			<TableTd>moluccanus</TableTd>
		</TableTr>
	</TableTbody>
</Table>

Note: It is required to provide a caption argument, which renders a visually hidden caption tag within the table. This caption is used by assistive technologies to provide context to the table.

TableTh

The TableTh component will automatically receive a scope attribute of col or row, depending on whether it is nested within Thead or Tbody:

Australian birds
NameGenusSpecies
Australian MagpieGymnorhinatibicen
<Table caption="Australian birds">
	<TableThead>
		<TableTr>
			<TableTh>Name</TableTh>
			<TableTh>Genus</TableTh>
			<TableTh>Species</TableTh>
		</TableTr>
	</TableThead>

	<TableTbody>
		<TableTr>
			<TableTh>Australian Magpie</TableTh>
			<TableTd>Gymnorhina</TableTd>
			<TableTd>tibicen</TableTd>
		</TableTr>
	</TableTbody>
</Table>

Variants

The table can render in a few differently styled variants.

Borderless

isBorderless will remove borders between table rows:

Australian birds
NameGenusSpecies
Australian MagpieGymnorhinatibicen
GalahEolophusroseicapilla
Rainbow lorikeetTrichoglossusmoluccanus
<Table 
	isBorderless={true} 
	caption="Australian birds"
>
	<TableThead>
		<TableTr>
			<TableTh>Name</TableTh>
			<TableTh>Genus</TableTh>
			<TableTh>Species</TableTh>
		</TableTr>
	</TableThead>

	<TableTbody>
		<TableTr>
			<TableTd>Australian Magpie</TableTd>
			<TableTd>Gymnorhina</TableTd>
			<TableTd>tibicen</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Galah</TableTd>
			<TableTd>Eolophus</TableTd>
			<TableTd>roseicapilla</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Rainbow lorikeet</TableTd>
			<TableTd>Trichoglossus</TableTd>
			<TableTd>moluccanus</TableTd>
		</TableTr>
	</TableTbody>
</Table>

Striped

isStriped will apply alternating background colors to rows:

Australian birds
NameGenusSpecies
Australian MagpieGymnorhinatibicen
GalahEolophusroseicapilla
Rainbow lorikeetTrichoglossusmoluccanus
<Table 
	isStriped={true} 
	caption="Australian birds"
>
	<TableThead>
		<TableTr>
			<TableTh>Name</TableTh>
			<TableTh>Genus</TableTh>
			<TableTh>Species</TableTh>
		</TableTr>
	</TableThead>

	<TableTbody>
		<TableTr>
			<TableTd>Australian Magpie</TableTd>
			<TableTd>Gymnorhina</TableTd>
			<TableTd>tibicen</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Galah</TableTd>
			<TableTd>Eolophus</TableTd>
			<TableTd>roseicapilla</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Rainbow lorikeet</TableTd>
			<TableTd>Trichoglossus</TableTd>
			<TableTd>moluccanus</TableTd>
		</TableTr>
	</TableTbody>
</Table>

Hover style

shouldHighlightOnHover will apply a background color when hovering over a row:

Australian birds
NameGenusSpecies
Australian MagpieGymnorhinatibicen
GalahEolophusroseicapilla
Rainbow lorikeetTrichoglossusmoluccanus
<Table 
	shouldHighlightOnHover={true} 
	caption="Australian birds"
>
	<TableThead>
		<TableTr>
			<TableTh>Name</TableTh>
			<TableTh>Genus</TableTh>
			<TableTh>Species</TableTh>
		</TableTr>
	</TableThead>

	<TableTbody>
		<TableTr>
			<TableTd>Australian Magpie</TableTd>
			<TableTd>Gymnorhina</TableTd>
			<TableTd>tibicen</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Galah</TableTd>
			<TableTd>Eolophus</TableTd>
			<TableTd>roseicapilla</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Rainbow lorikeet</TableTd>
			<TableTd>Trichoglossus</TableTd>
			<TableTd>moluccanus</TableTd>
		</TableTr>
	</TableTbody>
</Table>

Sometimes, you may need to conditionally enable the hover style only on specific rows. In this case, you can pass the shouldHighlightOnHover prop to the TableTr component directly:

Australian birds
NameGenusSpecies
Australian MagpieGymnorhinatibicen
GalahEolophusroseicapilla
Rainbow lorikeetTrichoglossusmoluccanus
<Table 
	caption="Australian birds"
>
	<TableThead>
		<TableTr>
			<TableTh>Name</TableTh>
			<TableTh>Genus</TableTh>
			<TableTh>Species</TableTh>
		</TableTr>
	</TableThead>

	<TableTbody>
		<TableTr shouldHighlightOnHover={true}>
			<TableTd>Australian Magpie</TableTd>
			<TableTd>Gymnorhina</TableTd>
			<TableTd>tibicen</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Galah</TableTd>
			<TableTd>Eolophus</TableTd>
			<TableTd>roseicapilla</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Rainbow lorikeet</TableTd>
			<TableTd>Trichoglossus</TableTd>
			<TableTd>moluccanus</TableTd>
		</TableTr>
	</TableTbody>
</Table>

Fixed layout

The component accepts a layout prop, which can be set to fixed to set table-layout: fixed on the table.

Australian birds
NameGenusSpecies
Australian MagpieGymnorhinatibicen
GalahEolophusroseicapilla
Rainbow lorikeetTrichoglossusmoluccanus
<Table 
	layout="fixed"
	caption="Australian birds"
>
	<TableThead>
		<TableTr>
			<TableTh>Name</TableTh>
			<TableTh>Genus</TableTh>
			<TableTh>Species</TableTh>
		</TableTr>
	</TableThead>

	<TableTbody>
		<TableTr>
			<TableTd>Australian Magpie</TableTd>
			<TableTd>Gymnorhina</TableTd>
			<TableTd>tibicen</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Galah</TableTd>
			<TableTd>Eolophus</TableTd>
			<TableTd>roseicapilla</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Rainbow lorikeet</TableTd>
			<TableTd>Trichoglossus</TableTd>
			<TableTd>moluccanus</TableTd>
		</TableTr>
	</TableTbody>
</Table>

Clickable headers

The TableTh component accepts an onClick prop. When present, the header will render a button, which will call the provided callback when clicked.

Additionally, the isActive prop to apply a different text color to the header, to indicate that the column is currently "active".

These props can be used when making tables sortable, and clicking headers should invoke the sorting functionality.

Australian birds
Australian MagpieGymnorhinatibicen
GalahEolophusroseicapilla
Rainbow lorikeetTrichoglossusmoluccanus
<Table 
	caption="Australian birds"
>
	<TableThead>
		<TableTr>
			<TableTh
				onClick={() => console.log('Sort by name')}
				isActive={true}
			>
				Name
			</TableTh>

			<TableTh
				onClick={() => console.log('Sort by genus')}
			>
				Genus
			</TableTh>

			<TableTh
				onClick={() => console.log('Sort by species')}
			>
				Species
			</TableTh>
		</TableTr>
	</TableThead>

	<TableTbody>
		<TableTr>
			<TableTd>Australian Magpie</TableTd>
			<TableTd>Gymnorhina</TableTd>
			<TableTd>tibicen</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Galah</TableTd>
			<TableTd>Eolophus</TableTd>
			<TableTd>roseicapilla</TableTd>
		</TableTr>

		<TableTr>
			<TableTd>Rainbow lorikeet</TableTd>
			<TableTd>Trichoglossus</TableTd>
			<TableTd>moluccanus</TableTd>
		</TableTr>
	</TableTbody>
</Table>

Note: The table component itself does not perform any sorting at this time. These props are utilities to make it easier to customize the table to include sorting.

API

PlumaTable extends Box

caption  string (required)

A caption for the table for assistive technologies, but hidden visually.

isBorderless  boolean | undefined

Whether to disable the border style between table rows

isStriped  boolean | undefined

Whether to render table rows with alternating background colors

layout  "auto" | "fixed" | undefined

Default:auto

The layout of the table

shouldHighlightOnHover  boolean | undefined

Whether hovering over the rows should highlight them (change their background color)

PlumaTableTh extends Box

isActive  boolean | undefined

Whether this column is active (for example, when sorting on this column). Changes the color of the column header's text.

onClick  ((e: MouseEvent) => void) | undefined

Whether the cell is clickable. When provided, the cell will render a button, and will have additional hover styles applied. Can be used when implementing click-to-sort functionality, for example.

PlumaTableTr extends Box

isBorderless  boolean | undefined

Whether to disable the border style on this row

shouldHighlightOnHover  boolean | undefined

Whether hovering over this row should highlight it (change its background color)

PlumaTableTd extends Box

withDepthPadding  boolean | undefined

Whether the cell should have extra padding depending on nesting level.

On this page

Importing
Usage
TableTh
Borderless
Striped
Hover style
Fixed layout
Clickable headers
API