CarlosNZ/json-edit-react

"Pagination"/summaries of long arrays

Opened this issue · 4 comments

Suggestion

While evaluating json-editor-react as a possible replacement for josdejong/jsoneditor, I noticed that json-editor-react can become slow when rendering large items. Setting collapse helps, but one features that jsoneditor provides by default is a sort of pagination or summary feature for long arrays. For example, an array of 232 objects shows items 0 through 99 then the following text:

displaying 100 of 232 items. show more. show all

The exact number could perhaps be configured via some sort of arrayPageSize or itemsPerPage or maxArrayItems prop or similar.

I can try and submit a PR if this feature seems worthwhile.

Use case

Faster rendering, more compact display.

Yes, that seems like a good suggestion. I'll add it to the to-do list.

I also have this issue which is kinda related, so I'd probably want to tackle them both as part of the same job.

Thanks for checking out the library, hopefully it can meet all your needs :)

I noticed that json-editor-react can become slow when rendering large items.

Where are you seeing the slow-down? The initial render, or when updating values?

FYI, you can pass a custom "collapse" function, so you could specify that if there are more than say 50 items, the node should start collapsed, but it would still open up deeper nodes if they are smaller.

Where are you seeing the slow-down? The initial render, or when updating values?

The initial render. Thanks for the tip about a custom collapse function.