JSON Table

JsonTable renders a JSON Schema and an extracted data object as a virtualized, spreadsheet-style table: columns are derived from the schema, nested objects flatten into grouped columns, arrays expand into rows, and each cell is typed (text, number, date/time, enum, checkbox) with optional per-cell confidence/consensus coloring and a source-citation popover. It's the table-layout sibling of JSON Form.

Built on the same schema/header engine the Retab dashboard uses, with a hand-rolled virtualized table model — no table library.

"use client";

import * as React from "react";
import type { JSONSchema7 } from "json-schema";

import type { TableDocument } from "@/components/json-table/lib/projects-types";
import sampleData from "@/components/json-table/sample/data.json";
import sampleSchema from "@/components/json-table/sample/schema.json";
import {
  SingleFileTableView,

Usage

Copyimport { SingleFileTableView } from "@/components/json-table/single-file-table-view";
 
export function Example() {
  return (
    <SingleFileTableView
      document={document}
      schema={schema}
      jsonEditMode="readOnly"
      schemaEditMode="readOnly"
    />
  );
}

Key props