# CellEditor

> _Since v0.11.0_

Interface for cell editor components.

Editor components receive the cell value, row data, and column config as inputs,
plus must emit `commit` and `cancel` outputs.

#### Example

```typescript
import { Component, input, output } from '@angular/core';
import type { CellEditor } from '@toolbox-web/grid-angular';

@Component({
  selector: 'app-status-editor',
  template: `
    <select [value]="value()" (change)="commit.emit($any($event.target).value)">
      <option value="active">Active</option>
      <option value="inactive">Inactive</option>
    </select>
  `
})
export class StatusEditorComponent implements CellEditor<Employee, string> {
  value = input.required<string>();
  row = input.required<Employee>();
  column = input<unknown>();
  commit = output<string>();
  cancel = output<void>();
}
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `value` | <code>() =&gt; TValue &#124; undefined</code> | The cell value - use `input<TValue>()` or `input.required<TValue>()` |
| `row` | <code>() =&gt; TRow &#124; undefined</code> | The full row data - use `input<TRow>()` or `input.required<TRow>()` |
| `column?` | <code>() =&gt; unknown</code> | The column configuration (optional) - use `input<unknown>()` |
| `commit` | <code>object</code> | Emit to commit the new value - use `output<TValue>()` |
| `cancel` | <code>object</code> | Emit to cancel editing - use `output<void>()` |