Components

Row Group Cell

Use LyteNyte Grid's Row Group Cell component to easily expand and collapse row groups.

Row Group Component

LyteNyte Grid exports the RowGroupCell component to handle row group expansion and collapse. It provides the following built-in functionality:

Expand and collapse group nodes.
Prevent expansion for non-expandable group nodes.
Display loading indicators during expansion.
Display error indicators if expansion fails.

LyteNyte Grid’s RowGroupCell component significantly reduces boilerplate compared with a custom implementation.

As shown in the demo below, the Group column uses the RowGroupCell component to render group expansion and to handle out-of-the-box group label retrieval.


48 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { sum, uniq } from "es-toolkit";
3
import { computeField, Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4
import { loanData, type LoanDataItem } from "@1771technologies/grid-sample-data/loan-data";
5
import {
6
  AgeCell,
7
  CountryCell,
8
  CustomerRating,
9
  DateCell,
10
  DurationCell,
11
  NameCell,
12
  NumberCell,
13
  OverdueCell,
14
  TextCell,
15
} from "./components.js";
16
import { clsx, type ClassValue } from "clsx";
17
import { twMerge } from "tailwind-merge";
18
import { RowGroupCell } from "@1771technologies/lytenyte-pro/components";
19

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

24
const columns: Grid.Column<GridSpec>[] = [
25
  { name: "Name", id: "name", cellRenderer: NameCell, width: 110 },
26
  { name: "Country", id: "country", width: 150, cellRenderer: CountryCell },
27
  { name: "Loan Amount", id: "loanAmount", width: 145, type: "number", cellRenderer: NumberCell },
28
  { name: "Balance", id: "balance", type: "number", cellRenderer: NumberCell, width: 120 },
29
  { name: "Customer Rating", id: "customerRating", type: "number", width: 170, cellRenderer: CustomerRating },
30
  { name: "Marital", id: "marital", width: 130 },
31
  { name: "Education", id: "education", hide: true },
32
  { name: "Job", id: "job", width: 140, hide: true },
33
  { name: "Overdue", id: "overdue", width: 120, cellRenderer: OverdueCell },
34
  { name: "Duration", id: "duration", type: "number", width: 120, cellRenderer: DurationCell },
35
  { name: "Date", id: "date", width: 140, cellRenderer: DateCell },
36
  { name: "Age", id: "age", width: 120, type: "number", cellRenderer: AgeCell },
37
  { name: "Contact", id: "contact", width: 130 },
38
];
39

40
const base: Grid.ColumnBase<GridSpec> = { width: 100, headerRenderer: HeaderCell, cellRenderer: TextCell };
41

42
const group: Grid.RowGroupColumn<GridSpec> = {
43
  cellRenderer: RowGroupCell,
44
  headerRenderer: () => <div className="flex items-center">Group</div>,
45
  width: 200,
46
  pin: "start",
47
};
48

49

50
const aggModel: Grid.T.DimensionAgg<GridSpec["data"]>[] = [
51
  { dim: { id: "name" }, fn: "count" },
52
  { dim: { id: "country" }, fn: "same" },
53
  { dim: { id: "loanAmount" }, fn: "avg" },
54
  { dim: { id: "balance" }, fn: "avg" },
55
  { dim: { id: "customerRating" }, fn: "avg" },
56
  { dim: { id: "marital" }, fn: "count" },
57
  { dim: { id: "education" }, fn: "same" },
58
  { dim: { id: "job" }, fn: "same" },
59
  { dim: { id: "overdue" }, fn: "same" },
60
  { dim: { id: "duration" }, fn: "avg" },
61
  { dim: { id: "date" }, fn: "count" },
62
  { dim: { id: "age" }, fn: "avg" },
63
  { dim: { id: "contact" }, fn: "count" },
64
];
65

66
const countCols = ["name", "marital", "date", "contact"];
67

68
const avg: Grid.T.Aggregator<GridSpec["data"]> = (field, data) => {
69
  const values = data.map((x) => computeField<number>(field, x));
70
  return Math.round(sum(values) / values.length);
71
};
72

73
const same: Grid.T.Aggregator<GridSpec["data"]> = (field, data) => {
74
  const values = uniq(data.map((x) => computeField(field, x)));
75
  return values.length === 1 ? values[0] : null;
76
};
77
const count: Grid.T.Aggregator<GridSpec["data"]> = (_, data) => {
78
  return data.length;
79
};
80

81
export default function ClientDemo() {
82
  const ds = useClientDataSource<GridSpec>({
83
    data: loanData,
84
    group: [{ id: "job" }, { id: "education" }],
85
    aggregate: aggModel,
86
    aggregateFns: {
87
      avg: avg,
88
      same: same,
89
      count: count,
90
    },
91
    rowGroupDefaultExpansion: true,
92
  });
93

94
  return (
95
    <div className="ln-grid ln-header:data-[ln-colid=overdue]:justify-center" style={{ height: 500 }}>
96
      <Grid rowSource={ds} columns={columns} columnBase={base} rowGroupColumn={group} />
97
    </div>
98
  );
99
}
100

101
export function HeaderCell({ column }: Grid.T.HeaderParams<GridSpec>) {
102
  return (
103
    <div
104
      className={tw(
105
        "flex items-center justify-between gap-1",
106
        column.type === "number" && "flex-row-reverse",
107
      )}
108
    >
109
      <div>{column.name ?? column.id}</div>
110
      <div className="text-ln-primary-50 text-[10px]">
111
        ({countCols.includes(column.id) ? "count" : column.type === "number" ? "avg" : "same"})
112
      </div>
113
    </div>
114
  );
115
}
116
function tw(...c: ClassValue[]) {
117
  return twMerge(clsx(...c));
118
}

1
import { type Grid } from "@1771technologies/lytenyte-pro";
2
import type { GridSpec } from "./demo.js";
3
import { twMerge } from "tailwind-merge";
4
import clsx, { type ClassValue } from "clsx";
5
import { countryFlags, nameToAvatar } from "@1771technologies/grid-sample-data/loan-data";
6
import { useId, useMemo } from "react";
7
import { format, isValid, parse } from "date-fns";
8

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

13
const formatter = new Intl.NumberFormat("en-US", {
14
  maximumFractionDigits: 2,
15
  minimumFractionDigits: 0,
16
});
17
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
18
  const field = api.columnField(column, row);
19

20
  if (typeof field !== "number") return "-";
21

22
  const formatted = field < 0 ? `-$${formatter.format(Math.abs(field))}` : "$" + formatter.format(field);
23

24
  return (
25
    <div
26
      className={tw(
27
        "flex h-full w-full items-center justify-end tabular-nums",
28
        field < 0 && "text-red-600 dark:text-red-300",
29
        field > 0 && "text-green-600 dark:text-green-300",
30
      )}
31
    >
32
      {formatted}
33
    </div>
34
  );
35
}
36

