Client Row Source

Client Row Group Collapsing

Row grouping transforms row data into a tree structure. LyteNyte Grid flattens this tree if a row group contains only a single leaf child.

To collapse group rows that contain a single child row automatically, set rowGroupCollapseBehavior on the client data source to one of the following values:

“full-tree”: Collapse group rows with a single child at every depth.
“last-only”: Collapse group rows with a single child only at the final depth level.
“no-collapse”: Do not collapse any group rows. This is the default.

Full Tree Collapsing

Setting rowGroupCollapseBehavior to "full-tree" collapses group rows that have a single child at every depth level. Use the "full-tree" setting when you want a grouping tree that is as flat as possible without losing information.


82 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { loanData, type LoanDataItem } from "@1771technologies/grid-sample-data/loan-data";
4
import {
5
  CountryCell,
6
  CustomerRating,
7
  DateCell,
8
  DurationCell,
9
  NameCell,
10
  NumberCell,
11
  OverdueCell,
12
} from "./components.js";
13
import { RowGroupCell } from "@1771technologies/lytenyte-pro/components";
14

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

19
const columns: Grid.Column<GridSpec>[] = [
20
  { name: "Name", id: "name", cellRenderer: NameCell, width: 110 },
21
  { name: "Country", id: "country", width: 150, cellRenderer: CountryCell },
22
  { name: "Education", id: "education" },
23
  { name: "Job", id: "job", width: 120 },
24
  { name: "Loan Amount", id: "loanAmount", width: 120, type: "number", cellRenderer: NumberCell },
25
  { name: "Balance", id: "balance", type: "number", cellRenderer: NumberCell },
26
  { name: "Customer Rating", id: "customerRating", type: "number", width: 125, cellRenderer: CustomerRating },
27
  { name: "Marital", id: "marital" },
28
  { name: "Overdue", id: "overdue", cellRenderer: OverdueCell },
29
  { name: "Duration", id: "duration", type: "number", cellRenderer: DurationCell },
30
  { name: "Date", id: "date", width: 110, cellRenderer: DateCell },
31
  { name: "Age", id: "age", width: 80, type: "number" },
32
  { name: "Contact", id: "contact" },
33
];
34

35
const base: Grid.ColumnBase<GridSpec> = { width: 100 };
36

37
const group: Grid.RowGroupColumn<GridSpec> = {
38
  cellRenderer: (props) => {
39
    return (
40
      <RowGroupCell
41
        {...props}
42
        leafLabel={(row, api) => {
43
          if (!row.parentId) return <div className="ps-2.5">{row.data.job}</div>;
44

45
          const parent = api.rowById(row.parentId);
46
          if (parent?.kind === "branch" && row.depth === 1) {
47
            return <div className="ps-6.5 font-bold">{row.data.marital ?? "(blank)"}</div>;
48
          }
49

50
          return "";
51
        }}
52
      />
53
    );
54
  },
55
  width: 200,
56
  pin: "start",
57
};
58

59
let seenSecondary = false;
60
let seenTertiary = false;
61
let seenBlueCollar = false;
62

63
// keep only one row when group is admin and education is not primary. Keep only one blue collar job.
64
const data = loanData.filter((x) => {
65
  if (x.job === "Blue-Collar") {
66
    if (seenBlueCollar) return false;
67
    seenBlueCollar = true;
68
  }
69

70
  if (x.job === "Administration" && x.education !== "Primary") {
71
    if (x.education === "Tertiary") {
72
      if (seenTertiary) return false;
73
      seenTertiary = true;
74
    }
75
    if (x.education === "Secondary") {
76
      if (seenSecondary) return false;
77
      seenSecondary = true;
78
    }
79
  }
80

81
  return true;
82
});
83

84
const groupFn: Grid.T.GroupFn<GridSpec["data"]> = (row) => {
85
  return [row.data.job, row.data.education];
86
};
87

88
export default function ClientDemo() {
89
  const ds = useClientDataSource<GridSpec>({
90
    data: data,
91
    group: groupFn,
92
    rowGroupCollapseBehavior: "full-tree",
93
    rowGroupDefaultExpansion: 0,
94
  });
95

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

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 } 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 NameCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
38
  if (!api.rowIsLeaf(row) || !row.data) return;
39

40
  const url = row.data?.avatar;
41

42
  const name = row.data.name;
43

44
  return (
45
    <div className="flex h-full w-full items-center gap-2">
46
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
47
      <div className="text-ln-text-dark flex flex-col gap-0.5">
48
        <div>{name}</div>
49
      </div>
50
    </div>
51
  );
52
}
53

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

57
  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
58
}
59

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

