Skip to main content

Pivotal UI

v19.2.2

Tables

The Table component is a component that offers a styled table.

Basic HTML Table

Use this table like native html tables.

ReferenceError: React is not defined

Table modifiers

ClassDescription
.pui-tableApplied to the table element to define the style standards.
.pui-table--tr-hoverApplied to the starting table element to add the hover effect on table body rows.
.pui-table--td-hoverApplied to the starting table element to add the hover effect on table body cells.
.pui-table--h-borders-noneRemoves inner horizontal borders from the table body rows.
.pui-table--ext-borders-noneRemoves external borders for the entire table when applied to the .table element.
.pui-table--borders-noneRemoves all borders, internal and external, when applied to the .table element.Removes all borders, internal and external, when applied to the .table element.
.pui-table--scrollableMakes the table body scrollable in the y direction.
Table row hover

Adding a pui-table--tr-hover className to the table will change the background color to the table body rows on hover.

ReferenceError: React is not defined
Table cell hover

Adding pui-table--td-hover to the table will allow the user to highlight individual cells in the table body.

ReferenceError: React is not defined
No horizontal borders

Remove all of the internal horizontal borders with class pui-table--h-borders-none on the table element.

ReferenceError: React is not defined
No external borders

No external borders to rows using class pui-table--ext-borders-none on the table element.

ReferenceError: React is not defined
No borders

No borders to rows using class pui-table--borders-none on the table element.

ReferenceError: React is not defined
Scrollable table body

Add a pui-table--scrollable class to the table to make the table body scrollable.

ReferenceError: React is not defined

Table Examples

Sortable Table Example
ReferenceError: React is not defined
Link Cell Table Example

Table with links as cells

ReferenceError: React is not defined
Cell with className Example

Apply classNames directly on the components

ReferenceError: React is not defined
Cell with onClick Example

To apply an onClick to a table element, provide an interactive element as a child, add the onClick to that element, and provide a visual indication that the cell is interactive for accessibility

ReferenceError: React is not defined
Cell Tooltip Example

To add a tooltip to a table element, render the TooltipTrigger component. Note that cells with TooltipTriggers cannot be type-ellipsis or the tooltip will be cut off.

ReferenceError: React is not defined
Cell Width Example

To specify the width of the columns use one of the width-{n} helper classes on the table header or provide your own class to define the widths.

ReferenceError: React is not defined
Expandable table rows

When the chevron is clicked, the drawer content is revealed. Provide the ariaLabelCollapsed and ariaLabelExpanded props to give a more descriptive label to assistive tech when the drawer is collapsed or expanded.

ReferenceError: React is not defined

Props

Th props

PropertyRequiredTypeDefaultDescription
scopenooneOf['col', 'row']'col'Indicates if the table header is for the row or the column.

Tr props

PropertyRequiredTypeDefaultDescription
scopenooneOf['col', 'row']'col'Indicates if the table header is for the row or the column.

TrWithDrawer props

PropertyRequiredTypeDefaultDescription
ariaLabelCollapsedyesStringAria label when the drawer is collapsed
ariaLabelExpandedyesStringAria label when the drawer is expanded
drawerContentnonodeContent to render in the expanded drawer
onExpandnofuncCallback for when the drawer is expanded
childrennonodeContent to render in the table row

Imports

Import React components (including CSS):

import {Table, Caption, Thead, Tbody, Tfoot, Tr, Th, Td, TrHeaderForDrawers, TrWithoutDrawer, TrWithDrawer} from 'pivotal-ui/react/table';

Import CSS only:

import 'pivotal-ui/css/tables';