Feature Request: Add prop to allow initially collapsed

[thorsent]

It's great that you can click on the tree nodes to expand them, but I'd like a way to specify that the tree should be initially collapsed (my use case is a log viewer with lots of objects in a big scrollable list).

In other words, I'd like to collapse the tree until the end user interacts with it.

I don't think there's a way to accomplish this with shouldExpandNode function, but I think you could add another prop called initialExpansionLevel to make this easy to control.

export interface Props extends React.AriaAttributes {
    data: Object | Array<any>;
    style?: StyleProps;
    shouldExpandNode?: (level: number, value: any, field?: string) => boolean; // programmatically override the expansion level
    clickToExpandNode?: boolean;
    initialExpansionLevel?: number // set the expansion level before the end user interacts with the tree: 0 = fully collapsed, -1 = fully expanded. Or set any number in-between to mimic shouldExpandNode Defaults to -1
}

[fabiradi]

Doesn't shouldExpandNode do just that – with a function instead of a prop? Or are you looking for a combination, where you have the regular shouldExpandNode behavior with the addition to define the initial state of the root node?

[AnyRoad]

Sorry for the late response...

Can you please describe what do you mean by "interaction"? Is it just click on the root node, or scroll on the page to the component until it is visible?
If you want to collapse root node initially and then expand only one level after clicking the root node
you can have a workaround by change the shouldExpandNode property on a button click/checkbox check:

const [expanded, setExpanded] = React.useState(false);

<button className={cx('button')} onClick={() => setExpanded(!expanded)}>
          {expanded ? 'Collapse' : 'Expand'}
        </button>

<JsonView
    data={jsonData}
    shouldExpandNode={expanded ? expandFirstLevel : collapseAllNested}
    style={defaultStyles}
/>

I think it will be less convenient for the user comparing to the simple click on the root node but still will work.
Also if you want to render whole tree collapsed initially it might be better to just hide it and render only after "Show logs" button click.

[thorsent]

Sorry, I missed @fabiradi comment in November. Yes, I would like to set initial state fully closed, with ability to click on the arrows to expand the nest. @AnyRoad 's workaround does this (with slight modification), but is clunky with the extra button.

My example, is a logger with many, many objects. They need to be closed initially because the objects are large. End users choose to expand objects only when they are debugging:

It would be nice if the library didn't require the workaround. It's confusing to end users that they can't click on the arrow. It's a good library with a lot of downloads. I'm surprised my use case isn't more common ¯\(ツ)/¯