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.
[bottomDataRender] Function or Function[] or String or String[] function({ columnSummary, column, rowData, tableData, columns, bottomData })
A function that specifies how to render the bottom data (if enabled on the table). Use an array for multiple rows. The rowData is only populated if bottomData of the TacoTable is an array. If a string is provided, it is rendered directly.
[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, { columnSummary, 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
[renderOnNull] Boolean Whether the cell should render if the cellData is null (default: false)
[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
bottomData Array.<Object> | Boolean

Special rows to place at the bottom of the table, unaffected by sorting. If true, populates values based on the bottomData property of the column definition or the column summarizer. If an array, that data is used to render the row.
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
fullWidth Boolean true

Whether the table takes up full width or not
initialSortColumnId String

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

Direction by which to sort initially
onRowClick function

function (rowData)
Callback for when a row is clicked.
onRowDoubleClick function

function (rowData)
Callback for when a row is double clicked.
onSort function

function (columnId, sortDirection, sortedData)
Callback for after the data is sorted when a user clicks a header
plugins Array.<Object>

Collection of plugins to run to compute cell style, cell class name, column summaries
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
sortable Boolean true

Whether the table can be sorted or not
striped Boolean false

Whether the table is striped
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. If the onSort callback is provided, it is fired with the columnId, sort direction, and new sorted data as arguments.

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) renderBottomData() → {React.Component}

Renders the bottom data of the table in a separate tbody. This data is configured by the bottomData table prop and the bottomData field in column definitions. It is not affected by sorting.

Source:
Returns:

<tbody>

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

(private) sort(columnId, props, state, keepSortDirection) → {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
keepSortDirection Boolean false

Whether to keep the same sort direction if sorting on the same column as what the data is already sorted on or not. Used primarily when receiving new data that should maintain its current sort.
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