63
  const flag = countryFlags[field as keyof typeof countryFlags];
64
  if (!flag) return "-";
65

66
  return (
67
    <div className="flex h-full w-full items-center gap-2">
68
      <img className="size-4" src={flag} alt={`country flag of ${field}`} />
69
      <span>{String(field ?? "-")}</span>
70
    </div>
71
  );
72
}
73

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

77
  if (typeof field !== "string") return "-";
78

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

81
  if (!isValid(dateField)) return "-";
82

83
  const niceDate = format(dateField, "yyyy MMM dd");
84
  return <div className="flex h-full w-full items-center tabular-nums">{niceDate}</div>;
85
}
86

87
export function OverdueCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
88
  const field = api.columnField(column, row);
89
  if (field !== "Yes" && field !== "No") return "-";
90

91
  return (
92
    <div
93
      className={tw(
94
        "flex w-full items-center justify-center rounded-lg py-1 font-bold",
95
        field === "No" && "bg-green-500/10 text-green-600",
96
        field === "Yes" && "bg-red-500/10 text-red-400",
97
      )}
98
    >
99
      {field}
100
    </div>
101
  );
102
}
103

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

108
  return (
109
    <div className="flex justify-center text-yellow-300">
110
      <StarRating value={field} />
111
    </div>
112
  );
113
}
114

115
export default function StarRating({ value = 0 }: { value: number }) {
116
  const uid = useId();
117

118
  const max = 5;
119

120
  const clamped = useMemo(() => {
121
    const n = Number.isFinite(value) ? value : 0;
122
    return Math.max(0, Math.min(max, n));
123
  }, [value, max]);
124

125
  const stars = useMemo(() => {
126
    return Array.from({ length: max }, (_, i) => {
127
      const fill = Math.max(0, Math.min(1, clamped - i)); // 0..1
128
      return { i, fill };
129
    });
130
  }, [clamped, max]);
131

132
  return (
133
    <div className={"inline-flex items-center"} role="img">
134
      {stars.map(({ i, fill }) => {
135
        const gradId = `${uid}-star-${i}`;
136
        return <StarIcon key={i} fillFraction={fill} gradientId={gradId} />;
137
      })}
138
    </div>
139
  );
140
}
141

142
function StarIcon({ fillFraction, gradientId }: { fillFraction: number; gradientId: string }) {
143
  const pct = Math.round(fillFraction * 100);
144

145
  return (
146
    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
147
      <defs>
148
        <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
149
          <stop offset={`${pct}%`} stopColor="currentColor" />
150
          <stop offset={`${pct}%`} stopColor="transparent" />
151
        </linearGradient>
152
      </defs>
153

154
      <path
155
        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"
156
        fill={`url(#${gradientId})`}
157
      />
158
      {/* Optional outline for crisp edges */}
159
      <path
160
        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"
161
        fill="none"
162
        stroke="transparent"
163
        strokeWidth="1"
164
        opacity="0.35"
165
      />
166
    </svg>
167
  );
168
}

Note

To clearly demonstrate the "full-tree" collapse behavior, the sample data includes only a single row for the Blue-Collar job category.

Last Only Collapsing

Setting rowGroupCollapseBehavior to "last-only" collapses only the final group row when it has a single child. Unlike "full-tree", the client data source does not collapse parent groups after collapsing the final group, as the demo below shows.

Last Row Group Collapsing

demo.tsx
components.tsx


83 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { loanData, type LoanDataItem } from "@1771technologies/grid-sample-data/loan-data";
4
import {
5
  CountryCell,
6
  CustomerRating,
7
  DateCell,
8
  DurationCell,
9
  NameCell,
10
  NumberCell,
11
  OverdueCell,
12
} from "./components.js";
13
import { RowGroupCell } from "@1771technologies/lytenyte-pro/components";
14

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

19
const columns: Grid.Column<GridSpec>[] = [
20
  { name: "Name", id: "name", cellRenderer: NameCell, width: 110 },
21
  { name: "Country", id: "country", width: 150, cellRenderer: CountryCell },
22
  { name: "Education", id: "education" },
23
  { name: "Job", id: "job", width: 120 },
24
  { name: "Loan Amount", id: "loanAmount", width: 120, type: "number", cellRenderer: NumberCell },
25
  { name: "Balance", id: "balance", type: "number", cellRenderer: NumberCell },
26
  { name: "Customer Rating", id: "customerRating", type: "number", width: 125, cellRenderer: CustomerRating },
27
  { name: "Marital", id: "marital" },
28
  { name: "Overdue", id: "overdue", cellRenderer: OverdueCell },
29
  { name: "Duration", id: "duration", type: "number", cellRenderer: DurationCell },
30
  { name: "Date", id: "date", width: 110, cellRenderer: DateCell },
31
  { name: "Age", id: "age", width: 80, type: "number" },
32
  { name: "Contact", id: "contact" },
33
];
34

