Flashing Cells

Flashing cells are an excellent way to draw attention to updates in your data grid, helping users quickly identify changes in values.

RevoGrid provides a straightforward way to enable flashing on data changes by using a simple column attribute. In this article, we’ll explore how to implement flashing cells and customize their appearance to fit your application’s theme.

Tip

In this example, the Price column will flash when it values change, making it easy for users to spot updates at a glance.

Source code

TypeScript ts

/**
 * Typescript example of a RevoGrid instance with the `CellFlashPlugin` to apply a flashing effect to specific cells, 
 * and the `EventManagerPlugin` for event handling. It defines columns with a custom flash template for the "Price" column 
 * and populates the grid with random data, adjusting the theme based on the current mode.
 */

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

import { currentTheme, useRandomData } from '../composables/useRandomData';
import type { ColumnRegular } from '@revolist/revogrid';
import { EventManagerPlugin } from '@revolist/revogrid-pro';
import {
  CellFlashPlugin,
} from '@revolist/revogrid-pro';
import { cellFlashArrowTemplate } from '@revolist/revogrid-pro';
const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

// Define columns
const columns: ColumnRegular[] = [
  {
    name: '💰 Price',
    prop: 'price',
    flash: () => {
      // Handle cell flash event, you can define your flash logic here per cell if needed
      return true;
    },
    cellTemplate: cellFlashArrowTemplate(),
  },
];

export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) return;

  const grid = document.createElement('revo-grid');
  grid.source = createRandomData(10);
  grid.columns = columns;
  Object.assign(grid, {
    eventManager: {
      applyEventsToSource: true,
    },
  })
  grid.plugins = [EventManagerPlugin, CellFlashPlugin];
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  parent.appendChild(grid);
}

Vue vue

<template>
  <div class="cell-flash-1">
    <VGrid
      class="grow h-full cell-border"
      :theme="isDark ? 'darkMaterial' : 'material'"
      :columns="columns"
      :source="rows"
      :plugins="plugins"
      :additional-data="additionalData"
      range
      hide-attribution
      resize
    />
  </div>
</template>

<script setup lang="ts">
/**
 * The `CellFlash` component is a Vue 3 implementation of RevoGrid that utilizes the `CellFlashPlugin`
 * to visually highlight cells with a flashing effect. It also integrates the `EventManagerPlugin`
 * for event handling and uses a custom cell template for the flash effect.
 */
import { ref } from 'vue';
import { currentThemeVue, useRandomData } from '../composables/useRandomData';
import { VGrid, type ColumnRegular } from '@revolist/vue3-datagrid';
import {
  EventManagerPlugin,
  CellFlashPlugin,
  cellFlashArrowTemplate,
  RowOddPlugin,
  RowSelectPlugin,
  ColumnStretchPlugin,
} from '@revolist/revogrid-pro';

const { isDark } = currentThemeVue();
const { createRandomData } = useRandomData();

// Define columns with appropriate configurations
const columns = ref<ColumnRegular[]>([
  {
    name: 'Price',
    prop: 'price',
    flash: () => {
      // Enable cell flash functionality
      return true;
    },
    cellTemplate: cellFlashArrowTemplate(),
  },
]);

// Register necessary plugins
const plugins = ref([
  EventManagerPlugin,
  CellFlashPlugin,
  RowOddPlugin,
  RowSelectPlugin,
  ColumnStretchPlugin,
]);

const additionalData = {
  stretch: 'all',
};

// Generate and assign data to the grid
const rows = ref(createRandomData(10));
</script>

React tsx

// src/components/cell-flash/CellFlash.tsx

/**
 * The `CellFlash` component is a React-based sample implementation of RevoGrid that integrates the `CellFlashPlugin` 
 * to visually highlight specific cells in the grid using a flashing effect. It uses the `EventManagerPlugin` 
 * for event handling and leverages a custom cell template to apply the flash effect. 
 */

import React, { useState, useMemo, useRef, useEffect } from 'react';
import { RevoGrid, type DataType, type ColumnRegular, BasePlugin } from '@revolist/react-datagrid';
import { EventManagerPlugin, CellFlashPlugin, cellFlashArrowTemplate } from '@revolist/revogrid-pro';
import { useRandomData, currentTheme } from '../composables/useRandomData';

