Cell Flash

Module Extensions

CellTemplateProp (Extended from @revolist/revogrid)

interface CellTemplateProp {
  /**
       * The previous value of the cell.
       */
      previousValue?: any
}

---

ColumnRegular (Extended from @revolist/revogrid)

interface ColumnRegular {
  /**
       * The flash function for the column.
       */
      flash?: (value: any) => boolean
}

Plugin API

CellFlashPlugin

CellFlashPlugin for RevoGrid, designed to visually highlight cells by flashing them when they are edited. This feature enhances user experience by providing immediate feedback on data changes within the grid.

Key Features:

• Flash Management: Maintains a map of cells that require flashing, tracking changes in cell data and previous values to determine when a cell should flash.
• Event Integration: Listens to relevant grid events such as AFTER_SOURCE_EVENT, FLASH_CELL_EVENT, ON_EDIT_EVENT, and BEFORE_CELL_RENDER_EVENT to manage the flashing lifecycle effectively, ensuring that cell flashes are initiated and removed at appropriate times.
• Customizable Flash Behavior: Utilizes column properties to determine if a cell should flash, allowing for flexible configuration based on specific column validation logic.
• Automatic Flash Removal: Automatically removes the flash effect after a set duration (1 second), cleaning up the visual state without user intervention.

Usage:

• To enable this plugin, add it to the plugins array of a RevoGrid instance. This will activate cell flashing functionality for all editable cells in the grid.

Example

import { CellFlashPlugin } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.plugins = [CellFlashPlugin];
grid.columns = [
  {
    prop: 'name',
    flash: (value) => value === 'John',
  },
];

The CellFlashPlugin is crucial for applications that require visual cues for data changes, providing a straightforward method to highlight recent edits and improving data tracking within RevoGrid.

class CellFlashPlugin {}

---

cellFlashArrowTemplate

This module defines the cellFlashArrowTemplate, a function that enhances cell rendering in RevoGrid by adding directional arrows to indicate changes in cell values. This visual enhancement is part of the cell flashing feature, providing immediate feedback on data modifications.

Key Features:

• Directional Indicators: Renders an upward arrow (’↑’) if the new value is greater than the previous value, and a downward arrow (’↓’) if it is less, helping users quickly identify the direction of change.
• Conditional Rendering: Only applies the arrow and flash styling if the current value differs from the previous value, ensuring that cells without changes remain unaffected.
• Flexible Integration: Supports an optional existing cell template, allowing it to be combined with arrow rendering for customized cell display while maintaining compatibility with existing templates.

Usage:

• Integrate this template function into a column’s cellTemplate property to activate the arrow rendering for that column, enhancing cell feedback on value changes.

Example

import { cellFlashArrowTemplate } from './cell-flash-arrow.template';

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'num',
    name: 'Linear',
    minValue: 0,
    maxValue: 40,
    cellTemplate: cellFlashArrowTemplate(),
  },
];

The cellFlashArrowTemplate provides a user-friendly way to visualize data changes, making it easier to track trends and updates within RevoGrid.

cellFlashArrowTemplate: (template?: CellTemplate | undefined) => CellTemplate | undefined;