rd

react-datatable

Datatable component written using react view framework

Showing:

Popularity

Downloads/wk

151

GitHub Stars

57

Maintenance

Last Commit

7yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

RDT - DataTable Written in React

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

Note: react-datatable development will be continued as part of reactor-ui

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

AttributeDescription
propertyunique key to refer to the column
pathoptional 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
headerthe column header
formatteroptional used to format a cell

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial