wmira / react-datatable

Datatable component written using react view framework

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

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

react-datatable's Issues

change to webpack build

change to webpack build

Allow a column with custom controls to be defined

Maybe it would make sense to allow the user to define a custom column with room for custom controls like delete (simply X with confirmation) or edit (could open a modal).

The extra column would look something like this in configuration:

...
{ controls: [deleteControl, editControl]}
...

function deleteControl(row) {
    // create delete button + logic here
    // ie. it would ask for a confirmation and if confirmed, trigger table update
    // (either direct, through flux etc.)
    ...
}

Note that it would be very handy if row parameter contained whole data objects instead of just the visible columns. Some data may be hidden on purpose esp. if there is a lot of it.

Implement Common Cell Editors

We should be able to implement this cleanly with the new datasource implementation

1. An Up/Down value editor. If its a number then this up/down toggle can increment and decrement the value
2. A Select/Key Value editor.
3. A Calendar Editor

Update event mechanism such that we can play nicely with Flux arch

update datasource event mechanism so we can play nicely with any flux architecture based apps

TypeError: React.createClass is not a function

TypeError: React.createClass is not a function
./node_modules/react-datatable/dist/js/react-datatable.js/</<
node_modules/react-datatable/dist/js/react-datatable.js:1059

1056 | *
1057 | *
1058 | */

1059 | var RDTCell = React.createClass({displayName: "RDTCell",
1060 | componentWillReceiveProps : function(newProps) {
1061 | this.setState({ editMode : false });
1062 | },

Sorting issue when sorting Asc/Desc on same property

1. Sort a column Asc
2. Sort the same column Desc ( doesn't work )

Update the paginator UI

1. Update the paginator ui
2. Ensure that its possible to completely create paginator that is outside the datatable

Allow development without a global install of `live-server`

You can copy the basic idea from https://github.com/webpack/react-starter .

feature to enable custom cell renderer

there is no way to add custom views within cell. e.g. a edit link for example. there should be a way call a custom renderer or probably a react component

add test harness

put some test harness in place

create a demo page via github.io

Implement basic editing

Implement basic cell editing

Implement Sorting

re-implement record update handling

currently the cell component does an update automatically. we need to find a way to enable to listen to events from the top level component. this will enable users to subscribe to table changes.

** provide a mixin such that we can listen to all children
** then we can use this.props.children to register dynamically without the need to pass listeners

fix standalone npm module

this project is broken when importing from npm. fix the dist folder properly such that it works on different builds

1. npm
2. bower
3. direct browser include

Table Column Filters

It should be possible to automatically filter to show only particular rows with a particular column values.

Implement derived cell / dynamic values

implement way to dynamically create display cell values

Implement pagination

Need one example of the following...

Could you please kindly consider adding one more example html file with the following features...Please kindly attach to the project examples folder as it would be helpful for many as well..

1.Read only grid as above without edit, delete and save option.
2. The grid with many export options - pdf, csv, excel, word etc.,
3. When the pagination is enabled - goto page option to navigate to particular page
4. Copy to clipboard and print option
5. Support quickest rendering for alteast 5,000 rows with page size as 10, 100, 500, 1000, 5000
6. Search all columns or individual columns
7. Export selected or all columns

Example grid
http://institut-de-genomique.github.io/Ultimate-DataTable/
https://w3lessons.info/2015/07/13/export-html-table-to-excel-csv-json-pdf-png-using-jquery/

Reference

1. http://2.bp.blogspot.com/-yTiytux2848/Vcj-b5FjyUI/AAAAAAAAdQk/8rzPAsyU4Dw/s1600/jQuery%2Bdatatables%2Bexport%2Bto%2Bpdf.png
   2 . https://www.phpflow.com/wp-content/uploads/2015/09/export-table-data-toexcel-png-pdf.png
   https://i.stack.imgur.com/XeCzz.png