Cell Editing

Full Row Cell Editing

Edit some or all cells in a row at once. When cells are edited as a row, the grid applies and commits these changes as a single row edit.

Full Row Edits

Set the editMode property to "row" to enable row-based cell editing. When row edit mode is active, LyteNyte Grid updates cells on a per-row basis. When a row edit begins, the grid renders all editable cells in the row.

The demo below shows row edit mode. The Price, Customer, and Email columns are editable. Double-clicking a cell initiates row editing and renders edit components for all editable cells in that row.


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

20
export interface GridSpec {
21
  readonly data: OrderData;
22
}
23

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

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

67
        return next as OrderData[];
68
      });
69
    },
70
  });
71

72
  return (
73
    <div className="ln-grid" style={{ height: 500 }}>
74
      <Grid rowHeight={50} columns={columns} rowSource={ds} slotShadows={ViewportShadows} editMode="row" />
75
    </div>
76
  );
77
}
78

79
function TextCellEditor({ changeValue, editValue }: Grid.T.EditParams<GridSpec>) {
80
  return (
81
    <input
82
      className="focus:outline-ln-primary-50 h-full w-full px-2"
83
      value={`${editValue}`}
84
      onChange={(e) => changeValue(e.target.value)}
85
    />
86
  );
87
}
88

89
function NumberEditor(props: Grid.T.EditParams<GridSpec>) {
90
  const { changeValue, editValue, editValidation, column } = props;
91
  const valid = typeof editValidation === "boolean" ? editValidation : !editValidation[column.id];
92

93
  return (
94
    <>
95
      <NumberInput.Root
96
        className={tw(
97
          "focus-within:outline-ln-primary-50 flex h-full w-full items-center rounded px-2 focus-within:outline focus-within:-outline-offset-1",
98
          !valid && "bg-ln-red-30 focus-within:outline-ln-red-50",
99
        )}
100
        value={`${editValue}`}
101
        onValueChange={(d) => {
102
          changeValue(Number.isNaN(d.valueAsNumber) ? 0 : d.valueAsNumber);
103
        }}
104
        onKeyDown={(e) => {
105
          if (e.key === "," || e.key === "-") {
106
            e.preventDefault();
107
            e.stopPropagation();
108
          }
109
        }}
110
        min={0}
111
        allowOverflow={false}
112
      >
113
        <NumberInput.Input className={tw("h-full w-full flex-1 focus:outline-none")} />
114
      </NumberInput.Root>
115
    </>
116
  );
117
}
118

119
export function tw(...c: ClassValue[]) {
120
  return twMerge(clsx(...c));
121
}

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
);

When a row edit is active, pressing the Tab key cycles through the row’s editable cells. If row edit mode is not active, pressing Tab ends the edit when the edit renderer loses focus.

Row Edit vs Cell Edit

The choice between individual cell edits and full row edits depends largely on the type of data you are editing. Row editing works best when editing one cell often requires editing another cell in the same row. Individual cell editing is better for general updates, since each cell change is validated and committed independently.

Using row edits instead of cell edits has no performance penalty or functional restrictions. The choice depends entirely on your use case.

Next Steps

Cell Editing: Edit cell values and commit updates in the grid.
Linked Cell Edits: Update dependent cells and cascade changes during edits.
Cell Edit Validation: Validate cell edits to ensure updates are correct.