json-edit-react icon indicating copy to clipboard operation
json-edit-react copied to clipboard

"Pagination"/summaries of long arrays

Open joshkel opened this issue 8 months ago • 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.

joshkel avatar May 01 '25 19:05 joshkel

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 :)

CarlosNZ avatar May 01 '25 20:05 CarlosNZ

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?

CarlosNZ avatar May 01 '25 20:05 CarlosNZ

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.

CarlosNZ avatar May 01 '25 20:05 CarlosNZ

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.

joshkel avatar May 01 '25 20:05 joshkel