# Editor Row
URL: https://pro.rv-grid.com/api/editor-row/
Source: src/content/docs/api/editor-row.md
### `RowEditPlugin`

The `RowEditPlugin` is a custom plugin for RevoGrid that provides row-level editing capabilities,
allowing users to edit entire rows inline with dedicated action buttons for saving or canceling changes.

 **Features**:
- **Row Editing Mode:** Enables editing of entire rows by rendering editors for all cells in the selected row.
- **Inline Editors:** Supports inline editing of multiple cells in a row simultaneously.
- **Action Buttons:** Provides intuitive buttons for `Save` and `Cancel` actions:
  - `Save`: Dispatches `CELL_EDIT_SAVE_EVENT` to persist changes.
  - `Cancel`: Dispatches `CELL_EDIT_CANCEL_EVENT` to discard changes.
- **Event Handling:** Listens for key events to manage row editing:
  - `CELL_EDIT_EVENT`: Initiates row editing mode.
  - `CELL_EDIT_SAVE_EVENT`: Saves edited data and updates the grid model.
  - `CELL_EDIT_CANCEL_EVENT`: Cancels editing and restores original data.
  - `BEFORE_CELL_RENDER_EVENT`: Ensures cells in the editing row render with editors.

**Usage**:
1. **Import and Initialize the Plugin:**
   ```typescript
   import { RowEditPlugin } from '@revolist/revogrid-pro'

   const grid = document.createElement('revo-grid');
   grid.plugins = [RowEditPlugin];
   ```

2. **Define Action Column:**
   Use the `editorRowActionColumn` to render action buttons (`Edit`, `Save`, `Cancel`):
   ```typescript
   import { editorRowActionColumn } from '@revolist/revogrid-pro'

   grid.columns = [
     { prop: 'name', name: 'Name' },
     { prop: 'age', name: 'Age' },
     {
            prop: 'edit',
            ...editorRowActionColumn,
        }, // Action column for row editing
   ];
   ```

Action Buttons:
- **Edit Button:** Dispatches `CELL_EDIT_EVENT` to enable row editing.
- **Save Button:** Dispatches `CELL_EDIT_SAVE_EVENT` to save changes.
- **Cancel Button:** Dispatches `CELL_EDIT_CANCEL_EVENT` to cancel editing and reset the row.

**Icon Details**:
- **Save Icon:** Embedded SVG icon representing a "Save" action.
- **Cancel Icon:** Embedded SVG icon representing a "Cancel" action.
- **Edit Icon:** Embedded SVG icon representing an "Edit" action.

**Scenarios**:
This plugin is particularly useful for applications where users need to edit multiple cells in a row at once.
Typical use cases include updating tabular records or form-like data directly within a grid.

**Conclusion**:
The `RowEditPlugin` enhances RevoGrid’s editing capabilities by offering a flexible row editing solution
with intuitive controls, efficient event handling, and seamless data integration.

```ts
class RowEditPlugin {}
```

---

### `editorRowActionColumn`

The editorRowActionColumn is a partial implementation of the ColumnRegular interface.
It defines the cellTemplate and editor properties for a column that renders action buttons
for row editing.

```ts
editorRowActionColumn: {
  cellProperties: (props: CellTemplateProp<DataType<any, ColumnProp>, ColumnRegular<ColumnProp, DataType<any, ColumnProp>>, ColumnProp>) => { onDblClick: (event: MouseEvent) => void; providers: Providers<DimensionRows>; previousValue?: any; flashDirection?: CellFlashDirection | undefined; flashState?: any; prop: ColumnProp; model: DataType<any, ColumnProp>; column: ColumnRegular<ColumnProp, DataType<any, ColumnProp>>; rowIndex: number; colIndex: number; colType: DimensionCols; type: DimensionRows; data: DataType<any, ColumnProp>[]; value?: any; };
  cellTemplate: (h: HyperFunc<VNode>, props: CellTemplateProp<DataType<any, ColumnProp>, ColumnRegular<ColumnProp, DataType<any, ColumnProp>>, ColumnProp>) => VNode;
  editor: () => { render(h: HyperFunc<VNode>): VNode[]; };
};
```
