23:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 24:Ta57,// Every edit is saved somewhere slow and fallible: `onEdit` returns the save's // promise, so the cells show the new text at once and roll back if it is refused. // Status is a choice (read from its values), active a switch. interface Account { id: string name: string status: string plan: string active: string } const ACCOUNTS: Account[] = [ { id: "a1", name: "north studio", status: "live", plan: "team", active: "yes", }, { id: "a2", name: "harbour films", status: "trial", plan: "solo", active: "yes", }, { id: "a3", name: "pass & co", status: "paused", plan: "team", active: "no" }, { id: "a4", name: "ridge sound", status: "live", plan: "solo", active: "yes", }, { id: "a5", name: "market lane", status: "live", plan: "team", active: "yes", }, { id: "a6", name: "cabin edit", status: "trial", plan: "solo", active: "no" }, ] const ACCOUNT_COLUMNS: TableColumn[] = [ { id: "name", label: "name", text: (a) => a.name }, { id: "status", label: "status", text: (a) => a.status }, // Declared: a plan the data has not used yet is still offered. { id: "plan", label: "plan", text: (a) => a.plan, options: ["solo", "team", "studio"], }, { id: "active", label: "active", text: (a) => a.active }, ] /** A server: answers after a moment, and refuses when told to. */ const save = (refuse: boolean) => new Promise((resolve, reject) => setTimeout( () => (refuse ? reject(new Error("the server said no")) : resolve()), 900, ), ) function Saved() { const [rows, setRows] = React.useState(ACCOUNTS) const [refuse, setRefuse] = React.useState(false) return (

setRefuse(e.target.checked)} /> the server refuses a.id} columns={ACCOUNT_COLUMNS} noun="account" onEdit={async (edits) => { await save(refuse) setRows((all) => all.map((a) => ({ ...a, ...Object.fromEntries( edits .filter((e) => e.row === a.id) .map((e) => [e.column, e.text]), ), })), ) }} className="h-64 w-full rounded-lg border border-foreground/8" /> ) } 25:T732d,

// Every edit is saved somewhere slow and fallible: `onEdit` returns the save's
// promise, so the cells show the new text at once and roll back if it is refused.
// Status is a choice (read from its values), active a switch.
interface Account {
  id: string
  name: string
  status: string
  plan: string
  active: string
}

const ACCOUNTS: Account[] = [
  {
    id: "a1",
    name: "north studio",
    status: "live",
    plan: "team",
    active: "yes",
  },
  {
    id: "a2",
    name: "harbour films",
    status: "trial",
    plan: "solo",
    active: "yes",
  },
  { id: "a3", name: "pass & co", status: "paused", plan: "team", active: "no" },
  {
    id: "a4",
    name: "ridge sound",
    status: "live",
    plan: "solo",
    active: "yes",
  },
  {
    id: "a5",
    name: "market lane",
    status: "live",
    plan: "team",
    active: "yes",
  },
  { id: "a6", name: "cabin edit", status: "trial", plan: "solo", active: "no" },
]

const ACCOUNT_COLUMNS: TableColumn<Account>[] = [
  { id: "name", label: "name", text: (a) => a.name },
  { id: "status", label: "status", text: (a) => a.status },
  // Declared: a plan the data has not used yet is still offered.
  {
    id: "plan",
    label: "plan",
    text: (a) => a.plan,
    options: ["solo", "team", "studio"],
  },
  { id: "active", label: "active", text: (a) => a.active },
]

/** A server: answers after a moment, and refuses when told to. */
const save = (refuse: boolean) =>
  new Promise<void>((resolve, reject) =>
    setTimeout(
      () => (refuse ? reject(new Error("the server said no")) : resolve()),
      900,
    ),
  )

function Saved() {
  const [rows, setRows] = React.useState(ACCOUNTS)
  const [refuse, setRefuse] = React.useState(false)
  return (
    <div className="w-full space-y-3">
      <label className="flex w-fit items-center gap-2 text-[13px] text-foreground/70">
        <input
          type="checkbox"
          checked={refuse}
          onChange={(e) => setRefuse(e.target.checked)}
        />
        the server refuses
      </label>
      <Table
        label="accounts"
        rows={rows}
        rowId={(a) => a.id}
        columns={ACCOUNT_COLUMNS}
        noun="account"
        onEdit={async (edits) => {
          await save(refuse)
          setRows((all) =>
            all.map((a) => ({
              ...a,
              ...Object.fromEntries(
                edits
                  .filter((e) => e.row === a.id)
                  .map((e) => [e.column, e.text]),
              ),
            })),
          )
        }}
        className="h-64 w-full rounded-lg border border-foreground/8"
      />
    </div>
  )
}

<Saved />

1f:["$","div","saved",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L23",null,{"value":"$24","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$25"}}],false]}]

	name	status	plan	active
1	north studio	live	team	yes
2	harbour films	trial	solo	yes
3	pass & co	paused	team	no
4	ridge sound	live	solo	yes
5	market lane	live	team	yes
6	cabin edit	trial	solo	no

	name	status	plan	active
1	north studio	live	team	yes
2	harbour films	trial	solo	yes
3	pass & co	paused	team	no
4	ridge sound	live	solo	yes
5	market lane	live	team	yes
6	cabin edit	trial	solo	no