TacoTable

TacoTable

React component for rendering a table, uses <table className="taco-table">

Note that Renderable means anything React can render (e.g., String, Number, React.Component, etc.).

Column Definition

Columns are defined by objects with the following format:

Name Type Description
id String The id of the column. Typically corresponds to a key in the rowData object.
[className] String The class name to be applied to both <td> and <th>
[firstSortDirection] Boolean The direction which this column gets sorted by on first click
[header] Renderable What is rendered in the column header. If not provided, uses the columnId.
[renderer] Function function (cellData, column, rowData, rowNumber, tableData, columns)
The function that renders the value in the table. Can return anything React can render.
[rendererOptions] Object Object of options that can be read by the renderer
[simpleRenderer] Function function (cellData, column, rowData, rowNumber, tableData, columns)
The function that render the cell's value in a simpler format. Must return a String or Number.
[sortType] String The DataType of the column to be used strictly for sorting, if not provided, uses type - number, string, etc
[sortValue] Function function (cellData, rowData)
Function to use when sorting instead of value.
[summarize] Function function (column, tableData, columns)
Produces an object representing a summary of the column (e.g., min and max) to be used in the
[tdClassName] Function or String function (cellData, columnSummary, column, rowData, highlightedColumn, highlightedRow, rowNumber, tableData, columns)
A function that returns a class name based on the cell data and column summary or other information. If a string is provided, it is used directly as the class name.
[tdStyle] Function or Object function (cellData, columnSummary, column, rowData, highlightedColumn, highlightedRow, rowNumber, tableData, columns)
A function that returns the style to be applied to the cell. If an object is provided, it is used directly as the style attribute.
[thClassName] String The class name to be applied to <th> only
[type] String The DataType of the column - number, string, etc
[value] Function or String function (rowData, rowNumber, tableData, columns)
Function to produce cellData's value. If a String, reads that as a key into the rowData object. If not provided, columnId is used as a key into the rowData object.
[width] Number or String The value to set for the style width property on the column.

Column Groups

Column groups are defined by objects with the following format:

Name Type Description
[className] String The className to apply to cells and headers in this group
columns String[] The column IDs to render
[header] Renderable What shows up in the table header if provided

Plugins

Plugins are defined by objects with the following format:

Name Type Description
[columnTest] Function A function that takes a column and returns true or false if it the plugin should be run on this column. Default is true for everything.
id String The ID of the plugin
[summarize] Function A column summarizer function
[tdStyle] Function or Object The TD style function
[tdClassName] Function or String The TD class name function

Constructor

new TacoTable(props)

Parameters:
Name Type Description
props Object

React props
Properties:
Name Type Default Description
columns Array.<Object>

The column definitions
columnGroups Array.<Object>

How to group columns - an array of { header:String, columns:[colId1, colId2, ...], className:String}
columnHighlighting Boolean false

Whether or not to turn on mouse listeners for column highlighting
className String

The class names to apply to the table
data Array.<Object>

The data to be rendered as rows
initialSortColumnId String

Column ID of the data to sort by initially
initialSortDirection Boolean true(Ascending)

Direction by which to sort initially
plugins Array.<Object>

Collection of plugins to run to compute cell style, cell class name, column summaries
sortable Boolean true

Whether the table can be sorted or not
striped Boolean false

Whether the table is striped
fullWidth Boolean true

Whether the table takes up full width or not
rowClassName function

Function that maps (rowData, rowNumber) to a class name
rowHighlighting Boolean true

Whether or not to turn on mouse listeners for row highlighting
HeaderComponent function TacoTableHeader

allow configuration of which component to use for headers
RowComponent function TacoTableRow

allow configuration of which component to use for rows
Source:

Extends

  • React.Component

Methods

componentWillReceiveProps(nextProps) → {void}

On receiving new props, sort the data and recompute column summaries if the data has changed.

Parameters:
Name Type Description
nextProps Object

The next props
Source:
Returns:
Type
void

(private) handleColumnHighlight(columnId) → {void}

Callback when a column is highlighted

Parameters:
Name Type Description
columnId String

The ID of the column being highlighted
Source:
Returns:
Type
void

(private) handleHeaderClick(columnId) → {void}

Callback when a header is clicked. If a sortable table, sorts the table.

Parameters:
Name Type Description
columnId String

The ID of the column that was clicked.
Source:
Returns:
Type
void

(private) handleRowHighlight(rowData) → {void}

Callback when a row is highlighted

Parameters:
Name Type Description
rowData Object

The row data for the row that is highlighted
Source:
Returns:
Type
void

render() → {React.Component}

Main render method

Source:
Returns:

The table component

Type
React.Component

(private) renderGroupHeaders() → {React.Component}

Renders the group headers above column headers

Source:
Returns:

<tr>

Type
React.Component

(private) renderHeaders() → {React.Component}

Renders the headers of the table in a thead

Source:
Returns:

<thead>

Type
React.Component

(private) renderRows() → {React.Component}

Renders the rows of the table in a tbody

Source:
Returns:

<tbody>

Type
React.Component

shouldComponentUpdate(nextProps, nextState) → {Boolean}

Uses shallowCompare

Parameters:
Name Type Description
nextProps Object

The next props
nextState Object

The next state
Source:
Returns:

If the component should update

Type
Boolean

(private) sort(columnId, props, state) → {Object}

Sort the table based on a column

Parameters:
Name Type Default Description
columnId String

the ID of the column to sort by
props Object this.props
state Object this.state
Source:
Returns:

Object representing sort state { sortDirection, sortColumnId, data }.

Type
Object

(private) summarizeColumns(props) → {Array}

Computes a summary for each column that is configured to have one.

Parameters:
Name Type Description
props Object

React component props
Source:
Returns:

array of summaries matching the indices for columns, null for those without a summarize property.

Type
Array