@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.

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",
      },
      // ...
    ]}
  />
)

Development

Add/remove stories or use the existing stories to test new UI features.

npm run storybook