35
const base: Grid.ColumnBase<GridSpec> = { width: 100 };
36

37
const group: Grid.RowGroupColumn<GridSpec> = {
38
  cellRenderer: (props) => {
39
    return (
40
      <RowGroupCell
41
        {...props}
42
        leafLabel={(row, api) => {
43
          if (!row.parentId) return <div className="ps-2.5">{row.data.job}</div>;
44

45
          const parent = api.rowById(row.parentId);
46
          if (parent?.kind === "branch" && row.depth === 1) {
47
            return <div className="ps-6.5 font-bold">{row.data.marital ?? "(blank)"}</div>;
48
          }
49

50
          return "";
51
        }}
52
      />
53
    );
54
  },
55
  width: 200,
56
  pin: "start",
57
};
58

59
let seenSecondary = false;
60
let seenTertiary = false;
61
let seenBlueCollar = false;
62

63
// keep only one row when group is admin and education is not primary. Keep only one blue collar job.
64
const data = loanData.filter((x) => {
65
  if (x.job === "Blue-Collar") {
66
    if (seenBlueCollar) return false;
67
    seenBlueCollar = true;
68
  }
69

70
  if (x.job === "Administration" && x.education !== "Primary") {
71
    if (x.education === "Tertiary") {
72
      if (seenTertiary) return false;
73
      seenTertiary = true;
74
    }
75
    if (x.education === "Secondary") {
76
      if (seenSecondary) return false;
77
      seenSecondary = true;
78
    }
79
  }
80

81
  return true;
82
});
83

84

85
const groupFn: Grid.T.GroupFn<GridSpec["data"]> = (row) => {
86
  return [row.data.job, row.data.education];
87
};
88

89
export default function ClientDemo() {
90
  const ds = useClientDataSource<GridSpec>({
91
    data: data,
92
    group: groupFn,
93
    rowGroupCollapseBehavior: "last-only",
94
    rowGroupDefaultExpansion: 0,
95
  });
96

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

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 } 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 NameCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
38
  if (!api.rowIsLeaf(row) || !row.data) return;
39

40
  const url = row.data?.avatar;
41

42
  const name = row.data.name;
43

44
  return (
45
    <div className="flex h-full w-full items-center gap-2">
46
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
47
      <div className="text-ln-text-dark flex flex-col gap-0.5">
48
        <div>{name}</div>
49
      </div>
50
    </div>
51
  );
52
}
53

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

57
  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
58
}
59

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

63
  const flag = countryFlags[field as keyof typeof countryFlags];
64
  if (!flag) return "-";
65

66
  return (
67
    <div className="flex h-full w-full items-center gap-2">
68
      <img className="size-4" src={flag} alt={`country flag of ${field}`} />
69
      <span>{String(field ?? "-")}</span>
70
    </div>
71
  );
72
}
73

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

77
  if (typeof field !== "string") return "-";
78

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

81
  if (!isValid(dateField)) return "-";
82

83
  const niceDate = format(dateField, "yyyy MMM dd");
84
  return <div className="flex h-full w-full items-center tabular-nums">{niceDate}</div>;
85
}
86

87
export function OverdueCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
88
  const field = api.columnField(column, row);
89
  if (field !== "Yes" && field !== "No") return "-";
90

91
  return (
92
    <div
93
      className={tw(
94
        "flex w-full items-center justify-center rounded-lg py-1 font-bold",
95
        field === "No" && "bg-green-500/10 text-green-600",
96
        field === "Yes" && "bg-red-500/10 text-red-400",
97
      )}
98
    >
99
      {field}
100
    </div>
101
  );
102
}
103

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

108
  return (
109
    <div className="flex justify-center text-yellow-300">
110
      <StarRating value={field} />
111
    </div>
112
  );
113
}
114

115
export default function StarRating({ value = 0 }: { value: number }) {
116
  const uid = useId();
117

118
  const max = 5;
119

120
  const clamped = useMemo(() => {
121
    const n = Number.isFinite(value) ? value : 0;
122
    return Math.max(0, Math.min(max, n));
123
  }, [value, max]);
124

125
  const stars = useMemo(() => {
126
    return Array.from({ length: max }, (_, i) => {
127
      const fill = Math.max(0, Math.min(1, clamped - i)); // 0..1
128
      return { i, fill };
129
    });
130
  }, [clamped, max]);
131

132
  return (
133
    <div className={"inline-flex items-center"} role="img">
134
      {stars.map(({ i, fill }) => {
135
        const gradId = `${uid}-star-${i}`;
136
        return <StarIcon key={i} fillFraction={fill} gradientId={gradId} />;
137
      })}
138
    </div>
139
  );
140
}
141

