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:

<GridTree
	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)
		}
	]
}