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 />
achartsprt@gmail.com
Any suggestions, Issues, Please write us toUsage (Working example).
;Component { 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: { return val + " " + thiscur; } 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 { var items = List; ; } return <div> <button onClick=getSelected>Get Selected Items</button><br /><br /> <List items=data config=config /> </div>; } ;
Features Supported
Dynamic Data Grid
*Now Supports only for Array of ObjectsSearch 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 ifmode:"Multi"
getChangedItems()
-- This will return Cahnged items iffieldsToEdit 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 itemsexport
-- export table data to xls or csv format'csv' or 'xls'
default is 'xls'getEditable
-- return true or falsegetMode
-- 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*//* How to change main table header style*/ /* class to change sorting icons */
Any bug fixes, feature request or feedback you can write us to achartsprt@gmail.com, We are happy to help you.