Cell Link

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

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 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

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.

linkRenderer: CellTemplate | undefined;