Cells

Cell Diff Flashing

Highlight frequent data updates by momentarily flashing modified cells. This visual cue helps users track real-time changes in high-frequency data streams.

Note

Implement cell flashing using a custom renderer that triggers a CSS animation when the cell value updates. This guide covers several approaches for cell flashing. Review the Cell Renderers guide before you start.

Flashing Cells On Change

To flash a cell when its value changes, compare the current and previous values. If the values differ, apply a CSS flash animation. Click Update Data to randomly change cell values.

1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { computeField, Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4
import { useState } from "react";
5
import { data as initialData, nextData, type DataEntry } from "./data.js";
6
import { GroupCell, HeaderCell, NumberCell } from "./components.js";
7
import { sum } from "es-toolkit";
8

9
export interface GridSpec {
10
  readonly data: DataEntry;
11
  readonly column: { agg?: string };
12
}
13

14
const columns: Grid.Column<GridSpec>[] = [
15
  {
16
    id: "bid",
17
    name: "Bid",
18
    type: "number",
19
    groupVisibility: "always",
20
    cellRenderer: NumberCell,
21
    width: 120,
22
    widthFlex: 1,
23
    agg: "avg",
24
  },
25
  {
26
    id: "ask",
27
    name: "Ask",
28
    type: "number",
29
    groupVisibility: "always",
30
    cellRenderer: NumberCell,
31
    width: 120,
32
    widthFlex: 1,
33
    agg: "avg",
34
  },
35
  {
36
    id: "spread",
37
    name: "Spread",
38
    type: "number",
39
    groupVisibility: "always",
40
    cellRenderer: NumberCell,
41
    width: 120,
42
    widthFlex: 1,
43
    agg: "avg",
44
  },
45

46
  {
47
    id: "volatility",
48
    name: "Volatility",
49
    type: "number",
50
    groupVisibility: "always",
51
    cellRenderer: NumberCell,
52
    width: 120,
53
    widthFlex: 1,
54
    agg: "first",
55
  },
56
  {
57
    id: "latency",
58
    name: "Latency",
59
    type: "number",
60
    groupVisibility: "always",
61
    cellRenderer: NumberCell,
62
    width: 120,
63
    widthFlex: 1,
64
    agg: "first",
65
  },
66
  {
67
    id: "symbol",
68
    name: "Symbol",
69
    hide: true,
70
    groupVisibility: "always",
71
    type: "number",
72
    agg: "first",
73
  },
74
];
75

76
const avg: Grid.T.Aggregator<GridSpec["data"]> = (field, data) => {
77
  const values = data.map((x) => computeField<number>(field, x));
78
  return sum(values) / values.length;
79
};
80
const first: Grid.T.Aggregator<GridSpec["data"]> = (field, data) => {
81
  return computeField(field, data[0]);
82
};
83

84
const base: Grid.ColumnMarker<GridSpec> = { headerRenderer: HeaderCell };
85
const rowGroupColumn: Grid.RowGroupColumn<GridSpec> = { width: 170, cellRenderer: GroupCell, pin: "start" };
86

87
export default function CellDemo() {
88
  const [data, setData] = useState(initialData);
89

90
  const ds = useClientDataSource<GridSpec>({
91
    data,
92
    group: [{ id: "symbol" }],
93
    aggregate: columns.map((x) => ({ dim: { id: x.id }, fn: x.agg ?? "first" })),
94
    aggregateFns: { avg, first },
95
  });
96

97
  return (
98
    <>
99
      <div className="border-ln-border flex gap-4 border-b px-4 py-3">
100
        <button
101
          data-ln-button="website"
102
          data-ln-size="md"
103
          onClick={() => {
104
            setData(nextData());
105
          }}
106
        >
107
          Update Data
108
        </button>
109
      </div>
110

111
      <div className="ln-grid" style={{ height: 500 }}>
112
        <Grid columns={columns} rowSource={ds} rowGroupColumn={rowGroupColumn} columnBase={base} />
113
      </div>
114
    </>
115
  );
116
}

1
import "./component.css";
2
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
3
import { useEffect, useMemo, useRef } from "react";
4

5
import type { ClassValue } from "clsx";
6
import clsx from "clsx";
7
import { twMerge } from "tailwind-merge";
8
import type { Grid } from "@1771technologies/lytenyte-pro";
9
import type { GridSpec } from "./demo";
10

11
export function tw(...c: ClassValue[]) {
12
  return twMerge(clsx(...c));
13
}
14

15
const formatter = new Intl.NumberFormat("en-US", {
16
  minimumFractionDigits: 2,
17
  maximumFractionDigits: 2,
18
});
19

20
export function NumberCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
21
  const field = api.columnField(column, row) as number;
22

23
  const prevValue = useRef(field);
24

25
  const diff = useMemo(() => {
26
    if (prevValue.current === field) return 0;
27

28
    const diff = field - prevValue.current;
29
    prevValue.current = field;
30

31
    return diff;
32
  }, [field]);
33

34
  const value = typeof field === "number" ? formatter.format(field) : "-";
35

36
  const ref = useRef<HTMLDivElement>(null);
37
  useEffect(() => {
38
    const parent = ref.current?.parentElement;
39
    if (!parent || !diff) return;
40

41
    parent.style.animation = "none";
42
    requestAnimationFrame(() => {
43
      parent.style.animation = "flash 1s ease-out forwards";
44
    });
45
  }, [diff]);
46

47
  return (
48
    <div ref={ref} className="flex h-full items-center justify-end gap-2 tabular-nums tracking-tighter">
49
      {value}
50
    </div>
51
  );
52
}
53

