#React-table-acula

React-Table-Acula Github Page

##Examples

Complex Table - The configuration for this table is listed below it has custom formatters, search, paging, sorting and custom react components.

Using Backbone - Uses a Backbone view for its base but is a much simpler example.

##Components:

• Table
• Pagination
• PageableTable
• SearchablePageableTable

A complete rethink of Backbone-React-UI

#Install

npm install react-table-acula --save

#Usage

The table components are driven by a collection and a configuration.

##Config

A sample config would look like this:

var columns = {
  'ID': {
    field: 'id',
    display: 'string',
    sortable: true
  },
  'First Name' : {
    field:'first_name',
    display: 'string',
    sortable: true
  },
  'Last Name' : {
    field: 'last_name',
    display: 'string',
    sortable: true
  },
  'City' : {
    field: 'address.city',
    display: 'string'
  },
  'State' : {
    field: 'address.state',
    display: 'string'
  },
  'Messages' : {
    field: 'messages',
    display: 'list'
  },
  'Custom' : {
    field: 'address.state',
    display: 'custom',
    format: function(field) {
      return field.toLowerCase();
    }
  },
  'RCL' : {
    display: 'react',
    component:  React.createClass({
        render: function() {
          return (
            <div className="class">
              <ol>
                <li>{this.props.model.first_name}</li>
                <li>{this.props.model.last_name}</li>
                <li>{this.props.model.address.city}</li>
              </ol>
            </div>
          );
        }
      });
  },
  'Edit' : {
    action: 'edit',
    display: 'button',
    classes: 'btn-success'
  },
  'Remove' : {
    action: 'delete',
    display: 'button',
    classes: 'btn-warning',
    icon: 'glyphicon-remove'
  }
};

• The key of the object is the displayed header name
• Strings - display a field as text.
• Lists - will loop over an array and display the value as a string in an unordered list
• Buttons - Display a button. contain an action which add that field as a class assigned to that cell. Additional classes can be added through the "classes" field. Additionally you can add a glyphicon.
• Custom - pass in a function that takes the field as a parameter and then you would format that column as needed. Great for formatting dates.
• React - Pass in a custom react component. The row is passed in as a prop called model into this custom react component.
• Strings, Custom and Lists can use dot access to access a nested object like address.city for example.

##Callbacks

Callbacks are a necessary evil to making this all work.

All of them are required in this case. But it allows for some flexibility in this library.

As you implment you decide how you want search, or pagination work, server or client. Just pass the new values into the props of the react component and it'll rerender.

#Props

##Table

|Prop|Type| Required| |-----|----|--------| |collection|array| true| |columns|object| true| |sortingCallback|function| true| |sortOrder|number| false| |sortKey|string| false| |striped|bool| false| |bordered|bool| false| |condensed|bool| false| |hover|bool| false|

##Pagination

|Prop|Type| Required| |-----|----|--------| |totalPages|number| true| |currentPage|number| true| |nextPageCallback|function| true| |pageCallback|function| true| |nextPageCallback|function| true| |maximumPages|number| false|

##PageableTable

Contains all of the props of the paginator and the table

##SearchablePageableTable

Contains all of the props of the paginator and the table as well as the following:

|Prop|Type| Required| |-----|----|--------| |searchCallback|function| true| |searchResetCallback|function| true|