emailLink(user) { var href = `mailto:${user.email}`; return {user.email};} render() { return ( );}
<Table>
model={Array<Object>}
The data to show in the table.
keyField={String}
Default: 'id'
The prop name of the unique "key" in each item of the given Data. This is used by React to properly update the rows, when the data changes.
...other
Other properties are transferred to the <table> element.
<Column>
field={String}
Specify the property name to show for each item in the model
array.
content={Function(item):ReactElement}
Default: dataItem[field]
A function that receives the current item being processed as a parameter and is expected to return the custom content for the column cell.
title={String}
Default: titleize(field) || null
The title for the column header cell (<th>
). Defaults to the field name if one is given.
columnKey={String}
Default: title || field
The react unique "key" for the columns. If none is given it will fallback to the column field, then the title. This key is normally just the column name/title.
Target API/Usage
// Server side sorting { UsersActionCreator; } // Custom content { return <ul class="list-inline"> <li><button type="button" class="btn btn-link" data-id="item.userID">Edit</button></li> <li><button type="button" class="btn btn-link" data-id="item.userID">Delete</buton></li> </ul> ; } // Custom formatting { return ; } // Custom formatters { return date: thisformatDate } { return <Table data=thispropsusers keyField="userID" onSort=thissortHandler formatters=thisformatters elements=ReactIntl> <Column title="From" field="startedAt" format=thisformatDate /> <Column title="To" field="endedAt" format="date" /> <Column field="name" /> <Column field="status" /> <Column field="attendance" element=ReactIntlFormattedNumber style="percent" /> <Column title="Last Attendance" field="lastAttendedAt" element="FormattedDate" /> <Column sort="false" content=thisactionListGetter columnKey="actions" /> </Table> ; }
Features Status
Data
- Use
columnKey
property in column for header cellskey
, fallback totitle
, fallback tofield
, fallback to nothing - Use
keyField
property in column for rowkey
, fallback toid
, fallback to nothing
Sorting
- Use sorting callback via
onSort={this.sortHandler}
- Default to server side sorting behaviour (expect the data to be sorted)
- Enable local sorting using
sort={true}
- Disable sorting for table using
sort={false}
- Disable sorting for a column using
sort={false}
on a column
Data Format
- Consider support for React-Intl (formatjs.io)
- Use React.context to set defaults?
- Automatically format the content of the cell, according to the type, ex.
-
String
: titleized -
Date
: ISO8601 -
Number
: comma delimited number, who cares about localization anyway
-
- Custom formatting by passing a formatting function
formatter={this.titleize}
- Use predefined formatter by passing
format="date"
- Disable automatic formatting with
format={false}
Rows
- Allow to wrap columns in an optional row, which will transfer the properties to the
Pagination
- ???
Selection
- ???