const { isDark } = currentTheme();
const { createRandomData } = useRandomData();

function CellFlash() {
  const gridRef = useRef<HTMLRevoGridElement>(null);
  const [source] = useState<DataType[]>(createRandomData(10));

  const columns: ColumnRegular[] = useMemo(
    () => [
      {
        name: '💰 Price',
        prop: 'price',
        flash: () => true,
        cellTemplate: cellFlashArrowTemplate(),
      },
    ],
    []
  );

  const additionalData = useMemo(
    () => ({
      eventManager: {
        applyEventsToSource: true,
      },
    }),
    []
  );

  const plugins = useMemo(
    () => [EventManagerPlugin, CellFlashPlugin],
    []
  ) as any as (typeof BasePlugin)[];

  const theme = isDark() ? 'darkCompact' : 'compact';

  return (
    <RevoGrid
      ref={gridRef}
      className="cell-flash-1 border rounded-lg"
      columns={columns}
      source={source}
      additionalData={additionalData}
      plugins={plugins}
      theme={theme}
      hide-attribution
    />
  );
}

export default CellFlash;

Angular ts

/**
 * Angular implementation of RevoGrid that integrates the `CellFlashPlugin` 
 * to apply a flashing effect to cells in the "Price" column, and the `EventManagerPlugin` for event handling. 
 * It also handles theme selection and dynamically populates the grid with random data.
 */

import { Component, ViewEncapsulation, ViewChild, ElementRef, NO_ERRORS_SCHEMA } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { EventManagerPlugin, CellFlashPlugin, cellFlashArrowTemplate } from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

@Component({
  selector: 'cell-flash-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      #gridRef
      class="cell-flash-1"
      [columns]="columns"
      [source]="source"
      [eventManager]="additionalData.eventManager"
      [plugins]="plugins"
      [theme]="theme"
      [hideAttribution]="true"
      style="min-height: 400px; min-width: 600px"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
  schemas: [NO_ERRORS_SCHEMA],
})
export class CellFlashGridComponent {
  @ViewChild('gridRef', { static: true }) gridRef!: ElementRef<HTMLRevoGridElement>;

  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  source = useRandomData().createRandomData(10);

  columns = [
    {
      name: '💰 Price',
      prop: 'price',
      flash: () => true, // Handle cell flash logic if needed
      cellTemplate: cellFlashArrowTemplate(),
    },
  ];

  additionalData = {
    eventManager: {
      applyEventsToSource: true,
    },
  };

  plugins = [EventManagerPlugin, CellFlashPlugin];
}

Enabling Flashing Cells

To enable the flashing effect on specific columns, you can set the column attribute flash: (value) => true. This attribute will trigger the flash animation whenever the data in that column changes.

const columns: ColumnRegular[] = [
  {
    name: '💰 Price',
    prop: 'price',
    flash: () => true, // Enable flashing for this column
  },
];

Animating Changes

In addition to color customization, RevoGrid allows you to animate changes visually. This can include displaying directional arrows to indicate whether the value has increased or decreased.

Example: Adding Directional Arrows

You can implement directional arrows alongside the flash effect using custom cell templates or use cellFlashArrowTemplate(cellTemplate):

const columns: ColumnRegular[] = [
  {
    name: '💰 Price',
    prop: 'price',
    flash: () => true,
    cellTemplate: (h, { value, previousValue }) => {
      const arrow = value > previousValue ? '↑' : value < previousValue ? '↓' : '';
      return h('div', {
        style: {
          color: value > previousValue ? 'green' : 'red',
        },
        innerText: `${arrow} ${value}`,
      });
    },
  },
];

In this example, the cell displays an upward arrow for increases and a downward arrow for decreases, visually indicating the change alongside the flashing effect.

Conclusion

Flashing cells is a feature that helps users quickly identify changes in data. By enabling flashing on specific columns and customizing the flash colors, you can create a more engaging and informative user experience. The combination of flash effects and directional arrows further enhances the visibility of updates, allowing users to stay informed at a glance.