Cell Editing

Cell Edit Validation

Validation is essential to maintain data integrity when cell editing is enabled in LyteNyte Grid. Verify cell values and display clear error messages for invalid data.

Note

This guide builds on the concepts covered in the Cell Editing and Cell Edit Renderers documentation. We recommend reviewing those topics before proceeding.

Edit Validation

Set the editRowValidatorFn property on the grid to validate cell edit updates. LyteNyte Grid calls editRowValidatorFn at the row level, even for single-cell edits. The function must return one of these values:

true: Validation passed; the edit can safely be applied to the row data.
false: Validation failed without details. Return false only if your UI displays validation feedback in another way.
Record<string, unknown>: A validation error map, keyed by an error code you define, with an error message or error object as the value.

In the demo below, an editRowValidatorFn function validates that the value in the Price column is greater than 0. Double-click any cell in the Price column to begin editing. When the value is less than or equal to 0, LyteNyte Grid displays an error tooltip.


28 collapsed lines
1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import type { OrderData } from "@1771technologies/grid-sample-data/orders";
4
import { data as initialData } from "@1771technologies/grid-sample-data/orders";
5
import {
6
  AvatarCell,
7
  EmailCell,
8
  IdCell,
9
  PaymentMethodCell,
10
  PriceCell,
11
  ProductCell,
12
  PurchaseDateCell,
13
} from "./components.jsx";
14
import { useClientDataSource, Grid } from "@1771technologies/lytenyte-pro";
15
import { useCallback, useState } from "react";
16
import { clsx, type ClassValue } from "clsx";
17
import { twMerge } from "tailwind-merge";
18
import { NumberInput } from "@ark-ui/react/number-input";
19
import { Popover, ViewportShadows } from "@1771technologies/lytenyte-pro/components";
20

21
export function tw(...c: ClassValue[]) {
22
  return twMerge(clsx(...c));
23
}
24

25
export interface GridSpec {
26
  readonly data: OrderData;
27
}
28

29
const columns: Grid.Column<GridSpec>[] = [
30
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID" },
31
  { id: "product", cellRenderer: ProductCell, width: 200, name: "Product" },
32
  {
33
    id: "price",
34
    type: "number",
35
    cellRenderer: PriceCell,
36
    width: 100,
37
    name: "Price",
38
    editable: true,
39
    editRenderer: NumberEditor,
40
  },
41
  {
42
    id: "customer",
43
    cellRenderer: AvatarCell,
44
    width: 180,
45
    name: "Customer",
46
  },
47
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 130, editable: true },
48
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
49
  { id: "email", cellRenderer: EmailCell, width: 220, name: "Email", editable: true },
50
];
51

52
export default function CellEditingDemo() {
53
  const [data, setData] = useState(initialData);
54
  const ds = useClientDataSource({
55
    data,
56
    onRowDataChange: ({ center }) => {
57
      setData((prev) => {
58
        const next = prev.map((row, i) => {
59
          if (center.has(i)) return center.get(i)!;
60
          return row;
61
        });
62

63
        return next as OrderData[];
64
      });
65
    },
66
  });
67

68
  return (
69
    <div className="ln-grid" style={{ height: 500 }}>
70
      <Grid
71
        rowHeight={50}
72
        columns={columns}
73
        rowSource={ds}
74
        slotShadows={ViewportShadows}
75
        editMode="cell"
76
        editRowValidatorFn={useCallback<Required<Grid.Props<GridSpec>>["editRowValidatorFn"]>((p) => {
77
          if (typeof p.editData !== "object") return false;
78

79
          const data = p.editData as Record<string, number>;
80
          if (data.price <= 0) {
81
            return { price: "Price must be greater than 0." };
82
          }
83

84
          return true;
85
        }, [])}
86
      />
87
    </div>
88
  );
89
}
90

