# Editable Table > Inline-editable table cells driven by a custom cell renderer that reads and writes the underlying Svelte store. **Source:** [https://table.svelte.page/examples/editable-table](https://table.svelte.page/examples/editable-table) **Markdown mirror:** [https://table.svelte.page/examples/editable-table.md](https://table.svelte.page/examples/editable-table.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: inline edit. Cells render through a custom `EditableCell` component that swaps a `` for an `` on click. Press Enter (or the ✓ button) to commit the new value into the writable data store; Escape (or ✗) reverts. **Metadata:** tag: `EDIT` | pattern: `editable cells` ### Notes - The cell renderer is an ordinary Svelte component handed to createRender — it owns its own focus state and writes back via a callback prop. - Edits flow into the same writable store the table reads from; the table re-renders automatically through the reactive data subscription. - `Enter` commits and exits, `Escape` reverts. Add your own keyboard navigation by wiring `HTMLInputElement` events inside the cell renderer. ### Source #### Default.svelte Source file: [src/lib/examples/editable-table/demos/Default.svelte](https://github.com/humanspeak/svelte-headless-table/blob/main/docs/src/lib/examples/editable-table/demos/Default.svelte) ```svelte

{#each $headerRows as headerRow (headerRow.id)} {#each headerRow.cells as cell (cell.id)} {/each} {/each} {#each $pageRows as row (row.id)} {#each row.cells as cell (cell.id)} {/each} {/each}

``` #### EditableCell.svelte Source file: [src/lib/examples/editable-table/demos/EditableCell.svelte](https://github.com/humanspeak/svelte-headless-table/blob/main/docs/src/lib/examples/editable-table/demos/EditableCell.svelte) ```svelte {#if !isEditing} {:else} {/if} ```