Components / Tables

Tables

The Table component is a robust component that offers a styled table. If the rows change, the content on the page will update.

Several enhanced Table components are also available:

SortableTable: rows can be sorted ascending or descending by a chosen column.
FlexTable: uses div tags to compose a table rather than traditional HTML tags.
SortableFlexTable: a SortableTable that is composed of div tags.
AdvancedTable: a Table that includes all plugins

ReferenceError: React is not defined

ReferenceError: React is not defined

ReferenceError: React is not defined

ReferenceError: React is not defined

ReferenceError: React is not defined

ReferenceError: withRowClassName is not defined

ReferenceError: React is not defined

ReferenceError: React is not defined

ReferenceError: React is not defined

ReferenceError: React is not defined

Using plugins

The base Table component has a limited feature-set. Users can compose Tables with additional features by using plugins.

Here are the plugins provided by Pivotal UI:

withCellClassName
withCellEllipsis
withCellOnClick
withCellTooltip
withCellWidth
withFlex
withFooterRow
withRenderTdChildren
withRenderThChildren
withRowClassName
withRowDrawer
withRowLink
withScrollableTbody
withSorting

A composed table can be created by composing one or more of the above plugins:

import {withFlex, withSorting, Table} from 'pivotal-ui/react/table';
const ComposedTable = withFlex(withSorting(Table));
ReactDOM.render(<ComposedTable columns={columns} data={data}/>

Or with lodash.flow:

import flow from 'lodash.flow';
const ComposedTable = flow(withFlex, withSorting)(Table);

The following examples demonstrate the individual usage of each of the above plugins.

ReferenceError: withFlex is not defined

ReferenceError: withCellLink is not defined

ReferenceError: withCellClassName is not defined

ReferenceError: withRowClassName is not defined

ReferenceError: withCellEllipsis is not defined

ReferenceError: withCellOnClick is not defined

ReferenceError: withRenderTdChildren is not defined

ReferenceError: withRenderThChildren is not defined

ReferenceError: withCellTooltip is not defined

ReferenceError: withCellWidth is not defined

ReferenceError: withFooterRow is not defined

ReferenceError: withRowDrawer is not defined

ReferenceError: withRowLink is not defined

ReferenceError: withSorting is not defined

ReferenceError: withScrollableTbody is not defined

Writing plugins

The Table component renders the following DOM elements: table, thead, tbody, tfoot, tr, th, td.

Table plugins provide the ability to:

inspect and inject new props
use a custom DOM element or React component in place of one of the above standard table elements

In order to write a new plugin:

Create a new file that imports TablePlugin from pivotal-ui/react/table.
```
import {TablePlugin} from 'pivotal-ui/react/table';
```

Export a function that takes a Table argument:

export function withCellColor(Table) { /* ... */ }

Inside the function, return a class that extends TablePlugin:

return class TableWithCellColor extends TablePlugin { /* ... */}

In the class, define a render function that returns the result of calling this.renderTable with the Table argument, and an Object:
```
render() {
return this.renderTable(Table, { /* ... */ }
}
```

The Object can contain any of the following keys:

Tag keys: tableTag, theadTag, tbodyTag, tfootTag, trTag, thTag, tdTag
Prop keys: table, thead, tbody, tfoot, tr, th, td

The value should be a callback.

For Tag callbacks, relevant context is passed as an argument. The callback should return a new DOM element as a String or a React Component to be used in place of the standard HTML element.

For Prop callbacks, the first argument is the props that the element will receive. The second argument is relevant context. The callback should return any new props that the element should be rendered with. They will generally overwrite any pre-existing props. The className and style props will be merged with the old values.

ReferenceError: Table is not defined

For additional examples, review the plugins that Pivotal UI provides.

Table modifiers

Class	Description
`.table`	Applied to the starting element to define the style standards.
`.tr-hover`	Applied to the starting table element or the desired row to add the hover effect.
`.td-hover`	Applied to the starting .table element to change the table row hover effect to a table cell hover.
`.tr-no-h-borders`	Removes inner horizontal borders from the desired .table or table row element.
`.table-no-ext-borders`	Removes external borders for the entire table when applied to the .table element.
`.table-no-borders`	Removes all borders, internal and external, when applied to the .table element.Removes all borders, internal and external, when applied to the .table element.
`.table-td-pal`	Applied to table cell to add 8px vertical padding
`.table-td-paxl`	Applied to table cell to add 16px vertical padding

Props

Table props

Property	Required	Type	Description
`columns`	no	Array	Metadata about columns
`data`	yes	Array	The data to display in the table
`footerRow`	no	Any	Anything that evaluates into HTML. Only valid when used with `withFooterRow` plugin.
`rowClassName`	no	Function	Function with input `({rowDatum, isHeader, rowIndex})` and outputs a string. Only valid when used with `withRowClassName` plugin.
`rowDrawer`	no	Function	Function with input `(rowIndex)`. Only valid when used with `withRowDrawer` plugin.
`rowLink`	no	Object	Object comprising of `{link, onClick}`. `link` is a function whose input is `{rowDatum}` and outputs an `href`. `onClick` is a function that is executed when the row is clicked. Only valid with `withRowLink` plugin.

Column object props

Property	Required	Type	Default	Description
`attribute`	yes	String		The key to use in the data prop to get data for that column
`className`	no	String or Function		The class(es) to apply to a column. If this is a function, the inputs are `(rowDatum, isHeader)`. Only valid when used with `withCellClassName` plugin.
`displayName`	no	String		The text in the TableHeader for that column
`ellipsis`	no	Boolean	false	Ellipsify overflow text. Only valid when used with `withCellEllipsis` plugin.
`link`	no	Function		The link destination. Only valid when used with `withCellLink` plugin.
`onClick`	no	Function		The function to execute when the cell is clicked. The inputs to this function are `(event, rowDatum)`. Only valid when used with `withCellOnClick` plugin.
`renderTdChildren`	no	Function		Function which will be called to render custom cell children. Called with `rowDatum` as its argument. Only valid when used with `withRenderTdChildren` plugin.
`renderThChildren`	no	Function		Function which will be called to render custom header children. Only valid when used with `withRenderThChildren` plugin.
`sortable`	no	Boolean		Determines whether a column is sortable. Only valid when used with `withSorting` plugin.
`sortBy`	no	Function		Function that determines sort order. The input is the cell data. Only valid when used with `withSorting` plugin and if `sortable` is true.
`tooltip`	no	Function		Function whose inputs are `({isHeader}, rowDatum)` and should output an object containing `{text, size, theme, showIcon}`. `text` and `size` are used in the Tooltip Component. `theme` is a prop of the OverlayTrigger Component. `showIcon` determines if the info icon is shown. Only valid when used with `withCellTooltip` plugin.
`width`	no	String		Can be any valid CSS `width` input. Only valid when used with `withCellWidth` plugin.

Imports

Import React components (including CSS):

import {Table, FlexTable, SortableTable, SortableFlexTable, AdvancedTable} from 'pivotal-ui/react/table';

Import CSS only:

import 'pivotal-ui/css/tables';