# Edit components
The grid ships with five inline editors. Each is selected by the column's
`editorType`:
> Live demo: Custom cell editors - https://svgrid.com/demos/66-custom-cell-editors/
| `editorType` | DOM element | Notes |
| ------------ | ----------- | ----- |
| `'text'` | `` | default |
| `'number'` | `` | parsed with `parseEditorValue('number', ...)` |
| `'date'` | `` | round-trips to ISO `YYYY-MM-DD` |
| `'datetime'` | `` | round-trips to ISO 8601 |
| `'checkbox'` | `` | toggled on `Enter` / `Space` |
The editor renders **inside the cell** - same width, same row height,
zero border. See [Styling cells → edit-mode cell](https://svgrid.com/docs/help/cells/styling-cells/#edit-mode-cell).
## Custom editor
There is no `cellEditor` field on `ColumnDef` today and no way to plug in
a third-party component as the inline editor. To approximate one:
1. Render the column read-only with a custom `cell` callback.
2. Open your own popover on click / `F2`.
3. Write back through `api.setCellValue(rowIndex, columnId, value)`.
```svelte
{#snippet StatusCell(p: { row: Person })}
{/snippet}
```
A first-class `cellEditor` plug-in slot is on the
[gap list](https://svgrid.com/docs/help/missing-features/).
## Conditional editability
There is no `editable: (row) => boolean` callback. Closest approximation:
swap the column between an editable and a read-only version by reassigning
`columns`.
## The editor follows the column
`editorType` picks the editor, and the value it commits is already the right
type - a number editor produces a number, not a string. That is why validation
here usually only has to check range, not shape.
```svelte
(last = e.columnId + ' = ' + JSON.stringify(e.newValue) + ' (' + typeof e.newValue + ')')}
/>
{last}
```
## A date picker and a checkbox
The richer editors are the same one-word opt-in. `editorType: 'date'` opens
the same `SvCalendar` the forms use, so a date picked in a cell and one picked in
a form behave identically. Drop to `'date-native'` when you want the browser's
own control instead.
```svelte
```
## See also
- [Provided editors](https://svgrid.com/docs/help/editing/provided-editors/)
- [Cell components](https://svgrid.com/docs/help/cells/cell-components/)
- [Custom column filters](https://svgrid.com/docs/help/filtering/custom-column-filters/) - same shape, filter side.
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/editing/edit-components/ . All docs: https://svgrid.com/llms.txt