37
export function TextCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
38
  const field = api.columnField(column, row);
39

40
  if (typeof field === "number")
41
    return <div className="flex w-full items-center justify-end px-2">{field}</div>;
42

43
  return String(field);
44
}
45

46
export function NameCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
47
  const field = api.columnField(column, row);
48

49
  if (typeof field === "number")
50
    return <div className="flex w-full items-center justify-end px-2">{field}</div>;
51

52
  if (typeof field !== "string") return "-";
53

54
  const url = nameToAvatar[field];
55

56
  return (
57
    <div className="flex h-full w-full items-center gap-2">
58
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={field} />
59
      <div className="text-ln-text-dark flex flex-col gap-0.5">
60
        <div>{field}</div>
61
      </div>
62
    </div>
63
  );
64
}
65

66
export function AgeCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
67
  const field = api.columnField(column, row);
68

69
  return typeof field === "number" ? `${formatter.format(field)}` : `${field ?? "-"}`;
70
}
71

72
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
73
  const field = api.columnField(column, row);
74

75
  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
76
}
77

78
export function CountryCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
79
  const field = api.columnField(column, row);
80

81
  if (typeof field === "number")
82
    return <div className="flex w-full items-center justify-end px-2">{field}</div>;
83

84
  const flag = countryFlags[field as keyof typeof countryFlags];
85
  if (!flag) return "-";
86

87
  return (
88
    <div className="flex h-full w-full items-center gap-2">
89
      <img className="size-4" src={flag} alt={`country flag of ${field}`} />
90
      <span>{String(field ?? "-")}</span>
91
    </div>
92
  );
93
}
94

95
export function DateCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
96
  const field = api.columnField(column, row);
97

98
  if (typeof field === "number")
99
    return <div className="flex w-full items-center justify-end px-2">{field}</div>;
100

101
  if (typeof field !== "string") return "-";
102

103
  const dateField = parse(field as string, "yyyy-MM-dd", new Date());
104

105
  if (!isValid(dateField)) return "-";
106

107
  const niceDate = format(dateField, "yyyy MMM dd");
108
  return <div className="flex h-full w-full items-center tabular-nums">{niceDate}</div>;
109
}
110

111
export function OverdueCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
112
  const field = api.columnField(column, row);
113

114
  if (typeof field === "number")
115
    return <div className="flex w-full items-center justify-end px-2">{field}</div>;
116

117
  if (field !== "Yes" && field !== "No") return "-";
118

119
  return (
120
    <div
121
      className={tw(
122
        "flex w-full items-center justify-center rounded-lg py-1 font-bold",
123
        field === "No" && "bg-green-500/10 text-green-600",
124
        field === "Yes" && "bg-red-500/10 text-red-400",
125
      )}
126
    >
127
      {field}
128
    </div>
129
  );
130
}
131