54
function CaretRight() {
55
  return (
56
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewBox="0 0 256 256">
57
      <path d="M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z"></path>
58
    </svg>
59
  );
60
}
61

62
export function GroupCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
63
  if (api.rowIsGroup(row)) {
64
    const symbol = row.key;
65

66
    const isExpanded = row.expanded;
67

68
    return (
69
      <div className="flex h-full w-full items-center gap-2 overflow-hidden text-nowrap px-3">
70
        <button
71
          className={tw(
72
            "hover:bg-ln-gray-10 w-5 cursor-pointer rounded transition-colors",
73
            isExpanded && "rotate-90",
74
          )}
75
          onClick={() => {
76
            api.rowGroupToggle(row);
77
          }}
78
        >
79
          <span className="sr-only">Toggle the row group</span>
80
          <CaretRight />
81
        </button>
82
        <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
83
          <img
84
            src={logos[symbol!]}
85
            alt={`Logo of `}
86
            className="h-6.5 min-h-6.5 w-6.5 min-w-[26] rounded-full bg-black p-1"
87
          />
88
        </div>
89
        <div className="symbol-cell min-w-15 flex items-center justify-center rounded-2xl bg-teal-600/20 px-1 py-0.5 text-xs">
90
          {symbol}
91
        </div>
92
      </div>
93
    );
94
  }
95
  if (!api.rowIsLeaf(row)) return null;
96

97
  const symbol = row.data?.["symbol"] as string;
98

99
  return (
100
    <div className="flex h-full w-full items-center justify-end gap-3 overflow-hidden text-nowrap px-3">
101
      <div className="symbol-cell min-w-15 flex items-center justify-center rounded-2xl px-1 py-0.5 text-xs opacity-50">
102
        {symbol}
103
      </div>
104
    </div>
105
  );
106
}
107

108
export const HeaderCell = ({ column }: Grid.T.HeaderParams<GridSpec>) => {
109
  const aggName = column.agg;
110

111
  return (
112
    <div
113
      className={clsx(
114
        "flex h-full w-full items-center gap-2 text-sm",
115
        column.type === "number" && "flex-row-reverse",
116
      )}
117
    >
118
      <div>{column.name ?? column.id}</div>
119
      {aggName && (
120
        <span className="focus-visible:ring-ln-primary-50 text-ln-primary-50 rounded px-1 py-1 text-[10px] text-xs focus:outline-none focus-visible:ring-1">
121
          ({aggName as string})
122
        </span>
123
      )}
124
    </div>
125
  );
126
};

