Tables
The Table component is a component that offers a styled table.
Use this table like native html tables.
ReferenceError: React is not definedTable modifiers
| Class | Description |
|---|---|
.pui-table | Applied to the table element to define the style standards. |
.pui-table--tr-hover | Applied to the starting table element to add the hover effect on table body rows. |
.pui-table--td-hover | Applied to the starting table element to add the hover effect on table body cells. |
.pui-table--h-borders-none | Removes inner horizontal borders from the table body rows. |
.pui-table--ext-borders-none | Removes external borders for the entire table when applied to the .table element. |
.pui-table--borders-none | Removes 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--scrollable | Makes the table body scrollable in the y direction. |
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 definedAdding pui-table--td-hover to the table will allow the user to highlight individual cells in the table body.
ReferenceError: React is not definedRemove all of the internal horizontal borders with class pui-table--h-borders-none on the table element.
ReferenceError: React is not definedNo external borders to rows using class pui-table--ext-borders-none on the table element.
ReferenceError: React is not definedNo borders to rows using class pui-table--borders-none on the table element.
ReferenceError: React is not definedAdd a pui-table--scrollable class to the table to make the table body scrollable.
ReferenceError: React is not definedTable Examples
ReferenceError: React is not definedTable with links as cells
ReferenceError: React is not definedApply classNames directly on the components
ReferenceError: React is not definedTo 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 definedTo 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 definedTo 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 definedWhen 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 definedProps
Th props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
scope | no | oneOf['col', 'row'] | 'col' | Indicates if the table header is for the row or the column. |
Tr props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
scope | no | oneOf['col', 'row'] | 'col' | Indicates if the table header is for the row or the column. |
TrWithDrawer props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
ariaLabelCollapsed | yes | String | Aria label when the drawer is collapsed | |
ariaLabelExpanded | yes | String | Aria label when the drawer is expanded | |
drawerContent | no | node | Content to render in the expanded drawer | |
onExpand | no | func | Callback for when the drawer is expanded | |
children | no | node | Content 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';