132
export function CustomerRating({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
133
  const field = api.columnField(column, row);
134
  if (typeof field !== "number") return String(field ?? "-");
135

136
  return (
137
    <div className="flex justify-center text-yellow-300">
138
      <StarRating value={field} />
139
    </div>
140
  );
141
}
142

143
export default function StarRating({ value = 0 }: { value: number }) {
144
  const uid = useId();
145

146
  const max = 5;
147

148
  const clamped = useMemo(() => {
149
    const n = Number.isFinite(value) ? value : 0;
150
    return Math.max(0, Math.min(max, n));
151
  }, [value, max]);
152

153
  const stars = useMemo(() => {
154
    return Array.from({ length: max }, (_, i) => {
155
      const fill = Math.max(0, Math.min(1, clamped - i)); // 0..1
156
      return { i, fill };
157
    });
158
  }, [clamped, max]);
159

160
  return (
161
    <div className={"inline-flex items-center"} role="img">
162
      {stars.map(({ i, fill }) => {
163
        const gradId = `${uid}-star-${i}`;
164
        return <StarIcon key={i} fillFraction={fill} gradientId={gradId} />;
165
      })}
166
    </div>
167
  );
168
}
169

170
function StarIcon({ fillFraction, gradientId }: { fillFraction: number; gradientId: string }) {
171
  const pct = Math.round(fillFraction * 100);
172

173
  return (
174
    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
175
      <defs>
176
        <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
177
          <stop offset={`${pct}%`} stopColor="currentColor" />
178
          <stop offset={`${pct}%`} stopColor="transparent" />
179
        </linearGradient>
180
      </defs>
181

182
      <path
183
        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
184
        fill={`url(#${gradientId})`}
185
      />
186
      {/* Optional outline for crisp edges */}
187
      <path
188
        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
189
        fill="none"
190
        stroke="transparent"
191
        strokeWidth="1"
192
        opacity="0.35"
193
      />
194
    </svg>
195
  );
196
}

The code below shows a basic example of configuring a group cell. The RowGroupCell component is a cell renderer and must be provided with all required cell renderer properties.

1
const group: Grid.RowGroupColumn<GridSpec> = {
2
  cellRenderer: RowGroupCell,
3
  width: 200,
4
  pin: "start",
5
};

The RowGroupCell component is unstyled by default. You can style the component using the data attributes applied to the group cell elements. If you are using one of the prebuilt grid themes, the group cell styling is already included.

To create or customize group cell styles, refer to the example CSS below. The prebuilt themes use this CSS as a reference implementation.

1
[data-ln-component-group-cell] {
2
  display: flex;
7 collapsed lines
3
  align-items: center;
4
  box-sizing: border-box;
5
  width: 100%;
6
  height: 100%;
7
  gap: 8px;
8

9
  padding-inline-start: calc(var(--ln-space-40) * var(--ln-row-depth));
10

11
  &[data-ln-component-group-cell-expandable="false"]:not([data-ln-component-group-cell-depth="0"]) {
12
    /* Space 60 for the icon and 8px for the gap. */
13
    padding-inline-start: calc(var(--ln-space-40) * var(--ln-row-depth) + var(--ln-space-60));
14
  }
15

16
  &[data-ln-component-group-cell-expanded="true"]
17
    [data-ln-component-group-cell-expander="true"]:not([data-ln-component-group-cell-error="true"]) {
18
    transform: rotate(90deg);
19
  }
20

21
  &[data-ln-component-group-cell-expanded="true"] [data-ln-component-group-cell-error="true"] {
22
    color: var(--ln-red-50);
23
  }
24

25
  & [data-ln-component-group-cell-expander="true"] {
18 collapsed lines
26
    border-radius: var(--ln-radius-field-md);
27
    background-color: transparent;
28
    border: transparent;
29
    display: flex;
30
    align-items: center;
31
    justify-content: center;
32
    width: var(--ln-space-60);
33
    height: var(--ln-space-60);
34
    min-width: var(--ln-space-60);
35
    min-height: var(--ln-space-60);
36
    max-width: var(--ln-space-60);
37
    max-height: var(--ln-space-60);
38
    margin-inline-start: calc(var(--ln-padding-horizontal-cell) * -1 + 3px);
39

40
    &:hover {
41
      background-color: var(--ln-bg-button-light);
42
      cursor: pointer;
43
    }
44
  }
45
}

Row Group Cell Properties

The RowGroupCell component is a cell renderer. To pass additional props, wrap RowGroupCell in a custom component and forward the props. The wrapper must implement the cell renderer interface.

The example below uses this pattern to add custom leaf-row labels to the row group cell.

1
function MyGroupCell(props: Grid.T.CellRendererParams) {
2
  return (
3
    <RowGroupCell
4
      {...props}
5
      leafLabel={(row, api) => {
6
        if (!row.parentId) return <div className="ps-2.5">{row.data.job}</div>;
7
        const parent = api.rowById(row.parentId);
8
        if (parent?.kind === "branch" && row.depth === 1) {
9
          return <div className="ps-6.5 font-bold">{row.data.marital ?? "(blank)"}</div>;
10
        }
11

12
        return "";
13
      }}
14
    />
15
  );
16
}

The RowGroupCell component extends CellParamsWithIndex. The properties listed below are additional properties supported by the component.

Next Steps

Menu Button: Display a list of actions or options in an accessible dropdown menu.
Smart Select: Streamline data selection using a versatile combobox or select element.
Row Group Cell: Handle expansion and collapse interactions for grouped rows.

Row Group Cell

Row Group Component

Row Group Cell

Row Group Cell Styling

Row Group Cell Properties

Next Steps

On this page