The cell flashing logic lives in the NumberCell component. NumberCell is a custom cell renderer that the grid columns use. The component tracks the previous value and applies the "flash" animation in an effect whenever the value changes.

1
export function NumberCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
2
  const field = api.columnField(column, row) as number;
3

4
  const prevRef = useRef(field);
5
  const prev = prevRef.current;
6

7
  const value = typeof field === "number" ? formatter.format(field) : "-";
8

9
  const diff = field - (prev ?? field);
10
  if (prev !== field) prevRef.current = field;
11

12
  const ref = useRef<HTMLDivElement>(null);
13
  useEffect(() => {
14
    if (!ref.current) return;
15

16
    ref.current.style.animation = "none";
17
    requestAnimationFrame(() => {
18
      ref.current!.style.animation = "flash 1s ease-out forwards";
19
    });
20
  }, [diff]);
21

22
  return (
23
    <div ref={ref} className="flex h-full items-center justify-end gap-2 tabular-nums tracking-tighter">
24
      {value}
25
    </div>
26
  );
27
}

Enhanced Flash

Flashing the cell background indicates a value changed but doesn’t show the change’s direction or magnitude. To provide context, flash the value itself, as shown in the demo below.

Flash Value Changes

demo.tsx
components.tsx

1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { computeField, Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4
import { useState } from "react";
5
import { data as initialData, nextData, type DataEntry } from "./data.js";
6
import { GroupCell, HeaderCell, NumberCell } from "./components.jsx";
7
import { sum } from "es-toolkit";
8

9
export interface GridSpec {
10
  readonly data: DataEntry;
11
  readonly column: { agg?: string };
12
}
13

14
const columns: Grid.Column<GridSpec>[] = [
15
  {
16
    id: "bid",
17
    name: "Bid",
18
    type: "number",
19
    groupVisibility: "always",
20
    cellRenderer: NumberCell,
21
    width: 120,
22
    widthFlex: 1,
23
    agg: "avg",
24
  },
25
  {
26
    id: "ask",
27
    name: "Ask",
28
    type: "number",
29
    groupVisibility: "always",
30
    cellRenderer: NumberCell,
31
    width: 120,
32
    widthFlex: 1,
33
    agg: "avg",
34
  },
35
  {
36
    id: "spread",
37
    name: "Spread",
38
    type: "number",
39
    groupVisibility: "always",
40
    cellRenderer: NumberCell,
41
    width: 120,
42
    widthFlex: 1,
43
    agg: "avg",
44
  },
45

46
  {
47
    id: "volatility",
48
    name: "Volatility",
49
    type: "number",
50
    groupVisibility: "always",
51
    cellRenderer: NumberCell,
52
    width: 120,
53
    widthFlex: 1,
54
    agg: "first",
55
  },
56
  {
57
    id: "latency",
58
    name: "Latency",
59
    type: "number",
60
    groupVisibility: "always",
61
    cellRenderer: NumberCell,
62
    width: 120,
63
    widthFlex: 1,
64
    agg: "first",
65
  },
66
  {
67
    id: "symbol",
68
    name: "Symbol",
69
    hide: true,
70
    groupVisibility: "always",
71
    type: "number",
72
    agg: "first",
73
  },
74
];
75

76
const avg: Grid.T.Aggregator<GridSpec["data"]> = (field, data) => {
77
  const values = data.map((x) => computeField<number>(field, x));
78
  return sum(values) / values.length;
79
};
80
const first: Grid.T.Aggregator<GridSpec["data"]> = (field, data) => {
81
  return computeField(field, data[0]);
82
};
83

84
const base: Grid.ColumnMarker<GridSpec> = { headerRenderer: HeaderCell };
85
const rowGroupColumn: Grid.RowGroupColumn<GridSpec> = { width: 170, cellRenderer: GroupCell, pin: "start" };
86

87
export default function CellDemo() {
88
  const [data, setData] = useState(initialData);
89

90
  const ds = useClientDataSource<GridSpec>({
91
    data,
92
    group: [{ id: "symbol" }],
93
    aggregate: columns.map((x) => ({ dim: { id: x.id }, fn: x.agg ?? "first" })),
94
    aggregateFns: { avg, first },
95
  });
96

97
  return (
98
    <>
99
      <div className="border-ln-border flex gap-4 border-b px-4 py-3">
100
        <button
101
          data-ln-button="website"
102
          data-ln-size="md"
103
          onClick={() => {
104
            setData(nextData());
105
          }}
106
        >
107
          Update Data
108
        </button>
109
      </div>
110

111
      <div className="ln-grid" style={{ height: 500 }}>
112
        <Grid columns={columns} rowSource={ds} rowGroupColumn={rowGroupColumn} columnBase={base} />
113
      </div>
114
    </>
115
  );
116
}

1
import "./component.css";
2
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
3
import { useEffect, useMemo, useRef } from "react";
4

5
import type { ClassValue } from "clsx";
6
import clsx from "clsx";
7
import { twMerge } from "tailwind-merge";
8
import type { Grid } from "@1771technologies/lytenyte-pro";
9
import type { GridSpec } from "./demo";
10
import { ArrowDownIcon, ArrowUpIcon } from "@radix-ui/react-icons";
11

12
export function tw(...c: ClassValue[]) {
13
  return twMerge(clsx(...c));
14
}
15

16
const formatter = new Intl.NumberFormat("en-US", {
17
  minimumFractionDigits: 2,
18
  maximumFractionDigits: 2,
19
});
20

21
export function NumberCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
22
  const field = api.columnField(column, row) as number;
23

24
  const prevValue = useRef(field);
25

26
  const diff = useMemo(() => {
27
    if (prevValue.current === field) return 0;
28

29
    const diff = field - prevValue.current;
30
    prevValue.current = field;
31

32
    return diff;
33
  }, [field]);
34

35
  const value = typeof field === "number" ? formatter.format(field) : "-";
36
  const ref = useRef<HTMLDivElement>(null);
37

38
  useEffect(() => {
39
    if (!ref.current || diff === 0) return;
40

41
    ref.current.style.animation = "none";
42
    void ref.current.clientHeight; // Forces layout changes to be applied
43
    requestAnimationFrame(() => {
44
      if (!ref.current) return;
45

46
      ref.current.style.animation = "fadeOut 3s ease-out forwards";
47
    });
48
  }, [diff]);
49

50
  return (
51
    <div className="flex h-full items-center justify-end gap-2 tabular-nums tracking-tighter">
52
      <div
53
        ref={ref}
54
        className={clsx(
55
          "flex items-center rounded px-1 text-[10px]",
56

57
          diff < 0 && "bg-red-800/20 text-red-500",
58
          diff > 0 && "bg-green-500/20 text-green-500",
59
        )}
60
      >
61
        {diff < 0 && <ArrowDownIcon width={12} height={12} />}
62
        {diff > 0 && <ArrowUpIcon width={12} height={12} />}
63
        <span>{diff !== 0 && diff.toFixed(2)}</span>
64
      </div>
65

66
      {value}
67
    </div>
68
  );
69
}
70

