Skip to content

feat: add JSON Table preview for response pane#69

Open
khemthit wants to merge 1 commit into
usebruno:mainfrom
khemthit:feat/json-table-preview
Open

feat: add JSON Table preview for response pane#69
khemthit wants to merge 1 commit into
usebruno:mainfrom
khemthit:feat/json-table-preview

Conversation

@khemthit
Copy link
Copy Markdown

@khemthit khemthit commented May 26, 2026

Summary

Adds a Table view for JSON responses in the response pane as a tabular
alternative to the existing tree view. Tree remains the default; users opt in
with a Tree/Table toggle inside the JSON preview area. The choice persists
per tab.

JSON Table preview

Features

  • Array-of-objects renders as a single table; columns are the union of
    top-level keys, preserved in first-appearance order.
  • Single objects render as a 2-column key | value table.
  • Nested objects and arrays render inline as recursive sub-tables — every
    level of the structure is visible at once, no clicking required.
  • Click a column header to sort the rows (asc → desc → none). Sort picks
    a numeric, boolean, or localeCompare string comparator per column.
    null values sort last in both directions.
  • Debounced text filter (200 ms) matches case-insensitive substrings
    across every column, including nested-cell previews.
  • Pagination at 100 rows per page; hidden when there is only one page.
  • Right-click any cell to copy its value — primitives copy as-is, nested
    values copy as pretty-printed JSON.
  • Filter / sort / page reset automatically when the response data changes.

Implementation notes

  • The detection logic (`flatten.ts`) and the filter/sort/paginate logic
    (`tableState.ts`) are pure modules with 31 vitest unit tests in the
    existing `node` test environment.
  • React components (`TableView`, `ValueRenderer`, `ModeToggle`,
    `FilterInput`, `JsonTablePreview`) are thin shells over those pure helpers.
  • `ModeToggle` is self-styled so it renders identically in both contexts
    (Tree mode overlay and Table mode toolbar).
  • Theme tokens used throughout (`theme.background.`, `theme.border.`,
    `theme.colors.text.*`) match the convention in sibling files.
  • A new `responseJsonPreviewMode: 'tree' | 'table' | null` field on the tab
    schema persists the user's choice per request tab. Default `null` resolves
    to `tree`, so existing tabs are unaffected.
  • No new runtime dependencies and no new dev dependencies.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant