Client Row Source

Client Row Deleting

Delete rows using LyteNyte Grid's row data source and ensure the deletion updates your client data.

The useClientDataSource hook returns a row source that can delete rows by calling the rowDelete method. When you provide the source to the grid, the rowDelete method becomes part of the grid’s API.

You can use the rowDelete method to remove existing rows from your data. You can remove any row at any index. To handle row deletions, provide the useClientDataSource hook with a callback on the onRowsDeleted property.

Deleting Rows

In the demo below, click the trash icon to delete a row from the grid. When you delete a row, the grid calls the onRowsDeleted callback that you pass to useClientDataSource. The client data source calls onRowsDeleted with two arguments: the rows to delete and their source indices.


17 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, type RowSourceClient } from "@1771technologies/lytenyte-pro";
15
import { useState } from "react";
16
import { TrashIcon } from "@radix-ui/react-icons";
17
import { ViewportShadows } from "@1771technologies/lytenyte-pro/components";
18

19
export interface GridSpec {
20
  readonly data: OrderData;
21
  readonly source: RowSourceClient<this>;
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
  { id: "price", type: "number", cellRenderer: PriceCell, width: 100, name: "Price" },
28
  { id: "customer", cellRenderer: AvatarCell, width: 180, name: "Customer" },
29
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 130 },
30
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
31
  { id: "email", cellRenderer: EmailCell, width: 220, name: "Email" },
32
];
33

34
const marker: Grid.ColumnMarker<GridSpec> = {
35
  on: true,
36
  cellRenderer: (p) => {
37
    return (
38
      <div className="flex h-full w-full items-center justify-center">
39
        <button
40
          data-ln-button="secondary"
41
          data-ln-size="sm"
42
          data-ln-icon
43
          onClick={() => p.api.rowDelete([p.row])}
44
        >
45
          <span className="sr-only">Delete row</span>
46
          <TrashIcon />
47
        </button>
48
      </div>
49
    );
50
  },
51
};
52

53
export default function ClientDemo() {
54
  const [data, setData] = useState(initialData);
55

56
  const ds = useClientDataSource<GridSpec>({
57
    data: data,
58
    onRowsDeleted: (params) => {
59
      setData((prev) => {
60
        const next = prev.filter((_, i) => !params.sourceIndices.includes(i));
61
        return next;
62
      });
63
    },
64
  });
65

66
  return (
67
    <>
68
      <div className="ln-grid" style={{ height: 500 }}>
69
        <Grid
70
          rowHeight={50}
71
          columns={columns}
72
          rowSource={ds}
73
          slotShadows={ViewportShadows}
74
          columnMarker={marker}
75
        />
76
      </div>
77
    </>
78
  );
79
}

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 deletes rows using the code below. Notice that the code creates a new array by calling filter. You may think you could simplify this by using splice to delete a row. However, splice changes the indices of the existing array, which invalidates the source indices passed to onRowsDeleted. In this case, filter is a better choice.

1
setData((prev) => {
2
  const next = prev.filter((_, i) => !params.sourceIndices.includes(i));
3
  return next;
4
});

Info

A source index is the array index in the original data used to create the row node. A source index is not the same as a row index, because the row index can change based on the grid’s sort, grouping, and filter state, whilst a source index is a stable lookup to the original row data.

Next Steps

Client Row Adding: Learning how to add new rows to an existing dataset.
Client Row Data: Learn how to manage client row data in LyteNyte Grid.
Cell Editing: Edit cell values and commit updates in the grid.

Client Row Deleting

Deleting Rows

Deleting Rows

Info

Next Steps

On this page