142
function StarIcon({ fillFraction, gradientId }: { fillFraction: number; gradientId: string }) {
143
  const pct = Math.round(fillFraction * 100);
144

145
  return (
146
    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
147
      <defs>
148
        <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
149
          <stop offset={`${pct}%`} stopColor="currentColor" />
150
          <stop offset={`${pct}%`} stopColor="transparent" />
151
        </linearGradient>
152
      </defs>
153

154
      <path
155
        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"
156
        fill={`url(#${gradientId})`}
157
      />
158
      {/* Optional outline for crisp edges */}
159
      <path
160
        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"
161
        fill="none"
162
        stroke="transparent"
163
        strokeWidth="1"
164
        opacity="0.35"
165
      />
166
    </svg>
167
  );
168
}

In the demo, the Blue-Collar group has a single child. However, because the grid uses two grouping levels, only the last level is collapsed.

Updating Collapse Settings

You can update rowGroupCollapseBehavior dynamically. In this demo, useState manages the property value, which updates via a toggle group to demonstrate the different behaviors.

Updating Collapse Behavior

Collapse Behavior:

demo.tsx
components.tsx


86 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import {
4
  CountryCell,
5
  CustomerRating,
6
  DateCell,
7
  DurationCell,
8
  NameCell,
9
  NumberCell,
10
  OverdueCell,
11
  ToggleGroup,
12
  ToggleItem,
13
} from "./components.js";
14
import { useState } from "react";
15
import { loanData, type LoanDataItem } from "@1771technologies/grid-sample-data/loan-data";
16
import { RowGroupCell } from "@1771technologies/lytenyte-pro/components";
17

18
export interface GridSpec {
19
  readonly data: LoanDataItem;
20
}
21

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

38
const base: Grid.ColumnBase<GridSpec> = { width: 100 };
39

40
const group: Grid.RowGroupColumn<GridSpec> = {
41
  cellRenderer: (props) => {
42
    return (
43
      <RowGroupCell
44
        {...props}
45
        leafLabel={(row, api) => {
46
          if (!row.parentId) return <div className="ps-2.5">{row.data.job}</div>;
47

48
          const parent = api.rowById(row.parentId);
49
          if (parent?.kind === "branch" && row.depth === 1) {
50
            return <div className="ps-6.5 font-bold">{row.data.marital ?? "(blank)"}</div>;
51
          }
52

53
          return "";
54
        }}
55
      />
56
    );
57
  },
58
  width: 200,
59
  pin: "start",
60
};
61

62
let seenSecondary = false;
63
let seenTertiary = false;
64
let seenBlueCollar = false;
65

66
// keep only one row when group is admin and education is not primary. Keep only one blue collar job.
67
const data = loanData.filter((x) => {
68
  if (x.job === "Blue-Collar") {
69
    if (seenBlueCollar) return false;
70
    seenBlueCollar = true;
71
  }
72

73
  if (x.job === "Administration" && x.education !== "Primary") {
74
    if (x.education === "Tertiary") {
75
      if (seenTertiary) return false;
76
      seenTertiary = true;
77
    }
78
    if (x.education === "Secondary") {
79
      if (seenSecondary) return false;
80
      seenSecondary = true;
81
    }
82
  }
83

84
  return true;
85
});
86

87

88
const groupFn: Grid.T.GroupFn<GridSpec["data"]> = (row) => {
89
  return [row.data.job, row.data.education];
90
};
91

92
export default function ClientDemo() {
93
  const [collapse, setCollapse] = useState<"no-collapse" | "last-only" | "full-tree">("last-only");
94
  const ds = useClientDataSource<GridSpec>({
95
    data: data,
96
    group: groupFn,
97
    rowGroupCollapseBehavior: collapse,
98
    rowGroupDefaultExpansion: 0,
99
  });
100

101
  return (
102
    <>
103
      <div className={"border-ln-border flex h-full items-center gap-1 text-nowrap border-b px-2 py-2"}>
104
        <div className={"text-light hidden text-xs font-medium md:block"}>Collapse Behavior:</div>
105
        <ToggleGroup
106
          type="single"
107
          value={collapse}
108
          className={"flex flex-wrap"}
109
          onValueChange={(c) => {
110
            if (!c) return;
111
            setCollapse(c as "no-collapse");
112
          }}
113
        >
114
          <ToggleItem value="full-tree">Full Tree</ToggleItem>
115
          <ToggleItem value="last-only">Last Only</ToggleItem>
116
          <ToggleItem value="no-collapse">No Collapse</ToggleItem>
117
        </ToggleGroup>
118
      </div>
119
      <div className="ln-grid ln-header:data-[ln-colid=overdue]:justify-center" style={{ height: 500 }}>
120
        <Grid rowSource={ds} columns={columns} columnBase={base} rowGroupColumn={group} />
121
      </div>
122
    </>
123
  );
124
}

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

