# Cell Link
URL: https://pro.rv-grid.com/api/cell-link/
Source: src/content/docs/api/cell-link.md
## Module Extensions

### `ColumnRegular` (Extended from `@revolist/revogrid`)

```ts
interface ColumnRegular {
  link?: LinkConfig | any
}
```

## Plugin API

### `linkRenderer`

The `linkRenderer` is a custom cell editor for RevoGrid that provides a link input
to edit URL values directly within the grid cells.

**Features**:
- Renders a link element for cells, allowing users to click and navigate to URLs
- Supports different link configurations (target, styling, etc.)
- Extracts protocols from displayed text while preserving the full URL for navigation
- Automatically dispatches a `celledit` event upon change, updating the grid's data model

**Usage**:
- Import `linkRenderer` and assign it to the `cellTemplate` property of a column in the RevoGrid.
- Configure link behavior using the `linkConfig` property.
- Ideal for columns that contain URLs or links to external resources.

### Example
```typescript
import { linkRenderer } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'website',
    name: 'Website',
    cellTemplate: linkRenderer,
    link: {
      target: '_blank',
      showProtocol: false,
      className: 'custom-link',
    },
  },
];
```

**Event Handling**:
- The `linkRenderer` dispatches a `celledit` event whenever the link value changes.
- The event detail contains:
  - `rgCol`: The column index of the edited cell.
  - `rgRow`: The row index of the edited cell.
  - `type`: The type of the cell.
  - `prop`: The property of the cell being edited.
  - `val`: The new URL value.
  - `preventFocus`: A flag to control grid focus behavior (default: `false`).

This editor is particularly useful in scenarios where users need to view and interact with
URLs directly from the grid, providing a quick and user-friendly interface for link data.

```ts
linkRenderer: CellTemplate<DataType<any, ColumnProp>> | undefined;
```
