Step 3: Edit and add rows

A read-only list isn't a sheet. Wire each cell to actions.list("rows"), and give it an Add button.

A sheet you can't edit isn't a sheet. actions.list("rows") gives you three positional operations, and they're all this build needs — insert and move exist too, for when you get to reordering (SDK reference):

const addRow = () => actions.list("rows").push({ item: "", quantity: 1, price: 0 })

<input
  value={row.item}
  onChange={(e) => actions.list("rows").replace(i, { ...row, item: e.target.value })}
/>

<button onClick={() => actions.list("rows").remove(i)}>×</button>

Turn the plain list into a table: one <input> per column, an Add a row button above it, and a × to remove one.

Edit, add, remove

src/codec.ts + src/tool.tsx

import { useMemo } from "react"

import {

DocumentGate,

type ToolRenderProps,

defineStateCodec,

defineTool,

field,

useDocument,

} from "@vvd/sdk"

// src/codec.ts

/** One row in the sheet. */

export type Row = {

item: string

quantity: number

price: number

}

export const codec = defineStateCodec({

rows: field.list<Row>([

{ item: "Rope (50 ft)", quantity: 2, price: 1 },

{ item: "Torch", quantity: 6, price: 0.5 },

{ item: "Rations (1 day)", quantity: 10, price: 0.4 },

]),

})

// src/tool.tsx

function Board({ data }: { data: { rows: readonly Row[] } }) {

return (

{data.rows.map((row, i) => (

))}

</ul>

)

}

export function ArmoryView({ document }: ToolRenderProps) {

const coords = useMemo(

() => ({ worldId: document.worldId, documentId: document.id }),

[document.worldId, document.id],

)

const { data, status, actions, retry } = useDocument(coords, codec)

return (

{data && <Board data={data} />}

</DocumentGate>

)

}

export default defineTool({

id: "armory",

name: "armory",

documentTypes: ["armory"],

needs: [],

render: ArmoryView,

})

import { useMemo } from "react"

import {
DocumentGate,
type ToolRenderProps,
defineStateCodec,
defineTool,
field,
useDocument,
} from "@vvd/sdk"

// src/codec.ts
/** One row in the sheet. */
export type Row = {
item: string
quantity: number
price: number
}

export const codec = defineStateCodec({
rows: field.list<Row>([
  { item: "Rope (50 ft)", quantity: 2, price: 1 },
  { item: "Torch", quantity: 6, price: 0.5 },
  { item: "Rations (1 day)", quantity: 10, price: 0.4 },
]),
})

// src/tool.tsx
function Board({ data }: { data: { rows: readonly Row[] } }) {
return (
  <ul style={{ padding: 24, margin: 0, listStyle: "none", display: "grid", gap: 6 }}>
    {data.rows.map((row, i) => (
      <li key={i}>{row.item}</li>
    ))}
  </ul>
)
}

export function ArmoryView({ document }: ToolRenderProps) {
const coords = useMemo(
  () => ({ worldId: document.worldId, documentId: document.id }),
  [document.worldId, document.id],
)
const { data, status, actions, retry } = useDocument(coords, codec)
return (
  <DocumentGate status={status} onRetry={retry}>
    {data && <Board data={data} />}
  </DocumentGate>
)
}

export default defineTool({
id: "armory",
name: "armory",
documentTypes: ["armory"],
needs: [],
render: ArmoryView,
})

Edit and the example re-runs. Tab indents; press Escape to leave the editor.

Running · your edits, live

Starting the example…

You should see: edit the price on "Torch", tab away — it sticks. Click Add a row, a blank one appears at the bottom. Click × on any row and it's gone.

Next steps

Step 4 — A computed columnAdd a Total column that's never wrong, because it's never saved.