Module Extensions
ColumnRegular
(Extended from @revolist/revogrid
)
ts
interface ColumnRegular {
link?: {
/**
* Target attribute for the link ('_blank', '_self', etc.)
* @default '_blank'
*/
target?: '_blank' | '_self' | '_parent' | '_top';
/**
* Whether to show the protocol (http://, https://, etc.) in the displayed text
* @default false
*/
showProtocol?: boolean;
/**
* Custom CSS class to apply to the link
*/
className?: string;
/**
* Custom CSS style to apply to the link
*/
style?: Record<string, string>;
/**
* Whether to prevent the default link behavior and handle navigation programmatically
* @default false
*/
preventDefault?: boolean;
}
}
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 thecellTemplate
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 acelledit
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 | undefined;