react-tables

React table component.

• React components
• Flux integration
• Scrollable with fixed headers
• Pagination
• Integrate with Bootstrap 3

Installation

npm install react-tables

Usage

var React = require('react');
var Table = require('react-tables');
var RowInformation = require('./RowInformation');

var columns = [
  { title: 'Name', field: 'name' },
  { title: 'Info', field: 'information', component: RowInformation },
  { title: 'Id', field: 'id', formatter: function (value, row) {
      return '<a href="/user/'+value +'">' + value + '</a>';
    }
  }
];

var data = [
  { name: 'foo', information: { age: 12 }, id: 1 },
  { name: 'bar', information: { age: 11 }, id: 2 }, 
  { name: 'baz', information: { age: 10 }, id: 3 }
];

React.createClass({
  getData: function (params) {
    console.log(params); // { limit: 10, skip: 0 }

    var self = this;

    setTimeout(function () {
      self.setData();
    }, 1000);
  }

  setData: function () {
    return {
      rows: data,
      totalRows: 3
    };
  }

  render: function () {
    <div>
      <Table ref='table' columns={columns} getData={getData} >
    </div>,
  }
});

API

Param	Type	Description
columns	Array	Columns config
pageNumber	Number	Init page: 1, 2, 3
pageSize	Numer	Size table
classes	String	Classname table
getData	Function	Fetch function

Columns

Param	Type	Description
title	String	Column title
field	String	Field name
formatter	Function	The cell formatter function
Component	Object	React component

License

MIT