10
export function ToggleGroup(props: Parameters<typeof TG.Root>[0]) {
11
  return (
12
    <TG.Root
13
      {...props}
14
      className={tw("bg-ln-gray-20 flex items-center gap-2 rounded-xl px-2 py-1", props.className)}
15
    ></TG.Root>
16
  );
17
}
18

19
export function ToggleItem(props: Parameters<typeof TG.Item>[0]) {
20
  return (
21
    <TG.Item
22
      {...props}
23
      className={tw(
24
        "text-ln-text flex cursor-pointer items-center justify-center px-2 py-1 text-xs font-bold outline-none focus:outline-none",
25
        "data-[state=on]:text-ln-text-dark data-[state=on]:bg-linear-to-b from-ln-gray-02 to-ln-gray-05 data-[state=on]:rounded-md",
26
        props.className,
27
      )}
28
    ></TG.Item>
29
  );
30
}
31

32
export function tw(...c: ClassValue[]) {
33
  return twMerge(clsx(...c));
34
}
35

36
const formatter = new Intl.NumberFormat("en-US", {
37
  maximumFractionDigits: 2,
38
  minimumFractionDigits: 0,
39
});
40
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
41
  const field = api.columnField(column, row);
42

43
  if (typeof field !== "number") return "-";
44

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

47
  return (
48
    <div
49
      className={tw(
50
        "flex h-full w-full items-center justify-end tabular-nums",
51
        field < 0 && "text-red-600 dark:text-red-300",
52
        field > 0 && "text-green-600 dark:text-green-300",
53
      )}
54
    >
55
      {formatted}
56
    </div>
57
  );
58
}
59

60
export function NameCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
61
  if (!api.rowIsLeaf(row) || !row.data) return;
62

63
  const url = row.data?.avatar;
64

65
  const name = row.data.name;
66

67
  return (
68
    <div className="flex h-full w-full items-center gap-2">
69
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
70
      <div className="text-ln-text-dark flex flex-col gap-0.5">
71
        <div>{name}</div>
72
      </div>
73
    </div>
74
  );
75
}
76

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

80
  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
81
}
82

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

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

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

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

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

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

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

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

110
export function OverdueCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
111
  const field = api.columnField(column, row);
112
  if (field !== "Yes" && field !== "No") return "-";
113

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

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

131
  return (
132
    <div className="flex justify-center text-yellow-300">
133
      <StarRating value={field} />
134
    </div>
135
  );
136
}
137

138
export default function StarRating({ value = 0 }: { value: number }) {
139
  const uid = useId();
140

141
  const max = 5;
142

143
  const clamped = useMemo(() => {
144
    const n = Number.isFinite(value) ? value : 0;
145
    return Math.max(0, Math.min(max, n));
146
  }, [value, max]);
147

148
  const stars = useMemo(() => {
149
    return Array.from({ length: max }, (_, i) => {
150
      const fill = Math.max(0, Math.min(1, clamped - i)); // 0..1
151
      return { i, fill };
152
    });
153
  }, [clamped, max]);
154

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

165
function StarIcon({ fillFraction, gradientId }: { fillFraction: number; gradientId: string }) {
166
  const pct = Math.round(fillFraction * 100);
167

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

177
      <path
178
        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"
179
        fill={`url(#${gradientId})`}
180
      />
181
      {/* Optional outline for crisp edges */}
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="none"
185
        stroke="transparent"
186
        strokeWidth="1"
187
        opacity="0.35"
188
      />
189
    </svg>
190
  );
191
}

Next Steps

Client Row Grouping: Create a hierarchical representation of your data by grouping rows.
Client Row Filtering: Explore how to filter rows when using the client row source.
Client Row Aggregations: Aggregate row data per group to display values at the group level.
Client Row Sorting: Sort rows in ascending or descending order with the client row source.

Client Row Group Collapsing

Full Tree Collapsing

Full Tree Collapsing

Note

Last Only Collapsing

Last Row Group Collapsing

Updating Collapse Settings

Updating Collapse Behavior

Next Steps

On this page