JsonDisplay

Overview

Presents a JSON value as formatted text. The block form indents it over several lines, so nesting is readable rather than one long line; the inline form keeps it compact for a table cell and truncates it past maxLength. A null or absent value renders the same dash {@link DateTimeDisplay} uses for an empty date.

An empty object or array is a recorded value, not an absent one, so it renders as {} or []. The empty string is the JSON string scalar here and renders as "", unlike {@link BooleanDisplay} and {@link DurationDisplay}, whose serializers send "" to mean a blank field. A value that cannot be serialized (a circular structure) falls back to plain coercion rather than rendering nothing.

Theme entry: JsonDisplay

Props

Name	Type	Required	Default	Description
themeOverride	Object		null	A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
value	string|number|boolean|object|array		undefined	The value to present. null and undefined render the dash.
inline	boolean		false	Renders compact, on one line, for use inside a table cell or an existing text row.
indent	number		2	Spaces per nesting level in the block form.
maxLength	number		200	Character cap for the inline form, past which the text is truncated. 0 removes the cap. The block form is never capped: a read view exists to show the whole value.
class	import('vue').HTMLAttributes['class']		undefined	Additional CSS classes applied to the root.

Source

client/lib/display/json-display/JsonDisplay.vue