Skip to content
A series of react components for tables
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
example
src
.coveralls.yml
.gitignore
.jshintrc
.travis.yml
LICENSE
README.md
bower.json
gulpfile.js
index.js
package.json
preprocessor.js

README.md

#React-table-acula

Build Status

Coverage Status

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:

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
You can’t perform that action at this time.