91
function NumberEditor(props: Grid.T.EditParams<GridSpec>) {
92
  const { changeValue, editValue, editValidation, column } = props;
93
  const valid = typeof editValidation === "boolean" ? editValidation : !editValidation[column.id];
94
  const errorMessage =
95
    typeof editValidation === "boolean"
96
      ? "Invalid number input."
97
      : ((editValidation[column.id] as string) ?? "Invalid number input.");
98

99
  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
100

101
  return (
102
    <>
103
      <Popover
104
        anchor={anchor}
105
        placement="top"
106
        hide
107
        open={!valid}
108
        modal={false}
109
        lockScroll={false}
110
        focusTrap={false}
111
      >
112
        <Popover.Container>
113
          <Popover.Arrow />
114
          {errorMessage}
115
        </Popover.Container>
116
      </Popover>
117

118
      <NumberInput.Root
119
        className={tw(
120
          "focus-within:outline-ln-primary-50 flex h-full w-full items-center rounded px-2 focus-within:outline focus-within:-outline-offset-1",
121
          !valid && "bg-ln-red-30 focus-within:outline-ln-red-50",
122
        )}
123
        value={`${editValue}`}
124
        onValueChange={(d) => {
125
          changeValue(Number.isNaN(d.valueAsNumber) ? 0 : d.valueAsNumber);
126
        }}
127
        onKeyDown={(e) => {
128
          if (e.key === "," || e.key === "-") {
129
            e.preventDefault();
130
            e.stopPropagation();
131
          }
132
        }}
133
        min={0}
134
        allowOverflow={false}
135
      >
136
        <NumberInput.Input ref={setAnchor} className={tw("h-full w-full flex-1 focus:outline-none")} />
137
      </NumberInput.Root>
138
    </>
139
  );
140
}

1
import { format } from "date-fns";
2
import { type JSX, type ReactNode } from "react";
3
import type { Grid } from "@1771technologies/lytenyte-pro";
4
import type { GridSpec } from "./demo.jsx";
5

6
export function ProductCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
7
  if (!api.rowIsLeaf(row) || !row.data) return;
8

9
  const url = row.data?.productThumbnail;
10
  const title = row.data.product;
11
  const desc = row.data.productDescription;
12

13
  return (
14
    <div className="flex h-full w-full items-center gap-2">
15
      <img className="border-ln-border-strong h-7 w-7 rounded-lg border" src={url} alt={title + desc} />
16
      <div className="text-ln-text-dark flex flex-col gap-0.5">
17
        <div className="font-semibold">{title}</div>
18
        <div className="text-ln-text-light text-xs">{desc}</div>
19
      </div>
20
    </div>
21
  );
22
}
23

24
export function AvatarCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
25
  if (!api.rowIsLeaf(row) || !row.data) return;
26

27
  const url = row.data?.customerAvatar;
28

29
  const name = row.data.customer;
30

31
  return (
32
    <div className="flex h-full w-full items-center gap-2">
33
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
34
      <div className="text-ln-text-dark flex flex-col gap-0.5">
35
        <div>{name}</div>
36
      </div>
37
    </div>
38
  );
39
}
40

41
const formatter = new Intl.NumberFormat("en-Us", {
42
  minimumFractionDigits: 2,
43
  maximumFractionDigits: 2,
44
});
45
export function PriceCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
46
  if (!api.rowIsLeaf(row) || !row.data) return;
47

48
  const price = formatter.format(row.data.price);
49
  const [dollars, cents] = price.split(".");
50

51
  return (
52
    <div className="flex h-full w-full items-center justify-end">
53
      <div className="flex items-baseline tabular-nums">
54
        <span className="text-ln-text font-semibold">${dollars}</span>.
55
        <span className="relative text-xs">{cents}</span>
56
      </div>
57
    </div>
58
  );
59
}
60

61
export function PurchaseDateCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
62
  if (!api.rowIsLeaf(row) || !row.data) return;
63

64
  const formattedDate = format(row.data.purchaseDate, "dd MMM, yyyy");
65

66
  return <div className="flex h-full w-full items-center">{formattedDate}</div>;
67
}
68
export function IdCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
69
  if (!api.rowIsLeaf(row) || !row.data) return;
70

71
  return <div className="text-xs tabular-nums">{row.data.id}</div>;
72
}
73

74
export function PaymentMethodCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
75
  if (!api.rowIsLeaf(row) || !row.data) return;
76

77
  const cardNumber = row.data.cardNumber;
78
  const provider = row.data.paymentMethod;
79

80
  let Logo: ReactNode = null;
81
  if (provider === "Visa") Logo = <VisaLogo className="w-6" />;
82
  if (provider === "Mastercard") Logo = <MastercardLogo className="w-6" />;