71
function CaretRight() {
72
  return (
73
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentcolor" viewBox="0 0 256 256">
74
      <path d="M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z"></path>
75
    </svg>
76
  );
77
}
78

79
export function GroupCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
80
  if (api.rowIsGroup(row)) {
81
    const symbol = row.key;
82

83
    const isExpanded = row.expanded;
84

85
    return (
86
      <div className="flex h-full w-full items-center gap-2 overflow-hidden text-nowrap px-3">
87
        <button
88
          className={tw(
89
            "hover:bg-ln-gray-10 w-5 cursor-pointer rounded transition-colors",
90
            isExpanded && "rotate-90",
91
          )}
92
          onClick={() => {
93
            api.rowGroupToggle(row);
94
          }}
95
        >
96
          <span className="sr-only">Toggle the row group</span>
97
          <CaretRight />
98
        </button>
99
        <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
100
          <img
101
            src={logos[symbol!]}
102
            alt={`Logo of `}
103
            className="h-6.5 min-h-6.5 w-6.5 min-w-[26] rounded-full bg-black p-1"
104
          />
105
        </div>
106
        <div className="symbol-cell min-w-15 flex items-center justify-center rounded-2xl bg-teal-600/20 px-1 py-0.5 text-xs">
107
          {symbol}
108
        </div>
109
      </div>
110
    );
111
  }
