react-gridtree

React-GridTree
===================

React GridTree is a react component built to easily render a table showing the properties of objects in a tree structure.

Check out the example project and the live demo


Installation
-----

``
npm install react-gridtree
`

Usage
-------

Example:
`
data={[
{
name: "item 1"
qty: 2,
children: [
{
name: "item 1.1",
qty: 1
}
]
},
{
name: "item 2",
qty: 4
}
]}
options={{
fields: [
{
property: 'name',
displayName: 'Name',
width: '70%'
},
{
property: 'qty',
displayName: 'Quantity',
format: (value) => value.toFixed(2)
}
]
}}
/>
`

> Notes:
> - Styling not yet supported
> - The children attribute is reserved for the objects that will be shown inside the parent

----

Props
----------

data
Data to be displayed. Should be an array of objects. Each object's children property should be an array of nested objects.
`
data = [
{
name: "item 1"
qty: 2,
children: [
{
name: "item 1.1",
qty: 1
}
]
},
{
name: "item 2",
qty: 4
}
]
`
----

options
Object that can contain the properties:

- fields - Required
fields should be an array containing one object for each data property that should be displayed. This object can have the properties:
- property - Required
The name of the data property (e.g. "name")

- displayName - Required
The text to be shown on the table header (e.g. "Name")

- width
The width of the column (e.g. "50%")

- format
A function that receives the data value, and returns a formatted text to be shown (e.g. (value) => value.toFixed(2)

`
options = {
fields: [
{
property: 'name',
displayName: 'Name',
width: '70%'
},
{
property: 'qty',
displayName: 'Quantity',
format: (value) => value.toFixed(2)
}
]
}
``