Cell Flashing

Graphite Grid allows you to flash cells when their value changes (based on physical equality). Cell flashing can be enabled on a per-column basis using the following properties:

• flashOnChange: Opts the column into cell flashing.
• flashDurationMs: Determines the duration of the flash in milliseconds.
• flashColor: Specifies the color of the cell flash.

To determine if a cell's value has changed, Graphite Grid compares the previous value returned for the cell's field property with the current value.

export function FlashOnChange() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "Stock Price",
          field: 2,
          flashColor: "blue",
          flashDurationMs: 2000,
          flashOnChange: true,
        },
      ],
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

Cell flashing provides a quick way to highlight data changes in the grid. For more complex data diffing, consider using customized cell rendering.