react-grid-data

A-Chart is a customisable ReactJS Library/Package to address all posibilities of Reporting Functionality, Including different types data representations like Grid, Charts, etc...

var data=[] // Either Array of objects or URL which will give json data ; 
var config={};
var data ="https://example.com/data";// You can give direct URL to get array of data
<List items={data} config={config} />

Any suggestions, Issues, Please write us to [e-mail]

Usage (Working example).

import React, { Component } from 'react';
import List from 'a-chart'
class App extends React.Component {
  render() {
    const data = [
      { id: 1, make: "Toyota", model: "RAV4", price: 26500, cur: "USD" },
      { id: 2, make: "Toyota", model: "Camry Hybrid", price: 27562, cur: "USD" },
      { id: 3, make: "Mazda", model: "CX-5", price: 32345, cur: "USD" },
      { id: 4, make: "Mazda", model: "CX-3", price: 20390, cur: "USD" }
    ];
    var config = {
       width:"555",// width of chart
      headers: ["Sl. No.", "Make", "Model", "Price", "Currency"],
       headerConfig: {"id":{width:"80px", align:"center"},"price":{align:"right"}},// configure style properties of header with and align etc (more fetures will support)
      formatters: {
        price: function (val) {
          return val.toFixed(2) + " " + this.cur;
        }
      },
      columnsToHide: "cur", //Comma seprated string, to hide specific column from grid,  **optional
      columnsForSort: "make,model,price", //Comma seprated string, to enable sorting for columns  **optional
      analyticalColumns: "price", //Comma seprated string, to show sum of numerical columns  **optional
      rowFocus: false, // Default  false   **optional
      export: "xls",// export data to xls or csv (now will support only one type in single config)  Default  false   **optional
      exportFileName: "DataExport",
      mode: "Multi", //multi,single,none   Default  none   **optional,
      fieldsToEdit:"make,model",//Comma seprated string, these fields can edit from grid  **optional
      search:true,// Search functionality **optional // Default  false
      searchFields:"",// **IN DEVELOPMENT**  Comma seprated string, Search will happen only against these columns  **optional
      "searchScope": false,// this will give an opption to choose fields to search in **optional // Default  false
    }
    function getSelected() {
      var items = List.getSelectedItems();
      alert(items);
    }
 
    return (<div>
      <button onClick={getSelected}>Get Selected Items</button><br /><br />
      <List items={data} config={config} />
    </div>);
  }
}
 
render(<App />, document.getElementById("root"));
 

Features Supported

• Dynamic Data Grid *Now Supports only for Array of Objects
• Search Functionality
• Custom formating of column values
• Hide and Show Columns
• Editable Columns
• Get changed value sets
• Column Header Managing
• Column Sorting
• Analytical Columns( Show sum of numeric fields if configured)
• Excel Or CSV export
• Multi Selection mode (User can select specfic items and get it for custom data processing)

Public Methods (Component Scope)

• getSelectedItems() -- This will return selected items if mode:"Multi"
• getChangedItems() -- This will return Cahnged items if fieldsToEdit has configured"
• setEditable(true/false) -- this will enable/disable edit functionality of fields which are configured,Default false
• setMode(Multi/false) -- this will enable/disable selection of items
• export -- export table data to xls or csv format 'csv' or 'xls' default is 'xls'
• getEditable -- return true or false
• getMode -- return current mode of the table (Multi or None)

Complete default config

 
defConfig = {
            header: true, // Default  true
            headers: [],    //  **optional
            formatters:{},  //**optional
            //Type:collection of ojects// property of dsiplay array
            //formatters are giving a option to apply your formatting logic(display format like amount and currency format) while rendering cells.
            //Also inside the function you will get hte complete scope of the cuurent row in "this" Object
            //Example:   name is column property
            // formatters: {
            //     name: function(val){
            //       return  this.col2+"---"+val
            //     }
            //   }
 
            columnsToHide: "", //Comma seprated string, to hide specific columns from grid   **optional
            columnsForSort: "", //Comma seprated string, to enable sorting for columns  **optional
            analyticalColumns:"", //Comma seprated string, to show sum of numerical columns  **optional
            rowFocus:false, // Default  false   **optional
            export: "xls",// export data to xls or csv (now will support only one type in single config)  Default  false   **optional
 
        }
 

How to change style of grid(CSS config)

You have full control over css to change display, below are some exmaples Explore more....

/* How to change main table display*/
.aChart table.achart-grid{ margin: 0px; border-collapse: collapse; border-radius: 5px; width: auto;
    table-layout: fixed;font-family:inherit; font-size: 85%}
/* How to change main table header style*/
    .aChart .achart-gridHeader th {
 
    }
 
/* class to change sorting icons */
.aChart .achart-column-header-sort::after {
  position: absolute; content: '\21C5';right:2px;
    top: 22%;cursor: pointer}
 

Any bug fixes, feature request or feedback you can write us to [e-mail], We are happy to help you.