react-tablis v0.2.0

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

• Use columnKey property in column for header cells key, fallback to title, fallback to field, fallback to nothing
• Use keyField property in column for row key, fallback to id, 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

• ???