Json Tree

Tree component designed for showing JSON data.

Examples

Theme

This component uses the following default theme:

root{}(2 keys)

Learn more about how to customize in the Theme documentation.

API

Tree

Prop	Description	Default
`data` *	The data to be rendered as a JSON tree. `{ [key: string]: any; }`
`showAll`	If true, all nodes in the JSON tree will be expanded by default. `boolean`	`false`
`showAllLimit`	The limit for the number of nodes to show when `showAll` is false. `number`	`10`
`showCount`	If true, the count of child nodes will be shown next to each node. `boolean`	`true`
`showEmpty`	If true, empty nodes will be shown in the JSON tree. `boolean`	`true`
`ellipsisText`	If true, long text in nodes will be truncated and replaced with an ellipsis. `boolean`	`true`
`ellipsisTextLength`	The maximum length of text in a node before it is truncated and replaced with an ellipsis. `number`	`150`
`expandDepth`	The depth at which the JSON tree nodes should be expanded by default. `number`	`2`
`root`	If true, the JSON tree will be rendered with a root node. `boolean`	`true`
`className`	The CSS class name to be applied to the JSON tree. `string`

TreeNode

Prop	Description	Default
`data`	The data to be rendered as a JSON tree. `JsonTreeData`
`className`	The CSS class name to be applied to the JSON tree node. `string`
`showCount`	If true, the count of child nodes will be shown next to each node. `boolean`
`showEmpty`	If true, empty nodes will be shown in the JSON tree. `boolean`
`depth`	The depth of the JSON tree node. This is typically used for indentation purposes. `number`
`showAll`	If true, all nodes in the JSON tree will be expanded by default. `boolean`
`showAllLimit`	The limit for the number of nodes to show when `showAll` is false. `number`
`expandDepth`	The depth at which the JSON tree nodes should be expanded by default. `number`
`theme`	Theme for the Json Tree `JsonTreeTheme`
`ellipsisText`	If true, long text in nodes will be truncated and replaced with an ellipsis. `boolean`
`ellipsisTextLength`	The maximum length of text in a node before it is truncated and replaced with an ellipsis. `number`