Client Row Source

Client Row Label Filters

Learn how to use row label filters to display only row groups with valid labels.

Label filters are specialized filters that are used only when row grouping is enabled on the client row source. For additional details on row grouping, refer to the Client Row Grouping guide.

Label Filter Function

The LyteNyte Grid client data source accepts an array of LabelFilter functions or null values. The array index maps to a group depth: element n is applied at depth n. If an element is null, the client data source skips label filtering at that depth.

The demo shows label filters in action. Click a pill to exclude that label from the grid. Each pill row maps to a group level:

The Job pill row filters job groups.
The Education pill row filters education groups.

The demo below shows label filters in action. Clicking a pill disables that label in the grid. The pills are arranged in rows to represent the grouping level. For example, the Job pills filter labels in the job grouping, and the Education pills filter labels in the education grouping.

Row Label Filters

Job

Administration

Blue-Collar

Management

Retired

Services

Technician

Education

Primary

Secondary

Tertiary

demo.tsx
components.tsx


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

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

21
const columns: Grid.Column<GridSpec>[] = [
22
  { name: "Name", id: "name", cellRenderer: NameCell, width: 110 },
23
  { name: "Country", id: "country", width: 150, cellRenderer: CountryCell },
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: "Education", id: "education", hide: true },
29
  { name: "Job", id: "job", width: 120, hide: true },
30
  { name: "Overdue", id: "overdue", cellRenderer: OverdueCell },
31
  { name: "Duration", id: "duration", type: "number", cellRenderer: DurationCell },
32
  { name: "Date", id: "date", width: 110, cellRenderer: DateCell },
33
  { name: "Age", id: "age", width: 80, type: "number" },
34
  { name: "Contact", id: "contact" },
35
];
36

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

39
const group: Grid.RowGroupColumn<GridSpec> = {
40
  cellRenderer: RowGroupCell,
41
  width: 200,
42
  pin: "start",
43
};
44

45

46
export default function ClientDemo() {
47
  const [pills, setPills] = useState<PillManager.T.PillRow[]>(() => {
48
    const allEducation = [...new Set(loanData.map((x) => x.education))]
49
      .sort()
50
      .map<PillManager.T.PillItem>((x) => ({ active: true, id: x, name: x }));
51
    const allJobs = [...new Set(loanData.map((x) => x.job))]
52
      .sort()
53
      .map<PillManager.T.PillItem>((x) => ({ active: true, id: x, name: x }));
54

55
    return [
56
      { id: "job", pills: allJobs, type: "columns", label: "Job" },
57
      { id: "education", pills: allEducation, type: "columns", label: "Education" },
58
    ] satisfies PillManager.T.PillRow[];
59
  });
60

61
  const labelFilter = useMemo(() => {
62
    const filters: (Grid.T.LabelFilter | null)[] = [];
63

64
    for (const pillRow of pills) {
65
      const inactive = new Set(pillRow.pills.filter((x) => !x.active).map((x) => x.id));
66
      if (inactive.size === 0) {
67
        filters.push(null);
68
        continue;
69
      } else {
70
        filters.push((s) => !inactive.has(s as string));
71
      }
72
    }
73

74
    return filters;
75
  }, [pills]);
76

77
  const ds = useClientDataSource<GridSpec>({
78
    data: loanData,
79
    group: [{ id: "job" }, { id: "education" }],
80
    sort: [{ dim: { id: "__ln_group__" }, descending: false }],
81
    labelFilter,
82
    rowGroupDefaultExpansion: true,
83
  });
84

85
  return (
86
    <>
87
      <div>
88
        <PillManager
89
          onPillItemActiveChange={(p) => {
90
            setPills((prev) => {
91
              const next = [...prev];
92
              const newRow = { ...next[p.index] };
93

94
              newRow.pills = newRow.pills.map((x) => {
95
                if (p.item.id === x.id) {
96
                  return { ...x, active: p.item.active };
97
                }
98
                return x;
99
              });
100

101
              next[p.index] = newRow;
102

103
              return next;
104
            });
105
          }}
106
          rows={pills}
107
        />
108
      </div>
109
      <div className="ln-grid ln-header:data-[ln-colid=overdue]:justify-center" style={{ height: 500 }}>
110
        <Grid rowSource={ds} columns={columns} columnBase={base} rowGroupColumn={group} />
111
      </div>
112
    </>
113
  );
114
}

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
}

The demo scans pills to identify inactive items. For each grouping level that includes inactive pills, it creates label filters to remove rows with those labels. This is shown in the code below.

For more on pill manager functionality, see the Pill Manager guide.

1
const labelFilter = useMemo(() => {
2
  const filters: (Grid.T.LabelFilter | null)[] = [];
3

4
  for (const pillRow of pills) {
5
    const inactive = new Set(pillRow.pills.filter((x) => !x.active).map((x) => x.id));
6
    if (inactive.size === 0) {
7
      filters.push(null);
8
      continue;
9
    } else {
10
      filters.push((s) => !inactive.has(s as string));
11
    }
12
  }
13

14
  return filters;
15
}, [pills]);

Next Steps

Client Row Filtering: Explore how to filter rows when using the client row source.
Client Row Having Filters: Use client-side filters to exclude rows after row grouping.
Pill Manager: Create and manage grid interactions using label pills.
Client Row Grouping: Create a hierarchical representation of your data by grouping rows.

Client Row Label Filters

Label Filter Function

Row Label Filters

Next Steps

On this page