JSON Tabbed Table Editor

A VS Code extension that shows JSON files shaped like

{ "key1": [ ... ], "key2": [ ... ] }

as a spreadsheet: each top-level key is a tab (fixed at the bottom) and each array is an editable table (sticky header row and row numbers at the top/left).

Features

• Tabs – one per top-level key, with row count. Tab bar stays fixed at the bottom.
• Tables – arrays of objects become rows/columns (columns = union of all object keys). Arrays of plain values are shown as a single value column.
• Multi-line cells – text wraps and keeps line breaks.
• Array / object cells (first level) – a cell holding an array is shown as a list (one value per line) with a + beside the last value to add a new one. A cell holding an object is shown as a two-column key/value table (keys on a shaded background) with a + row to add a new key-value pair (named key1, key2, … and selected so you can type over it). Keys and values are editable inline; deeper nested values are edited as JSON text. Right-click a value or key for insert above/below, move up/down and delete, or Edit Cell as JSON to edit the whole cell as raw JSON.
• Inline editing synced to the file – edits go directly into the underlying text document (dirty indicator, save, undo of the file, and a side-by-side text editor all stay in sync; external changes refresh the table).
• Structure editing
  • Keys: add (+ tab), insert before/after, rename (double-click tab), move, delete.
  • Rows: append (+ at the bottom of the row-number column), insert above/below, duplicate, move, delete (right-click a row number or cell).
  • Columns: append (+ at the end of the header row), insert left/right, rename (double-click header), move, delete (right-click a header or cell).
• Column widths – drag the right edge of a header to resize; double-click the edge to auto-fit. The column context menu has Auto-fit Column Width, Auto-fit All Columns, Reset Column Width and Reset All Column Widths. Auto-fit uses the longest line of each cell (capped at 90% of the view width). Widths are view-only (not written to the file) and are kept while the editor is open.
• Type preservation – numbers stay numbers, booleans stay booleans, null stays null, nested objects/arrays are edited as JSON text. New cells take the type of other values in the same column.
• Undo / Redo for table operations (toolbar or Ctrl+Z / Ctrl+Y when not editing a cell).

Keyboard (while editing a cell)

Opening a file in table view

The table view is registered as an optional editor for *.json, so normal JSON editing is unchanged:

• Click the table icon in the editor title bar (only shown when the file matches the { key: [] } format), or
• Right-click a .json file in the Explorer → Open as Table, or
• Command Palette → JSON Table: Open as Table, or Reopen Editor With… → JSON Table.

Use Open as Text (title bar or toolbar) to switch back. Files that do not match the format show a message instead of a table.

To always open a specific pattern as a table, add to settings.json:

"workbench.editorAssociations": { "*.table.json": "jsonTable.editor" }

Run / install

• Debug: open this folder in VS Code and press F5 (opens sample/sample.json's folder).
• Package: npx @vscode/vsce package --allow-missing-repository, then Extensions → … → Install from VSIX.

Notes / limitations

• The file is re-serialized with JSON.stringify using the file's detected indentation and line endings; only the changed lines are replaced. Custom formatting (e.g. compact rows) in changed regions is normalized.
• JSON with comments and very large integers (beyond 2^53) are not supported.
• Object keys that look like integers are ordered first (standard JavaScript behaviour).