Rows

Rows Overview

Learn how the LyteNyte grid creates, renders, and manages rows. LyteNyte Grid has three types of rows, group rows, aggregated rows, and leaf rows. These rows define the grid's main content.

Row Node Interface

LyteNyte Grid represents rows using the RowNode interface. This interface is a union of three types:

RowGroup: A row that contains child rows and establishes a hierarchical relationship.
RowAggregated: A row that contains aggregate data but is not a group node that can be expanded.
RowLeaf: A row with no child rows.

You can distinguish between row node types by checking the kind property. For example:

1
const row: RowNode = { ... };
2

3
const isLeaf = row.kind === "leaf";
4
const isGroup = row.kind === "branch";
5
const isAggregated = row.kind === "aggregated";

LyteNyte Grid also provides convenience methods for identifying row node types. When using TypeScript, these methods will narrow the type of the RowNode union:

1
const isLeaf = api.rowIsLeaf(row);
2
const isGroup = api.rowIsGroup(row);
3
const isAggregated = api.rowIsAggregated(row);

The RowNode interface intentionally omits a row index because a row node does not always correspond to a rendered row. The grid’s data source creates row nodes, and some data sources, such as the server data source, can return rows that are not yet visible. These rows do not have a defined row index.

Although RowNode does not store a row index, LyteNyte Grid exposes the row index when it does exist. The grid passes the rowIndex value to components and callbacks that operate on rendered rows.

Cell renderers, for example, receive a rowIndex prop, as shown in the row index demo below:

Row Indexing

//!

demo.tsx
components.tsx


13 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import type { OrderData } from "@1771technologies/grid-sample-data/orders";
3
import { data } 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

15
export interface GridSpec {
16
  readonly data: OrderData;
17
}
18

19
const columns: Grid.Column<GridSpec>[] = [
20
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID" },
21
  { id: "product", cellRenderer: ProductCell, width: 200, name: "Product" },
22
  { id: "price", type: "number", cellRenderer: PriceCell, width: 100, name: "Price" },
23
  { id: "customer", cellRenderer: AvatarCell, width: 180, name: "Customer" },
24
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 130 },
25
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
26
  { id: "email", cellRenderer: EmailCell, width: 220, name: "Email" },
27
];
28

29
const marker: Grid.ColumnMarker<GridSpec> = {
30
  on: true,
31
  cellRenderer: (p) => {
32
    return <div className="flex h-full w-full items-center justify-center text-xs">{p.rowIndex + 1}</div>;
33
  },
34
};
35

36
export default function ColumnDemo() {
37
  const ds = useClientDataSource({ data: data });
38

39
  return (
40
    <div
41
      className="ln-grid ln-cell-marker:border-e ln-cell-marker:border-e-ln-border-strong"
42
      style={{ height: 500 }}
43
    >
44
      <Grid rowHeight={50} columns={columns} rowSource={ds} columnMarker={marker} />
45
    </div>
46
  );
47
}

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 marker column displays the row index for each rendered row. The following cell renderer adds 1 to the index because LyteNyte Grid uses zero-based indexing:

1
const cellRenderer = (p) => {
2
  return <div>{p.rowIndex + 1}</div>;
3
};

Next Steps

Row Height: Change row height, support variable-height rows, and configure fill-height rows.
Row Pinning: Freeze rows at the top or bottom of the viewport.
Row Selection: Select single or multiple rows.
Row Master Detail: Render expandable row detail content, including nested grids.

Rows Overview

Row Node Interface

Row Indices

Row Indexing

Next Steps

On this page