# Form Edit Example
URL: https://pro.rv-grid.com/guides/form-edit/
Source: src/content/docs/guides/form-edit.mdx
Description: Learn how to implement form-based row editing in RevoGrid
This example demonstrates how to implement form-based row editing using RevoGrid's row expand functionality. Instead of editing cells directly in the grid, users can click on a row to expand it and edit the data in a form format.

## Implementation Details

The form edit functionality is implemented using the `RowExpandPlugin`. When a row is expanded, a custom template renders a form with the row's data. The form is split into two columns for better organization.

Key implementation points:

1. **Row Expansion**: Uses RevoGrid's `RowExpandPlugin` to show/hide the form
2. **Form Layout**: Implements a two-column grid layout using Tailwind/UnoCSS
3. **Data Handling**: Updates the grid's source data when the form is saved
4. **Validation**: Can be extended to add form validation (not implemented in this basic example)

## Features

- Form layout
- Save and Cancel buttons
- Responsive form design
- Custom form fields for different data types
- Automatic grid update on save

## Usage

To implement this in your own project:

1. Import required plugins
2. Configure the grid columns
3. Set up the row expand template with your form fields
4. Handle form submission and data updates

```typescript
grid.additionalData = {
  rowExpand: {
    expandedRowHeight: 300,
    template(h, props) {
      // Form template implementation
    }
  }
};
```

## Customization

You can customize the form by:

- Adding more form fields
- Implementing validation
- Changing the layout
- Adding custom styling
- Implementing different field types
