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.

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.