/data-multiview

Component made with react for showing data in multiple view (grid, table)

Primary LanguageJavaScript

@nodeflux/data-multiview

React component made for showing list of data, for simplfy creating view. Equiped with standard action like edit and delete. But also can be customized with other action and icon. Currently only have two type of view which is Grid and Table

Installation

npm install --save @nodeflux/data-multiview

or

yarn add @nodeflux/data-multiview

Usage

CSS:

require("@nodeflux/data-multiview/build/css/index.css");

JS:

import  React  from  'react';
import  DataList, { Filter, Pagination, ActionBlock } from  '@nodeflux/data-multiview';

export  default class  App  extends  React.Component {

  action  = (actionName, indexData) => {
    console.log('action APP', actionName, indexData);
  }
  
  render() {
    return (	    
      <div>		    
        <DataList  
        type="table"  
        config={config}  
        data={data}  
        onAction={this._action}  
        index="fullname"  />		    
      </div>	    
     )	    
  }    
}

var config = [
  { text: 'Image', type: 'image', textPath: 'image', valuePath: 'image' },
  { text: 'Fullname', type: 'string', textPath: 'fullname', valuePath: 'fullname' },
  { text: 'Role', type: 'string', textPath: 'role', valuePath: 'role' },
  { text: 'Datetime', type: 'date', textPath: 'datetime', valuePath: 'datetime' },
  { text: 'Json', type: 'json', textPath: 'json', valuePath: 'json' },
]

var data = [
  { fullname: 'nama saya', role: 'role saya', json: { "name": "binchen" }, datetime: '2018-02-04 13:37:27.736024', image: imgPathHere },
]

Other component usage

Method Description
Filter Filter usage example.
Pagination Pagination usage example.
ActionBlock ActionBLock usage example.