83

84
  return (
85
    <div className="flex h-full w-full items-center gap-2">
86
      <div className="flex w-7 items-center justify-center">{Logo}</div>
87
      <div className="flex items-center gap-px">
88
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
89
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
90
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
91
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
92
      </div>
93
      <div className="tabular-nums">{cardNumber}</div>
94
    </div>
95
  );
96
}
97

98
export function EmailCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
99
  if (!api.rowIsLeaf(row) || !row.data) return;
100

101
  return <div className="text-ln-primary-50 flex h-full w-full items-center">{row.data.email}</div>;
102
}
103

104
const VisaLogo = (props: JSX.IntrinsicElements["svg"]) => (
105
  <svg xmlns="http://www.w3.org/2000/svg" width={2500} height={812} viewBox="0.5 0.5 999 323.684" {...props}>
106
    <path
107
      fill="#1434cb"
108
      d="M651.185.5c-70.933 0-134.322 36.766-134.322 104.694 0 77.9 112.423 83.28 112.423 122.415 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.576-38.572 138.576-107.66 0-82.316-112.89-87.537-112.89-123.86 0-12.91 15.501-27.053 47.662-27.053 36.286 0 65.892 14.99 65.892 14.99l14.326-66.204S696.614.5 651.185.5zM2.218 5.497.5 15.49s29.842 5.461 56.719 16.356c34.606 12.492 37.072 19.765 42.9 42.353l63.51 244.832h85.138L379.927 5.497h-84.942L210.707 218.67l-34.39-180.696c-3.154-20.68-19.13-32.477-38.685-32.477H2.218zm411.865 0L347.449 319.03h80.999l66.4-313.534h-80.765zm451.759 0c-19.532 0-29.88 10.457-37.474 28.73L709.699 319.03h84.942l16.434-47.468h103.483l9.994 47.468H999.5L934.115 5.497h-68.273zm11.047 84.707 25.178 117.653h-67.454z"
109
    />
110
  </svg>
111
);
112

113
const MastercardLogo = (props: JSX.IntrinsicElements["svg"]) => (
114
  <svg
115
    xmlns="http://www.w3.org/2000/svg"
116
    width={2500}
117
    height={1524}
118
    viewBox="55.2 38.3 464.5 287.8"
119
    {...props}
120
  >
121
    <path
122
      fill="#f79f1a"
123
      d="M519.7 182.2c0 79.5-64.3 143.9-143.6 143.9s-143.6-64.4-143.6-143.9S296.7 38.3 376 38.3s143.7 64.4 143.7 143.9z"
124
    />
125
    <path
126
      fill="#ea001b"
127
      d="M342.4 182.2c0 79.5-64.3 143.9-143.6 143.9S55.2 261.7 55.2 182.2 119.5 38.3 198.8 38.3s143.6 64.4 143.6 143.9z"
128
    />
129
    <path
130
      fill="#ff5f01"
131
      d="M287.4 68.9c-33.5 26.3-55 67.3-55 113.3s21.5 87 55 113.3c33.5-26.3 55-67.3 55-113.3s-21.5-86.9-55-113.3z"
132
    />
133
  </svg>
134
);

The demo code validates the Price column using the code shown below. You can use editRowValidatorFn to validate any type of data and integrate any validation library.

1
<Grid
2
  rowHeight={50}
3
  columns={columns}
4
  rowSource={ds}
5
  slotShadows={ViewportShadows}
6
  editMode="cell"
7
  editRowValidatorFn={useCallback<Required<Grid.Props<GridSpec>>["editRowValidatorFn"]>((p) => {
8
    if (typeof p.editData !== "object") return false;
9

10
    const data = p.editData as Record<string, number>;
11
    if (data.price <= 0) {
12
      return { price: "Price must be greater than 0." };
13
    }
14

15
    return true;
16
  }, [])}
17
/>

Tip

Zod is a TypeScript-first schema validation library. Consider using Zod to validate cell edits and get strong type safety.

Next Steps

Cell Editing: Edit cell values and commit updates in the grid.
Bulk Cell Editing: Programmatically update large datasets via the API.
Linked Cell Edits: Update dependent cells and cascade changes during edits.

Cell Edit Validation

Note

Edit Validation

Edit Validation

Tip

Next Steps

On this page