Table mode

[AlexRMU]

It would be nice to make a table (grid) mode like on https://jsongrid.com/

[josdejong]

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.

[AlexRMU]

• 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 (?)

[josdejong]

What do you mean with "must have a virtual DOM" and "Screw the schemas to this"?

[AlexRMU]

• 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

[josdejong]

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.

[josdejong]

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

[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

[josdejong]

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.