This table viewer allows inspection of "tscircuit soup elements", which is the output of tscircuit builder or an intermediate step of tscircuit react.
npm install @tscircuit/table-viewerThis 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.
``bash`
npm add @tscircuit/table-viewer
`ts
import { SoupTableViewer } from "@tscircuit/table-viewer"
import "react-data-grid/lib/styles.css"
export const MyApp = () => (
{
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",
},
// ...
]}
/>
)
`
Add/remove stories or use the existing stories to test new UI features.
`bash``
npm run storybook