@tscircuit/table-viewer NPM

@tscircuit/table-viewer

This table viewer allows inspection of "tscircuit soup elements", which is the output of tscircuit builder or an intermediate step of tscircuit react.

You might use the table viewer to debug why a particular selector isn't working.

npm.io

Usage

npm add @tscircuit/table-viewer

import { SoupTableViewer } from "@tscircuit/table-viewer"
import "react-data-grid/lib/styles.css"

export const MyApp = () => (
  <SoupTableViewer
    elements={[
      {
        type: "source_component",
        source_component_id: "simple_resistor_0",
        name: "R1",
        ftype: "simple_resistor",
      },
      {
        type: "schematic_component",
        source_component_id: "simple_resistor_0",
        schematic_component_id: "schematic_component_simple_resistor_0",
        rotation: 0,
        size: {
          width: 1,
          height: 0.3,
        },
        center: {
          x: 2,
          y: 1,
        },
        schematic_center: {
          x: 2,
          y: 1,
        },
      },
      {
        type: "source_port",
        name: "left",
        source_port_id: "source_port_0",
        source_component_id: "simple_resistor_0",
      },
      // ...
    ]}
  />
)