Components

Row Group Cell

Effortlessly handle row group expansion and collapsing using LyteNyte Grid's row group cell component.

Row Group Component

LyteNyte Grid exports the RowGroupCell component to handle row group expansion and collapsing. The RowGroupCell component provides the following group cell functionality:

Expand and collapse group nodes.
Prevent expansion for group nodes that are not expandable.
Display loading indicators while a group expansion is in progress.
Display error indicators when a group expansion fails.

While you can implement row group cell functionality in a custom component, LyteNyte Grid’s RowGroupCell component removes this requirement and significantly reduces the amount of code you need to write.

The demo below illustrates the RowGroupCell component in action. The Group column uses the RowGroupCell component to render group expansion. The RowGroupCell component also handles group label retrieval out of the box.


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

Row Group Cell Styling

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
}

Properties

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

The example below adds 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

Properties

Next Steps

On this page