The minimum viable example
import { useTable, Table } from '@zvndev/yable-react'
import type { CellPatch } from '@zvndev/yable-core'
function MyTable() {
const onCommit = async (patches: CellPatch<Row>[]) => {
const res = await fetch('/api/save', {
method: 'POST',
body: JSON.stringify(patches),
})
if (!res.ok) throw new Error('Save failed')
// Update your local data store however you do it (React Query, Zustand, etc.)
// The cell automatically clears once your saved data matches the pending value.
}
const table = useTable({
data,
columns,
enableCellEditing: true,
onCommit,
getRowId: (row) => row.id,
})
return <Table table={table} />
}
That's it. Pending state, error state, retry, and conflict UI are all rendered automatically.