react-datatable

RDT - DataTable Written in React

RDT is still in early stages of development. Not even alpha quality.

Demo: http://wmira.github.io/react-datatable/

A simple datagrid/datatable written with Facebook's React view framework.

Features

• Pagination
• Local And Remote Data Sources
• Grid Editor
• Custom Formatter / Renderer
• more to come

Development

1. Install live-server npm install -g live-server
2. Install dependencies $ npm install
3. Run watcher to do auto package of javascript npm run watch
4. live-server Browser will open and you should be able to edit index.html that contains the demo usage and src/js and browser will automatically update.
5. npm run build, npm run build-min builds source and minified source

Install

1. npm install --save-dev react-datatable

Example Usage

1. Displaying an array of data

var data = ...[] //array
var config = {
    style: 'pure',
    cols: [
        { property: "name", editable: true, , header: "Name"  },
        { property: "position", header: "Position"},
        { property: "office", header: "Office"},
        { property: "age", header: "Age"},
        { property: "tax", path: computeTax, header: "Tax", formatter: numberFormatter},
        { editable: true, property: "salary", header: "Salary", formatter: numberFormatter }
    ]
};
 
 
React.render(
    React.createElement(RDT, {
        config: config,
        datasource: { data: data }
 
    }),
    document.getElementById('content')
);
 

Column Attributes

Attribute	Description
property	unique key to refer to the column
path	optional by default, the value is from record[property], if path is given then it is used. path can also be a function which can be used to create a dynamic cell
header	the column header
formatter	optional used to format a cell