Table

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

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:

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:

Variants

The table can render in a few differently styled variants.

Borderless

isBorderless will remove borders between table rows:

Striped

isStriped will apply alternating background colors to rows:

Hover style

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

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:

Fixed layout

The component accepts a layout prop, which can be set to fixed to set table-layout: fixed on the 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.

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.