react-tablis
v0.2.0
Published
Simple table for React with a declarative API
Downloads
3
Maintainers
Readme
emailLink(user) {
var href = `mailto:${user.email}`;
return <a href={href}>{user.email}</a>;
}
render() {
return (
<Table data={this.props.users}>
<Column field="name" />
<Column title="Email" content={this.emailLink}>
<Column field="status" />
<Column title="Actions" content={this.getActionList} />
</Table>
);
}
<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
sortHandler: function (field, direction) {
UsersActionCreator.sortUsers(field, direction);
},
// Custom content
actionListGetter: function (item) {
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
formatDate: function (date) {
return moment(date).format('dddd, MMMM Do YYYY, h:mm:ss a');
},
// Custom formatters
formatters: function () {
return {
date: this.formatDate
}
},
render: function () {
return (
<Table data={this.props.users} keyField="userID" onSort={this.sortHandler}
formatters={this.formatters} elements={ReactIntl}>
<Column title="From" field="startedAt" format={this.formatDate} />
<Column title="To" field="endedAt" format="date" />
<Column field="name" />
<Column field="status" />
<Column field="attendance" element={ReactIntl.FormattedNumber} style="percent" />
<Column title="Last Attendance" field="lastAttendedAt" element="FormattedDate" />
<Column sort="false" content={this.actionListGetter} columnKey="actions" />
</Table>
);
}
}
Features Status
Data
- [x] Use
columnKey
property in column for header cellskey
, fallback totitle
, fallback tofield
, fallback to nothing - [x] 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
- [ ] ???