112
  if (!api.rowIsLeaf(row)) return null;
113

114
  const symbol = row.data?.["symbol"] as string;
115

116
  return (
117
    <div className="flex h-full w-full items-center justify-end gap-3 overflow-hidden text-nowrap px-3">
118
      <div className="symbol-cell min-w-15 flex items-center justify-center rounded-2xl px-1 py-0.5 text-xs opacity-50">
119
        {symbol}
120
      </div>
121
    </div>
122
  );
123
}
124

125
export const HeaderCell = ({ column }: Grid.T.HeaderParams<GridSpec>) => {
126
  const aggName = column.agg;
127

128
  return (
129
    <div
130
      className={clsx(
131
        "flex h-full w-full items-center gap-2 text-sm",
132
        column.type === "number" && "flex-row-reverse",
133
      )}
134
    >
135
      <div>{column.name ?? column.id}</div>
136
      {aggName && (
137
        <span className="focus-visible:ring-ln-primary-50 text-ln-primary-50 rounded px-1 py-1 text-[10px] text-xs focus:outline-none focus-visible:ring-1">
138
          ({aggName as string})
139
        </span>
140
      )}
141
    </div>
142
  );
143
};

This demo reuses the change-detection logic from the previous example but alters the rendering. Instead of flashing the background, the cell renderer highlights the value change and then fades out the effect. See the code below.

1
export function NumberCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
20 collapsed lines
2
  const field = api.columnField(column, row) as number;
3

4
  const prevRef = useRef(field);
5
  const prev = prevRef.current;
6

7
  const value = typeof field === "number" ? formatter.format(field) : "-";
8

9
  const diff = field - (prev ?? field);
10

11
  if (prev !== field) prevRef.current = field;
12
  const ref = useRef<HTMLDivElement>(null);
13
  useEffect(() => {
14
    if (!ref.current) return;
15

16
    ref.current.style.animation = "none";
17
    requestAnimationFrame(() => {
18
      ref.current!.style.animation = "fadeOut 3s ease-out forwards";
19
    });
20
  }, [diff]);
21

22

23
  return (
24
    <div className="flex h-full items-center justify-end gap-2 tabular-nums tracking-tighter">
25
      {diff !== 0 && (
26
        <div
27
          ref={ref}
28
          className={clsx(
29
            "flex items-center rounded px-1 text-[10px]",
30
            diff < 0 && "bg-red-800/20 text-red-500",
31
            diff > 0 && "bg-green-500/20 text-green-500",
32
          )}
33
        >
34
          {diff < 0 && <ArrowDownIcon width={12} height={12} />}
35
          {diff > 0 && <ArrowUpIcon width={12} height={12} />}
36
          <span>{diff.toFixed(2)}</span>
37
        </div>
38
      )}
39

40
      {value}
41
    </div>
42
  );
43
}

Next Steps

Cell Renderers: Render custom cell content with React components.
Cell Range Selection: Learn how to select single or multiple cell ranges.
Cell Tooltips & Popovers: Render custom tooltips or popovers on hover or click.