Docs
πŸ—οΈ ⏐ Components
Layout
JSON Tree πŸ†•

Json Tree

Tree component designed for showing JSON data.

Examples

Theme

This component uses the following default theme:

  • root{}(2 keys)
      Show all

Learn more about how to customize in the Theme documentation.

API

Tree

PropDescriptionDefault
data *The data to be rendered as a JSON tree.
{ [key: string]: any; }
showAllIf true, all nodes in the JSON tree will be expanded by default.
boolean
false
showAllLimitThe limit for the number of nodes to show when `showAll` is true.
number
10
showCountIf true, the count of child nodes will be shown next to each node.
boolean
true
showEmptyIf true, empty nodes will be shown in the JSON tree.
boolean
true
ellipsisTextIf true, long text in nodes will be truncated and replaced with an ellipsis.
boolean
true
ellipsisTextLengthThe maximum length of text in a node before it is truncated and replaced with an ellipsis.
number
150
expandDepthThe depth at which the JSON tree nodes should be expanded by default.
number
2
rootIf true, the JSON tree will be rendered with a root node.
boolean
true
classNameThe CSS class name to be applied to the JSON tree.
string

TreeNode

PropDescriptionDefault
dataThe data to be rendered as a JSON tree.
JsonTreeData
classNameThe CSS class name to be applied to the JSON tree node.
string
showCountIf true, the count of child nodes will be shown next to each node.
boolean
showEmptyIf true, empty nodes will be shown in the JSON tree.
boolean
depthThe depth of the JSON tree node. This is typically used for indentation purposes.
number
showAllLimitThe limit for the number of nodes to show when `showAll` is true.
number
expandDepthThe depth at which the JSON tree nodes should be expanded by default.
number
themeTheme for the Json Tree
JsonTreeTheme
ellipsisTextIf true, long text in nodes will be truncated and replaced with an ellipsis.
boolean
ellipsisTextLengthThe maximum length of text in a node before it is truncated and replaced with an ellipsis.
number