svelte-jsoneditor
svelte-jsoneditor copied to clipboard
josdejong
Table mode
Yes definitely! Thanks for your suggestion. Implementing a table mode is something that I have in mind for a while, I made a little start some time ago, would love to work that out.
- Use not native tables, but datatables/tabulator/sheetjs/... (so that there is normal editing, sorting, filtering, moving, etc.)
- Must have a virtual dom
- Ability to swap columns and rows
- Screw the schemas to this (?)
What do you mean with "must have a virtual DOM" and "Screw the schemas to this"?
- I meant virtual scroll (large tables will hang and you need to make them virtual or choose a library where they are virtual)
- It is already possible to add a JSON Schema, and you need to make sure that it works in table mode as well
Ah, yes, agree and agree. The Table mode should work smooth for JSON documents of up to 400 MB, like the Tree mode :). And yes, validation and everything should work, as well as editing, sorting, filtering, and everything. I also would like to have the Table mode output changes as JSON Patch, like Tree mode, that is powerful to be able to keep track on changes in the document.
Great news: a first version of table mode is now published in v0.11.0 🎉 .
You can try it out on https://jsoneditoronline.org (v6.10.0)
It currently features:
- Viewing a JSON array in a table
- Render huge documents (with virtual scroll)
- Sorting by column
- Edit values and copy/paste values
- Flatten nested object properties into separate columns or not
- Edit inline arrays/objects in a popup
- Validation errors
It lacks the following features (I'll implement that in a next iteration):
- Search and replace
- Insert/delete rows and columns, see #203
- A lot of smaller improvements and refinements
Feedback would be very welcome @AlexRMU
- if the content is an object, you can suggest wrapping it in an array or initially perceiving it like this (as on the https://jsongrid.com/)
- double-clicking renames the column (as a key in tree mode)
- focused column can be deleted or cut (as a value in tree mode)
- nested tables (as on the https://jsongrid.com/)
- keep the focus on when changing the mode
- perhaps you need to use a good ready-made table component instead of a manually created one or copy common functionality from it
Thanks for your suggestions, they make sense.
About nested tables: there already is support for nested tables, but they are opened in a modal. We could look into rendering nested tables inline like jsongrid does of course, it's nice when having small, nested arrays!
perhaps you need to use a good ready-made table component
The current table mode is custom made to support large documents: you can smoothly open a 500MB file with 1M rows and edit it. Before implementing the table mode, I did look around for a vanilla or Svelte table component that I could use, but I couldn't find one that fits what I have in mind, and can be tightly integrated so that you can use the same onRenderValue to customize rendering of values in both table and tree mode, etc.