Skip to content

"Pagination"/summaries of long arrays #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joshkel opened this issue May 1, 2025 · 4 comments
Open

"Pagination"/summaries of long arrays #195

joshkel opened this issue May 1, 2025 · 4 comments
Labels
user request Requested by user

Comments

@joshkel
Copy link

joshkel commented May 1, 2025

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 joshkel added the user request Requested by user label May 1, 2025
@CarlosNZ
Copy link
Owner

CarlosNZ commented May 1, 2025

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
Copy link
Owner

CarlosNZ commented May 1, 2025

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
Copy link
Owner

CarlosNZ commented May 1, 2025

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.

@joshkel
Copy link
Author

joshkel commented May 1, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
user request Requested by user
Projects
None yet
Development

No branches or pull requests

2 participants