Components

Pill Manager

Use the Pill Manager to manage data items, selection, order, and state using a list of pills with drag-and-drop support.

LyteNyte Grid exports PillManager, a headless component with composable parts. Assemble the parts for manual customization, or use the default configuration.

You can use the PillManager to control different aspects of the grid, for example:

Use the PillManager to control column visibility and column order by toggling pills and reordering them.
Use the PillManager to manage and reorder row groupings.
Use pills to select from a list of labels to support label filters.
Combine multiple pill rows to create a column pivot configuration UI.

The example below demonstrates a complete setup. The remaining sections of this guide explain the individual capabilities of the PillManager component.

Pill Manager Component

Column Pivots

Age Group

Gender

Country

State

Product

Category

Sub-Category

Row Pivots

Country

Age Group

Gender

State

Product

Category

Sub-Category

Measures

Profit

Quantity

Price

Cost

Revenue

demo.tsx

1
import "@1771technologies/lytenyte-pro/pill-manager.css";
2
import "@1771technologies/lytenyte-pro/components.css";
3
import "@1771technologies/lytenyte-pro/light-dark.css";
4
import { type SaleDataItem } from "@1771technologies/grid-sample-data/sales-data";
5
import type { Grid } from "@1771technologies/lytenyte-pro";
6
import { Menu, PillManager } from "@1771technologies/lytenyte-pro/components";
7
import { useMemo, useState } from "react";
8

9
export interface GridSpec {
10
  readonly data: SaleDataItem;
11
  readonly column: {
12
    pivotable?: boolean;
13
    measurable?: boolean;
14
    measure?: string;
15
  };
16
}
17

18
export const columns: Grid.Column<GridSpec>[] = [
19
  { id: "date", name: "Date" },
20
  { id: "age", name: "Age", type: "number" },
21
  { id: "ageGroup", name: "Age Group", pivotable: true },
22
  { id: "customerGender", name: "Gender", pivotable: true },
23
  { id: "country", name: "Country", pivotable: true },
24

25
  { id: "profit", name: "Profit", type: "number", measurable: true },
26
  { id: "orderQuantity", name: "Quantity", type: "number", measurable: true },
27
  { id: "unitPrice", name: "Price", type: "number", measurable: true },
28
  { id: "cost", name: "Cost", type: "number", measurable: true },
29
  { id: "revenue", name: "Revenue", type: "number", measurable: true },
30

31
  { id: "state", name: "State", pivotable: true },
32
  { id: "product", name: "Product", pivotable: true },
33
  { id: "productCategory", name: "Category", pivotable: true },
34
  { id: "subCategory", name: "Sub-Category", pivotable: true },
35
];
36

37
export default function ComponentDemo() {
38
  const [measures, setMeasures] = useState<PillManager.T.PillItem[]>(() => {
39
    return columns
40
      .filter((x) => x.measurable)
41
      .map<PillManager.T.PillItem>((x) => ({
42
        id: x.id,
43
        active: x.id === "profit",
44
        movable: true,
45
        name: x.name,
46
      }));
47
  });
48

49
  const [colPivots, setColPivots] = useState<PillManager.T.PillItem[]>(() =>
50
    columns
51
      .filter((x) => x.pivotable)
52
      .map((x) => ({ id: x.id, name: x.name ?? x.id, active: x.id === "ageGroup" })),
53
  );
54
  const [rowPivots, setRowPivots] = useState<PillManager.T.PillItem[]>(() => {
55
    const pivotables = columns
56
      .filter((x) => x.pivotable)
57
      .map((x) => ({
58
        id: x.id,
59
        name: x.name ?? x.id,
60
        active: x.id === "country",
61
      }));
62

63
    const active = [...pivotables.filter((x) => x.active)];
64
    const notActive = [...pivotables.filter((x) => !x.active)];
65

66
    return [...active, ...notActive];
67
  });
68

69
  const pillRows = useMemo<PillManager.T.PillRow[]>(() => {
70
    const colPivotPills = colPivots.map((x) => {
71
      return {
72
        id: x.id,
73
        active: x.active,
74
        movable: x.active,
75
        name: x.name ?? x.id,
76
        data: x,
77
        removable: true,
78
      };
79
    });
80
    const rowPivotPills = rowPivots.map((x) => {
81
      return {
82
        id: x.id,
83
        active: x.active,
84
        movable: x.active,
85
        name: x.name ?? x.id,
86
        data: x,
87
        removable: true,
88
      };
89
    });
90
    const measurePills = measures.map((x) => {
91
      return {
92
        id: x.id,
93
        active: x.active,
94
        name: x.name ?? x.id,
95
        data: x.data,
96
        removable: true,
97
      };
98
    });
99

100
    return [
101
      {
102
        id: "column-pivots",
103
        label: "Column Pivots",
104
        type: "column-pivots",
105
        pills: colPivotPills,
106
        accepts: ["row-pivots"],
107
      },
108
      {
109
        id: "row-pivots",
110
        label: "Row Pivots",
111
        type: "row-pivots",
112
        pills: rowPivotPills,
113
        accepts: ["column-pivots"],
114
      },
115
      {
116
        id: "measures",
117
        label: "Measures",
118
        type: "measures",
119
        pills: measurePills,
120
      },
121
    ];
122
  }, [colPivots, measures, rowPivots]);
123

124
  return (
125
    <>
126
      <div className="@container" style={{ height: 400, display: "flex", alignItems: "center" }}>
127
        <div className="border-ln-border w-full border-t">
128
          <PillManager
129
            rows={pillRows}
130
            onPillItemActiveChange={(p) => {
131
              setColPivots((prev) => {
132
                const next = prev.map((x) =>
133
                  x.id === p.item.id ? { ...x, active: p.item.active && p.row.id === "column-pivots" } : x,
134
                );
135
                return [...next.filter((x) => x.active), ...next.filter((x) => !x.active)];
136
              });
137
              setRowPivots((prev) => {
138
                const next = prev.map((x) =>
139
                  x.id === p.item.id ? { ...x, active: p.item.active && p.row.id === "row-pivots" } : x,
140
                );
141
                return [...next.filter((x) => x.active), ...next.filter((x) => !x.active)];
142
              });
143
              setMeasures((prev) => {
144
                const next = prev.map((x) =>
145
                  x.id === p.item.id ? { ...x, active: p.item.active && p.row.id === "measures" } : x,
146
                );
147
                return [...next.filter((x) => x.active), ...next.filter((x) => !x.active)];
148
              });
149
            }}
150
            onPillRowChange={(ev) => {
151
              for (const changed of ev.changed) {
152
                const activeFirst = changed.pills.filter((x) => x.active);
153
                const nonActive = changed.pills.filter((x) => !x.active);
154
                if (changed.id === "column-pivots") {
155
                  setColPivots([...activeFirst, ...nonActive]);
156
                }
157
                if (changed.id === "row-pivots") {
158
                  setRowPivots([...activeFirst, ...nonActive]);
159
                }
160
                if (changed.id === "measures") {
161
                  setMeasures([...activeFirst, ...nonActive]);
162
                }
163
              }
164
            }}
165
          >
166
            {(row) => {
167
              return (
168
                <PillManager.Row row={row} className="relative">
169
                  {row.id === "column-pivots" && (
170
                    <SwapPivots
171
                      onSwap={() => {
172
                        setColPivots(rowPivots);
173
                        setRowPivots(colPivots);
174
                      }}
175
                    />
176
                  )}
177
                  <PillManager.Label row={row} />
178
                  <PillManager.Container>
179
                    {row.pills.map((x) => {
180
                      if (row.id === "measures") {
181
                        return (
182
                          <PillManager.Pill
183
                            item={x}
184
                            key={x.id}
185
                            elementEnd={
186
                              x.active ? (
187
                                <div className="text-ln-primary-50 ms-1">
188
                                  <Menu>
189
                                    <Menu.Trigger
190
                                      onClick={(e) => e.stopPropagation()}
191
                                      className="text-ln-primary-50 hover:bg-ln-primary-30 cursor-pointer rounded-lg px-0.5 py-0.5 text-[10px]"
192
                                    >
193
                                      ({(x.data as string) ?? "sum"})
194
                                    </Menu.Trigger>
195
                                    <Menu.Popover>
196
                                      <Menu.Container>
197
                                        <Menu.Arrow />
198

199
                                        {["sum", "avg", "max", "min", "last", "first", "count"].map((agg) => {
200
                                          return (
201
                                            <Menu.Item
202
                                              key={agg}
203
                                              onAction={() => {
204
                                                setMeasures((prev) => {
205
                                                  const next = [...prev];
206
                                                  const nexIndex = prev.findIndex((m) => m.id === x.id);
207
                                                  if (nexIndex === -1) return prev;
208

209
                                                  next[nexIndex] = {
210
                                                    ...next[nexIndex],
211
                                                    data: agg.toLowerCase(),
212
                                                  };
213
                                                  return next;
214
                                                });
215
                                              }}
216
                                            >
217
                                              {agg}
218
                                            </Menu.Item>
219
                                          );
220
                                        })}
221
                                      </Menu.Container>
222
                                    </Menu.Popover>
223
                                  </Menu>
224
                                </div>
225
                              ) : null
226
                            }
227
                          />
228
                        );
229
                      }
230

231
                      return <PillManager.Pill item={x} key={x.id} />;
232
                    })}
233
                  </PillManager.Container>
234
                  <PillManager.Expander />
235
                </PillManager.Row>
236
              );
237
            }}
238
          </PillManager>
239
        </div>
240
      </div>
241
    </>
242
  );
243
}
244

245
function SwapPivots({ onSwap }: { onSwap: () => void }) {
246
  return (
247
    <button
248
      className="bg-ln-gray-02 border-ln-border-strong text-ln-primary-50 hover:bg-ln-gray-10 z-1 @2xl:-bottom-2.5 @2xl:left-7 absolute -bottom-2 left-3 flex cursor-pointer items-center gap-1 rounded-2xl border px-1 py-0.5 text-[10px]"
249
      onClick={() => onSwap()}
250
    >
251
      <span>
252
        <svg width="12" height="11" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
253
          <path
254
            d="M13.4819 6.09082L12.0422 7.53048L10.6025 6.09082"
255
            stroke="currentcolor"
256
            strokeWidth="1.5"
257
            strokeLinecap="round"
258
            strokeLinejoin="round"
259
          />
260
          <path
261
            d="M0.749587 7.42017L2.18925 5.98051L3.62891 7.42017"
262
            stroke="currentcolor"
263
            strokeWidth="1.5"
264
            strokeLinecap="round"
265
            strokeLinejoin="round"
266
          />
267
          <path
268
            d="M12.0962 7.34067C12.1038 7.22805 12.1077 7.11441 12.1077 6.99985C12.1077 4.261 9.88744 2.04072 7.14859 2.04072C5.7388 2.04072 4.46641 2.62899 3.5635 3.57345M2.23753 6.30658C2.20584 6.53312 2.18945 6.76457 2.18945 6.99985C2.18945 9.73871 4.40973 11.959 7.14859 11.959C8.68732 11.959 10.0624 11.2582 10.972 10.1583"
269
            stroke="currentcolor"
270
            strokeWidth="1.5"
271
            strokeLinecap="round"
272
            strokeLinejoin="round"
273
          />
274
        </svg>
275
      </span>
276
      <span className="sr-only">Swap row and column pivots</span>
277
      <span className="@2xl:block hidden">SWAP</span>
278
    </button>
279
  );
280
}

Pill Manager Anatomy

The PillManager component is a headless component. Similar to LyteNyte Grid, it supports two rendering modes:

Headless Mode: PillManager exposes its component parts for full custom configuration.
Default Mode: PillManager renders using a built-in default configuration.

Headless Mode
Default Mode

1
<PillManager>
2
  {(row) => {
3
    return (
4
      <PillManager.Row row={row}>
5
        <PillManager.Label row={row} />
6
        <PillManager.Container>
7
          {row.pills.map((pill) => {
8
            return <PillManager.Pill />;
9
          })}
10
        </PillManager.Container>
11
        <PillManager.Expander />
12
      </PillManager.Row>
13
    );
14
  }}
15
</PillManager>

1
<PillManager />

Pill Row Specification

PillManager requires the rows property to be an array of PillRowSpec objects. Each PillRowSpec object is rendered as a row containing pills.

The PillRowSpec and PillItemSpec interfaces are shown below.

1
export interface PillItemSpec {
2
  /** A unique ID for an individual pill. */
3
  readonly id: string;
4
  /** Whether the pill is enabled. */
5
  readonly active: boolean;
6
  /** The display name of the pill. */
7
  readonly name?: string;
8
  /** Whether the pill can be reordered or moved to another pill row. */
9
  readonly movable?: boolean;
10
  /** Tags that other pill rows can accept. */
11
  readonly tags?: string[];
12
  /** Any data to associate with the pill item. */
13
  readonly data?: unknown;
14
  /** Whether the pill can be removed. */
15
  readonly removable?: boolean;
16
}
17

18
export interface PillRowSpec {
19
  /** A unique ID for the row. */
20
  readonly id: string;
21
  /** The list of pills contained in the row. */
22
  readonly pills: PillItemSpec[];
23
  /** External pill tags that this row accepts. */
24
  readonly accepts?: string[];
25
  /** A human-readable label for the row. */
26
  readonly label?: string;
27
  /** A preset style for the pills, or a custom string. */
28
  readonly type?: "columns" | "row-groups" | "row-pivots" | "column-pivots" | "measures" | ({} & string);
29
}

Pill Active State

Set the active property on every PillItemSpec in a PillRowSpec. The active property determines whether a pill is enabled. The semantic meaning of active is defined by your use case.

The demo below uses active to toggle column visibility, where inactive pills appear dimmed.

Pill Manager State

Columns

Symbol

Network

Exchange

Change % 24h

Perf % 1W

Perf % 1M

Perf % 3M

Perf % 6M

Perf % YTD

Volatility

Volatility 1M

demo.tsx
components.tsx


80 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import "@1771technologies/lytenyte-pro/pill-manager.css";
3
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4
import {
5
  ExchangeCell,
6
  makePerfHeaderCell,
7
  NetworkCell,
8
  PercentCell,
9
  PercentCellPositiveNegative,
10
  SymbolCell,
11
} from "./components.jsx";
12
import type { DEXPerformanceData } from "@1771technologies/grid-sample-data/dex-pairs-performance";
13
import { data } from "@1771technologies/grid-sample-data/dex-pairs-performance";
14
import { useState } from "react";
15
import { PillManager } from "@1771technologies/lytenyte-pro/components";
16

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

21
const initialColumns: Grid.Column<GridSpec>[] = [
22
  { id: "symbol", cellRenderer: SymbolCell, width: 250, name: "Symbol" },
23
  { id: "network", cellRenderer: NetworkCell, width: 220, hide: true, name: "Network" },
24
  { id: "exchange", cellRenderer: ExchangeCell, width: 220, hide: true, name: "Exchange" },
25

26
  {
27
    id: "change24h",
28
    cellRenderer: PercentCellPositiveNegative,
29
    headerRenderer: makePerfHeaderCell("Change", "24h"),
30
    name: "Change % 24h",
31
    type: "number,",
32
  },
33

34
  {
35
    id: "perf1w",
36
    cellRenderer: PercentCellPositiveNegative,
37
    headerRenderer: makePerfHeaderCell("Perf %", "1w"),
38
    name: "Perf % 1W",
39
    type: "number,",
40
  },
41
  {
42
    id: "perf1m",
43
    cellRenderer: PercentCellPositiveNegative,
44
    headerRenderer: makePerfHeaderCell("Perf %", "1m"),
45
    name: "Perf % 1M",
46
    type: "number,",
47
  },
48
  {
49
    id: "perf3m",
50
    cellRenderer: PercentCellPositiveNegative,
51
    headerRenderer: makePerfHeaderCell("Perf %", "3m"),
52
    name: "Perf % 3M",
53
    type: "number,",
54
  },
55
  {
56
    id: "perf6m",
57
    cellRenderer: PercentCellPositiveNegative,
58
    headerRenderer: makePerfHeaderCell("Perf %", "6m"),
59
    name: "Perf % 6M",
60
    type: "number,",
61
  },
62
  {
63
    id: "perfYtd",
64
    cellRenderer: PercentCellPositiveNegative,
65
    headerRenderer: makePerfHeaderCell("Perf %", "YTD"),
66
    name: "Perf % YTD",
67
    type: "number",
68
  },
69
  { id: "volatility", cellRenderer: PercentCell, name: "Volatility", type: "number" },
70
  {
71
    id: "volatility1m",
72
    cellRenderer: PercentCell,
73
    headerRenderer: makePerfHeaderCell("Volatility", "1m"),
74
    name: "Volatility 1M",
75
    type: "number",
76
  },
77
];
78

79
const base: Grid.ColumnBase<GridSpec> = { width: 80 };
80

81
export default function ColumnDemo() {
82
  const ds = useClientDataSource({ data: data });
83
  const [columns, setColumns] = useState(initialColumns);
84

85
  return (
86
    <>
87
      <div>
88
        <PillManager
89
          onPillItemActiveChange={(p) => {
90
            setColumns((prev) => {
91
              return [...prev].map((x) => {
92
                if (p.item.id === x.id) {
93
                  return { ...x, hide: !p.item.active };
94
                }
95
                return x;
96
              });
97
            });
98
          }}
99
          rows={[
100
            {
101
              id: "columns",
102
              label: "Columns",
103
              type: "columns",
104
              pills: columns.map((c) => ({
105
                id: c.id,
106
                name: c.name,
107
                active: !c.hide,
108
                data: c,
109
                movable: false,
110
                removable: false,
111
              })),
112
            },
113
          ]}
114
        />
115
      </div>
116
      <div
117
        className="ln-grid ln-cell:text-xs ln-header:text-xs ln-header:text-ln-text-xlight"
118
        style={{ height: 500 }}
119
      >
120
        <Grid columns={columns} columnBase={base} rowSource={ds} />
121
      </div>
122
    </>
123
  );
124
}

1
import type { ClassValue } from "clsx";
2
import clsx from "clsx";
3
import { twMerge } from "tailwind-merge";
4
import { exchanges, networks, symbols } from "@1771technologies/grid-sample-data/dex-pairs-performance";
5

6
export function tw(...c: ClassValue[]) {
7
  return twMerge(clsx(...c));
8
}
9
import type { Grid } from "@1771technologies/lytenyte-pro";
10
import type { GridSpec } from "./demo";
11

12
export function SymbolCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
13
  if (!api.rowIsLeaf(row) || !row.data) return null;
14

15
  const ticker = row.data.symbolTicker;
16
  const symbol = row.data.symbol;
17
  const image = symbols[row.data.symbolTicker];
18

19
  return (
20
    <div className="grid grid-cols-[20px_auto_auto] items-center gap-1.5">
21
      <div>
22
        <img
23
          src={image}
24
          alt={`Logo for symbol ${symbol}`}
25
          className="h-full w-full overflow-hidden rounded-full"
26
        />
27
      </div>
28
      <div className="bg-ln-gray-20 text-ln-text-dark flex h-fit items-center justify-center rounded-lg px-2 py-px text-[10px]">
29
        {ticker}
30
      </div>
31
      <div className="w-full overflow-hidden text-ellipsis">{symbol.split("/")[0]}</div>
32
    </div>
33
  );
34
}
35

36
export function NetworkCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
37
  if (!api.rowIsLeaf(row) || !row.data) return null;
38

39
  const name = row.data.network;
40
  const image = networks[name];
41

42
  return (
43
    <div className="grid grid-cols-[20px_1fr] items-center gap-1.5">
44
      <div>
45
        <img
46
          src={image}
47
          alt={`Logo for network ${name}`}
48
          className="h-full w-full overflow-hidden rounded-full"
49
        />
50
      </div>
51
      <div className="w-full overflow-hidden text-ellipsis">{name}</div>
52
    </div>
53
  );
54
}
55

56
export function ExchangeCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
57
  if (!api.rowIsLeaf(row) || !row.data) return null;
58

59
  const name = row.data.exchange;
60
  const image = exchanges[name];
61

62
  return (
63
    <div className="grid grid-cols-[20px_1fr] items-center gap-1.5">
64
      <div>
65
        <img
66
          src={image}
67
          alt={`Logo for exchange ${name}`}
68
          className="h-full w-full overflow-hidden rounded-full"
69
        />
70
      </div>
71
      <div className="w-full overflow-hidden text-ellipsis">{name}</div>
72
    </div>
73
  );
74
}
75

76
export function PercentCellPositiveNegative({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
77
  if (!api.rowIsLeaf(row) || !row.data) return null;
78

79
  const field = api.columnField(column, row);
80

81
  if (typeof field !== "number") return "-";
82

83
  const value = (field > 0 ? "+" : "") + (field * 100).toFixed(2) + "%";
84

85
  return (
86
    <div
87
      className={tw(
88
        "h-ful flex w-full items-center justify-end tabular-nums",
89
        field < 0 ? "text-red-600 dark:text-red-300" : "text-green-600 dark:text-green-300",
90
      )}
91
    >
92
      {value}
93
    </div>
94
  );
95
}
96

97
export function PercentCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
98
  if (!api.rowIsLeaf(row) || !row.data) return null;
99

100
  const field = api.columnField(column, row);
101

102
  if (typeof field !== "number") return "-";
103

104
  const value = (field > 0 ? "+" : "") + (field * 100).toFixed(2) + "%";
105

106
  return <div className="h-ful flex w-full items-center justify-end tabular-nums">{value}</div>;
107
}
108

109
export const makePerfHeaderCell = (name: string, subname: string) => {
110
  return (_: Grid.T.HeaderParams<GridSpec>) => {
111
    return (
112
      <div className="flex h-full w-full flex-col items-end justify-center tabular-nums">
113
        <div>{name}</div>
114
        <div className="text-ln-text-light font-mono uppercase">{subname}</div>
115
      </div>
116
    );
117
  };
118
};

When a pill’s active state changes, the PillManager calls the onPillRowChange handler. Use the provided parameters shown below to update your row state.

1
type onPillItemActiveChange = (params: {
2
  readonly index: number;
3
  readonly item: PillItemSpec;
4
  readonly row: PillRowSpec;
5
}) => void;

Set the movable property on a pill to enable reordering. By default, a pill can be reordered within its own pill row. By setting the tags property, you can indicate that a pill may also be moved to another row. For another row to accept a pill, set the accepts property on the row to include one of the tags from the pill being moved.

The demo below demonstrates pill reordering. You can drag pills between sections to activate them, or reorder pills within the same row.

Pill Manager Reordering

Column Pivots

Age Group

Gender

Country

State

Product

Category

Sub-Category

Row Pivots

Country

Age Group

Gender

State

Product

Category

Sub-Category

demo.tsx
components.tsx

1
import "@1771technologies/lytenyte-pro/pill-manager.css";
2
import "@1771technologies/lytenyte-pro/components.css";
3
import "@1771technologies/lytenyte-pro/light-dark.css";
4
import { salesData, type SaleDataItem } from "@1771technologies/grid-sample-data/sales-data";
5
import { computeField, Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
6
import {
7
  AgeGroup,
8
  CostCell,
9
  CountryCell,
10
  DateCell,
11
  GenderCell,
12
  NumberCell,
13
  ProfitCell,
14
  StickGroupHeader,
15
  style,
16
} from "./components.jsx";
17
import { sum } from "es-toolkit";
18
import { useMemo, useState } from "react";
19
import { PillManager, RowGroupCell } from "@1771technologies/lytenyte-pro/components";
20

21
export interface GridSpec {
22
  readonly data: SaleDataItem;
23
  readonly column: {
24
    pivotable?: boolean;
25
  };
26
}
27

28
export const columns: Grid.Column<GridSpec>[] = [
29
  { id: "date", name: "Date", cellRenderer: DateCell, width: 110 },
30
  { id: "age", name: "Age", type: "number", width: 80 },
31
  { id: "ageGroup", name: "Age Group", cellRenderer: AgeGroup, width: 110, pivotable: true },
32
  { id: "customerGender", name: "Gender", cellRenderer: GenderCell, width: 80, pivotable: true },
33
  { id: "country", name: "Country", cellRenderer: CountryCell, width: 150, pivotable: true },
34
  { id: "orderQuantity", name: "Quantity", type: "number", width: 60 },
35
  { id: "unitPrice", name: "Price", type: "number", width: 80, cellRenderer: NumberCell },
36
  { id: "cost", name: "Cost", width: 80, type: "number", cellRenderer: CostCell },
37
  { id: "revenue", name: "Revenue", width: 80, type: "number", cellRenderer: ProfitCell },
38
  { id: "profit", name: "Profit", width: 80, type: "number", cellRenderer: ProfitCell },
39
  { id: "state", name: "State", width: 150, pivotable: true },
40
  { id: "product", name: "Product", width: 160, pivotable: true },
41
  { id: "productCategory", name: "Category", width: 120, pivotable: true },
42
  { id: "subCategory", name: "Sub-Category", width: 160, pivotable: true },
43
];
44

45
const base: Grid.ColumnBase<GridSpec> = { width: 120, resizable: true };
46

47
const group: Grid.RowGroupColumn<GridSpec> = {
48
  cellRenderer: RowGroupCell,
49
  width: 200,
50
  pin: "start",
51
};
52

53
const aggSum: Grid.T.Aggregator<GridSpec["data"]> = (field, data) => {
54
  const values = data.map((x) => computeField<number>(field, x));
55
  return sum(values);
56
};
57

58
export default function PivotDemo() {
59
  const [colPivots, setColPivots] = useState<PillManager.T.PillItem[]>(() =>
60
    columns
61
      .filter((x) => x.pivotable)
62
      .map((x) => ({ id: x.id, name: x.name ?? x.id, active: x.id === "ageGroup" })),
63
  );
64
  const [rowPivots, setRowPivots] = useState<PillManager.T.PillItem[]>(() => {
65
    const pivotables = columns
66
      .filter((x) => x.pivotable)
67
      .map((x) => ({
68
        id: x.id,
69
        name: x.name ?? x.id,
70
        active: x.id === "country",
71
      }));
72

73
    const active = [...pivotables.filter((x) => x.active)];
74
    const notActive = [...pivotables.filter((x) => !x.active)];
75

76
    return [...active, ...notActive];
77
  });
78

79
  const ds = useClientDataSource<GridSpec>({
80
    data: salesData,
81
    pivotMode: true,
82
    pivotModel: {
83
      columns: colPivots.filter((x) => x.active),
84
      rows: rowPivots.filter((x) => x.active),
85
      measures: [
86
        {
87
          dim: { id: "profit", name: "Profit", type: "number", cellRenderer: ProfitCell, width: 120 },
88
          fn: "sum",
89
        },
90
      ],
91
    },
92
    aggregateFns: { sum: aggSum },
93
  });
94

95
  const pillRows = useMemo<PillManager.T.PillRow[]>(() => {
96
    const colPivotPills = colPivots.map((x) => {
97
      return {
98
        id: x.id,
99
        active: x.active,
100
        movable: x.active,
101
        name: x.name ?? x.id,
102
        data: x,
103
        removable: true,
104
      };
105
    });
106
    const rowPivotPills = rowPivots.map((x) => {
107
      return {
108
        id: x.id,
109
        active: x.active,
110
        movable: x.active,
111
        name: x.name ?? x.id,
112
        data: x,
113
        removable: true,
114
      };
115
    });
116
    return [
117
      {
118
        id: "column-pivots",
119
        label: "Column Pivots",
120
        type: "column-pivots",
121
        pills: colPivotPills,
122
        accepts: ["row-pivots"],
123
      },
124
      {
125
        id: "row-pivots",
126
        label: "Row Pivots",
127
        type: "row-pivots",
128
        pills: rowPivotPills,
129
        accepts: ["column-pivots"],
130
      },
131
    ];
132
  }, [colPivots, rowPivots]);
133

134
  const pivotProps = ds.usePivotProps();
135
  const [groupColumn, setGroupColumn] = useState(group);
136
  return (
137
    <>
138
      <div className="@container">
139
        <PillManager
140
          rows={pillRows}
141
          onPillItemActiveChange={(p) => {
142
            setColPivots((prev) => {
143
              const next = prev.map((x) =>
144
                x.id === p.item.id ? { ...x, active: p.item.active && p.row.id === "column-pivots" } : x,
145
              );
146
              return [...next.filter((x) => x.active), ...next.filter((x) => !x.active)];
147
            });
148
            setRowPivots((prev) => {
149
              const next = prev.map((x) =>
150
                x.id === p.item.id ? { ...x, active: p.item.active && p.row.id === "row-pivots" } : x,
151
              );
152
              return [...next.filter((x) => x.active), ...next.filter((x) => !x.active)];
153
            });
154
          }}
155
          onPillRowChange={(ev) => {
156
            for (const changed of ev.changed) {
157
              const activeFirst = changed.pills.filter((x) => x.active);
158
              const nonActive = changed.pills.filter((x) => !x.active);
159
              if (changed.id === "column-pivots") {
160
                setColPivots([...activeFirst, ...nonActive]);
161
              }
162
              if (changed.id === "row-pivots") {
163
                setRowPivots([...activeFirst, ...nonActive]);
164
              }
165
            }
166
          }}
167
        >
168
          {(row) => {
169
            return (
170
              <PillManager.Row row={row} className="relative">
171
                {row.id === "column-pivots" && (
172
                  <SwapPivots
173
                    onSwap={() => {
174
                      setColPivots(rowPivots);
175
                      setRowPivots(colPivots);
176
                    }}
177
                  />
178
                )}
179
                <PillManager.Label row={row} />
180
                <PillManager.Container>
181
                  {row.pills.map((x) => {
182
                    return <PillManager.Pill item={x} key={x.id} />;
183
                  })}
184
                </PillManager.Container>
185
                <PillManager.Expander />
186
              </PillManager.Row>
187
            );
188
          }}
189
        </PillManager>
190
      </div>
191
      <div className="ln-grid" style={{ height: 500 }}>
192
        <Grid
193
          columns={columns}
194
          rowSource={ds}
195
          columnBase={base}
196
          rowGroupColumn={groupColumn}
197
          onRowGroupColumnChange={setGroupColumn}
198
          {...pivotProps}
199
          columnGroupRenderer={StickGroupHeader}
200
          styles={style}
201
        />
202
      </div>
203
    </>
204
  );
205
}
206

207
function SwapPivots({ onSwap }: { onSwap: () => void }) {
208
  return (
209
    <button
210
      className="bg-ln-gray-02 border-ln-border-strong text-ln-primary-50 hover:bg-ln-gray-10 z-1 @2xl:-bottom-2.5 @2xl:left-7 absolute -bottom-2 left-3 flex cursor-pointer items-center gap-1 rounded-2xl border px-1 py-0.5 text-[10px]"
211
      onClick={() => onSwap()}
212
    >
213
      <span>
214
        <svg width="12" height="11" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
215
          <path
216
            d="M13.4819 6.09082L12.0422 7.53048L10.6025 6.09082"
217
            stroke="currentcolor"
218
            strokeWidth="1.5"
219
            strokeLinecap="round"
220
            strokeLinejoin="round"
221
          />
222
          <path
223
            d="M0.749587 7.42017L2.18925 5.98051L3.62891 7.42017"
224
            stroke="currentcolor"
225
            strokeWidth="1.5"
226
            strokeLinecap="round"
227
            strokeLinejoin="round"
228
          />
229
          <path
230
            d="M12.0962 7.34067C12.1038 7.22805 12.1077 7.11441 12.1077 6.99985C12.1077 4.261 9.88744 2.04072 7.14859 2.04072C5.7388 2.04072 4.46641 2.62899 3.5635 3.57345M2.23753 6.30658C2.20584 6.53312 2.18945 6.76457 2.18945 6.99985C2.18945 9.73871 4.40973 11.959 7.14859 11.959C8.68732 11.959 10.0624 11.2582 10.972 10.1583"
231
            stroke="currentcolor"
232
            strokeWidth="1.5"
233
            strokeLinecap="round"
234
            strokeLinejoin="round"
235
          />
236
        </svg>
237
      </span>
238
      <span className="sr-only">Swap row and column pivots</span>
239
      <span className="@2xl:block hidden">SWAP</span>
240
    </button>
241
  );
242
}

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

8
// Need to set header group overflow to unset to allow sticky header labels.
9
export const style: Grid.Style = { headerGroup: { style: { overflow: "unset" } } };
10
export function StickGroupHeader(props: Grid.T.HeaderGroupParams<GridSpec>) {
11
  return (
12
    <div style={{ position: "sticky", insetInlineStart: "calc(var(--ln-start-offset) + 8px)" }}>
13
      {props.groupPath.at(-1)}
14
    </div>
15
  );
16
}
17

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

21
  if (typeof field !== "string") return "-";
22

23
  const dateField = parse(field as string, "MM/dd/yyyy", new Date());
24

25
  if (!isValid(dateField)) return "-";
26

27
  const niceDate = format(dateField, "yyyy MMM dd");
28
  return <div className="flex h-full w-full items-center tabular-nums">{niceDate}</div>;
29
}
30

31
export function AgeGroupPivotHeader({ column }: Grid.T.HeaderParams<GridSpec>) {
32
  const field = column.name ?? column.id;
33

34
  if (field === "Under 25") return <div className="text-[#944cec] dark:text-[#B181EB]">Under 25</div>;
35
  if (field === "25-34") return <div className="text-[#aa6c1a] dark:text-[#E5B474]">25-34</div>;
36
  if (field === "35-64") return <div className="text-[#0f7d4c] dark:text-[#52B086]">35-64</div>;
37

38
  if (field === "Grand Total") return "Grand Total";
39

40
  return "Other";
41
}
42

43
export function AgeGroup({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
44
  const field = api.columnField(column, row);
45

46
  if (field === "Under 25") return <div className="text-[#944cec] dark:text-[#B181EB]">Under 25</div>;
47
  if (field === "25-34") return <div className="text-[#aa6c1a] dark:text-[#E5B474]">25-34</div>;
48
  if (field === "35-64") return <div className="text-[#0f7d4c] dark:text-[#52B086]">35-64</div>;
49

50
  return "-";
51
}
52

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

56
  if (field === "M")
57
    return (
58
      <div className="flex h-full w-full items-center gap-2">
59
        <div className="flex size-6 items-center justify-center rounded-full bg-blue-500/50">
60
          <span className="iconify ph--gender-male-bold size-4" />
61
        </div>
62
        M
63
      </div>
64
    );
65

66
  if (field === "F")
67
    return (
68
      <div className="flex h-full w-full items-center gap-2">
69
        <div className="flex size-6 items-center justify-center rounded-full bg-pink-500/50">
70
          <span className="iconify ph--gender-female-bold size-4" />
71
        </div>
72
        F
73
      </div>
74
    );
75

76
  return "-";
77
}
78

79
function tw(...c: ClassValue[]) {
80
  return twMerge(clsx(...c));
81
}
82

83
const formatter = new Intl.NumberFormat("en-US", {
84
  maximumFractionDigits: 2,
85
  minimumFractionDigits: 0,
86
});
87
export function ProfitCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
88
  const field = api.columnField(column, row);
89

90
  if (typeof field !== "number") return "-";
91

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

94
  return (
95
    <div
96
      className={tw(
97
        "flex h-full w-full items-center justify-end tabular-nums",
98
        field < 0 && "text-red-600 dark:text-red-300",
99
        field > 0 && "text-green-600 dark:text-green-300",
100
      )}
101
    >
102
      {formatted}
103
    </div>
104
  );
105
}
106

107
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
108
  const field = api.columnField(column, row);
109

110
  if (typeof field !== "number") return "-";
111

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

114
  return <div className={"flex h-full w-full items-center justify-end tabular-nums"}>{formatted}</div>;
115
}
116

117
export function CostCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
118
  const field = api.columnField(column, row);
119

120
  if (typeof field !== "number") return "-";
121

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

124
  return (
125
    <div
126
      className={tw(
127
        "flex h-full w-full items-center justify-end tabular-nums text-red-600 dark:text-red-300",
128
      )}
129
    >
130
      {formatted}
131
    </div>
132
  );
133
}
134

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

138
  const flag = countryFlags[field as keyof typeof countryFlags];
139
  if (!flag) return "-";
140

141
  return (
142
    <div className="flex h-full w-full items-center gap-2">
143
      <img className="size-4" src={flag} alt={`country flag of ${field}`} />
144
      <span>{String(field ?? "-")}</span>
145
    </div>
146
  );
147
}

When pills are reordered, the PillManager calls the onPillRowChange event handler. The handler type is shown below.

The changed property contains the PillRowSpec objects that were updated.
The full property contains all PillRowSpec objects, with their pills updated to reflect the completed move.

1
type onPillRowChange = (params: { readonly changed: PillRowSpec[]; readonly full: PillRowSpec[] }) => void;

Pill Parts

All parts are rendered using a render prop provided to the PillManager. The render prop is optional. If you do not provide it, the PillManager uses a default implementation.

Pill Row

The PillManager.Row component is a container for an individual pill row. Each PillRowSpec provided to the PillManager results in a rendered pill row. The PillManager.Row component requires a PillRowSpec.

1
<PillManager>
2
  {(row) => {
3
    return <PillManager.Row row={row} />;
4
  }}
5
</PillManager>

Pill Label

The PillManager.Label component renders the label for each pill row. If you do not provide a label, PillManager renders a default PillManager.Label based on the pill row’s type.

1
<PillManager>
2
  {(row) => {
3
    return (
4
      <PillManager.Row row={row}>
5
        <PillManager.Label row={row} />
6
      </PillManager.Row>
7
    );
8
  }}
9
</PillManager>

Pill Container

The PillManager.Container component renders all pills for a given row. It also acts as the drop zone for external pills. All PillManager.Pill components must be rendered inside a PillManager.Container.

1
<PillManager>
2
  {(row) => {
3
    return (
4
      <PillManager.Row row={row}>
5
        <PillManager.Label row={row} />
6
        <PillManager.Container />
7
      </PillManager.Row>
8
    );
9
  }}
10
</PillManager>

Pill

The PillManager.Pill component renders a single pill. A pill is the primary interaction element of the PillManager. You must render each PillManager.Pill inside a PillManager.Container.

1
<PillManager>
2
  {(row) => {
3
    return (
4
      <PillManager.Row row={row}>
5
        <PillManager.Label row={row} />
6
        <PillManager.Container>
7
          {row.pills.map((pill) => (
8
            <PillManager.Pill key={pill.id} item={pill} />
9
          ))}
10
        </PillManager.Container>
11
      </PillManager.Row>
12
    );
13
  }}
14
</PillManager>

Pill Expander

The PillManager.Expander toggles the display mode of a pill row between a scrollable view and a wrapped view. When expanded, all pills in the row are visible.

1
<PillManager>
2
  {(row) => {
3
    return (
4
      <PillManager.Row row={row}>
5
        <PillManager.Label row={row} />
6
        <PillManager.Container>
7
          {row.pills.map((pill) => (
8
            <PillManager.Pill key={pill.id} item={pill} />
9
          ))}
10
        </PillManager.Container>
11
        <PillManager.Expander />
12
      </PillManager.Row>
13
    );
14
  }}
15
</PillManager>

Vertical Pills

Set the orientation property on the PillManager to “vertical” to orient pills vertically. The demo below demonstrates this configuration. Since the PillManager is headless, you must apply the appropriate styles when rendering a vertical layout.

Vertical Pill

Column Pivots

Age Group

Gender

Country

State

Product

Category

Sub-Category

Row Pivots

Country

Age Group

Gender

State

Product

Category

Sub-Category

Measures

Profit

Quantity

Price

Cost

Revenue

demo.tsx

1
import "@1771technologies/lytenyte-pro/pill-manager.css";
2
import "@1771technologies/lytenyte-pro/components.css";
3
import "@1771technologies/lytenyte-pro/light-dark.css";
4
import { type SaleDataItem } from "@1771technologies/grid-sample-data/sales-data";
5
import type { Grid } from "@1771technologies/lytenyte-pro";
6
import { Menu, PillManager } from "@1771technologies/lytenyte-pro/components";
7
import { useMemo, useState } from "react";
8

9
export interface GridSpec {
10
  readonly data: SaleDataItem;
11
  readonly column: {
12
    pivotable?: boolean;
13
    measurable?: boolean;
14
    measure?: string;
15
  };
16
}
17

18
export const columns: Grid.Column<GridSpec>[] = [
19
  { id: "date", name: "Date" },
20
  { id: "age", name: "Age", type: "number" },
21
  { id: "ageGroup", name: "Age Group", pivotable: true },
22
  { id: "customerGender", name: "Gender", pivotable: true },
23
  { id: "country", name: "Country", pivotable: true },
24

25
  { id: "profit", name: "Profit", type: "number", measurable: true },
26
  { id: "orderQuantity", name: "Quantity", type: "number", measurable: true },
27
  { id: "unitPrice", name: "Price", type: "number", measurable: true },
28
  { id: "cost", name: "Cost", type: "number", measurable: true },
29
  { id: "revenue", name: "Revenue", type: "number", measurable: true },
30

31
  { id: "state", name: "State", pivotable: true },
32
  { id: "product", name: "Product", pivotable: true },
33
  { id: "productCategory", name: "Category", pivotable: true },
34
  { id: "subCategory", name: "Sub-Category", pivotable: true },
35
];
36

37
export default function ComponentDemo() {
38
  const [measures, setMeasures] = useState<PillManager.T.PillItem[]>(() => {
39
    return columns
40
      .filter((x) => x.measurable)
41
      .map<PillManager.T.PillItem>((x) => ({
42
        id: x.id,
43
        active: x.id === "profit",
44
        movable: true,
45
        name: x.name,
46
      }));
47
  });
48

49
  const [colPivots, setColPivots] = useState<PillManager.T.PillItem[]>(() =>
50
    columns
51
      .filter((x) => x.pivotable)
52
      .map((x) => ({ id: x.id, name: x.name ?? x.id, active: x.id === "ageGroup" })),
53
  );
54
  const [rowPivots, setRowPivots] = useState<PillManager.T.PillItem[]>(() => {
55
    const pivotables = columns
56
      .filter((x) => x.pivotable)
57
      .map((x) => ({
58
        id: x.id,
59
        name: x.name ?? x.id,
60
        active: x.id === "country",
61
      }));
62

63
    const active = [...pivotables.filter((x) => x.active)];
64
    const notActive = [...pivotables.filter((x) => !x.active)];
65

66
    return [...active, ...notActive];
67
  });
68

69
  const pillRows = useMemo<PillManager.T.PillRow[]>(() => {
70
    const colPivotPills = colPivots.map((x) => {
71
      return {
72
        id: x.id,
73
        active: x.active,
74
        movable: x.active,
75
        name: x.name ?? x.id,
76
        data: x,
77
        removable: true,
78
      };
79
    });
80
    const rowPivotPills = rowPivots.map((x) => {
81
      return {
82
        id: x.id,
83
        active: x.active,
84
        movable: x.active,
85
        name: x.name ?? x.id,
86
        data: x,
87
        removable: true,
88
      };
89
    });
90
    const measurePills = measures.map((x) => {
91
      return {
92
        id: x.id,
93
        active: x.active,
94
        name: x.name ?? x.id,
95
        data: x.data,
96
        removable: true,
97
      };
98
    });
99

100
    return [
101
      {
102
        id: "column-pivots",
103
        label: "Column Pivots",
104
        type: "column-pivots",
105
        pills: colPivotPills,
106
        accepts: ["row-pivots"],
107
      },
108
      {
109
        id: "row-pivots",
110
        label: "Row Pivots",
111
        type: "row-pivots",
112
        pills: rowPivotPills,
113
        accepts: ["column-pivots"],
114
      },
115
      {
116
        id: "measures",
117
        label: "Measures",
118
        type: "measures",
119
        pills: measurePills,
120
      },
121
    ];
122
  }, [colPivots, measures, rowPivots]);
123

124
  return (
125
    <>
126
      <div className="@container" style={{ display: "flex", alignItems: "center" }}>
127
        <div className="w-full px-8 py-8">
128
          <PillManager
129
            className="justify-between gap-2"
130
            orientation="vertical"
131
            rows={pillRows}
132
            onPillItemActiveChange={(p) => {
133
              setColPivots((prev) => {
134
                const next = prev.map((x) =>
135
                  x.id === p.item.id ? { ...x, active: p.item.active && p.row.id === "column-pivots" } : x,
136
                );
137
                return [...next.filter((x) => x.active), ...next.filter((x) => !x.active)];
138
              });
139
              setRowPivots((prev) => {
140
                const next = prev.map((x) =>
141
                  x.id === p.item.id ? { ...x, active: p.item.active && p.row.id === "row-pivots" } : x,
142
                );
143
                return [...next.filter((x) => x.active), ...next.filter((x) => !x.active)];
144
              });
145
              setMeasures((prev) => {
146
                const next = prev.map((x) =>
147
                  x.id === p.item.id ? { ...x, active: p.item.active && p.row.id === "measures" } : x,
148
                );
149
                return [...next.filter((x) => x.active), ...next.filter((x) => !x.active)];
150
              });
151
            }}
152
            onPillRowChange={(ev) => {
153
              for (const changed of ev.changed) {
154
                const activeFirst = changed.pills.filter((x) => x.active);
155
                const nonActive = changed.pills.filter((x) => !x.active);
156
                if (changed.id === "column-pivots") {
157
                  setColPivots([...activeFirst, ...nonActive]);
158
                }
159
                if (changed.id === "row-pivots") {
160
                  setRowPivots([...activeFirst, ...nonActive]);
161
                }
162
                if (changed.id === "measures") {
163
                  setMeasures([...activeFirst, ...nonActive]);
164
                }
165
              }
166
            }}
167
          >
168
            {(row) => {
169
              return (
170
                <PillManager.Row row={row} className="min-w-50 relative flex-1">
171
                  <PillManager.Label row={row} />
172
                  <PillManager.Container>
173
                    {row.pills.map((x) => {
174
                      if (row.id === "measures") {
175
                        return (
176
                          <PillManager.Pill
177
                            item={x}
178
                            key={x.id}
179
                            elementEnd={
180
                              x.active ? (
181
                                <div className="text-ln-primary-50 ms-1">
182
                                  <Menu>
183
                                    <Menu.Trigger
184
                                      onClick={(e) => e.stopPropagation()}
185
                                      className="text-ln-primary-50 hover:bg-ln-primary-30 cursor-pointer rounded-lg px-0.5 py-0.5 text-[10px]"
186
                                    >
187
                                      ({(x.data as string) ?? "sum"})
188
                                    </Menu.Trigger>
189
                                    <Menu.Popover>
190
                                      <Menu.Container>
191
                                        <Menu.Arrow />
192

193
                                        {["sum", "avg", "max", "min", "last", "first", "count"].map((agg) => {
194
                                          return (
195
                                            <Menu.Item
196
                                              key={agg}
197
                                              onAction={() => {
198
                                                setMeasures((prev) => {
199
                                                  const next = [...prev];
200
                                                  const nexIndex = prev.findIndex((m) => m.id === x.id);
201
                                                  if (nexIndex === -1) return prev;
202

203
                                                  next[nexIndex] = {
204
                                                    ...next[nexIndex],
205
                                                    data: agg.toLowerCase(),
206
                                                  };
207
                                                  return next;
208
                                                });
209
                                              }}
210
                                            >
211
                                              {agg}
212
                                            </Menu.Item>
213
                                          );
214
                                        })}
215
                                      </Menu.Container>
216
                                    </Menu.Popover>
217
                                  </Menu>
218
                                </div>
219
                              ) : null
220
                            }
221
                          />
222
                        );
223
                      }
224

225
                      return <PillManager.Pill item={x} key={x.id} />;
226
                    })}
227
                  </PillManager.Container>
228
                </PillManager.Row>
229
              );
230
            }}
231
          </PillManager>
232
        </div>
233
      </div>
234
    </>
235
  );
236
}

Pill Manager Styling

PillManager is unstyled by default. Import the prebuilt LyteNyte Grid styles to align PillManager with the rest of the grid. These styles also provide pill theming for each PillRowSpec type.

1
import "@1771technologies/lytenyte-pro/pill-manager.css";

Tree View: Render and interact with hierarchical data using the Tree View component.
Smart Select: Streamline data selection using a versatile combobox or select element.
Row Group Cell: Handle expansion and collapse interactions for grouped rows.

Pill Manager

Pill Manager Component

Pill Manager Anatomy

Pill Row Specification

Pill Active State

Pill Manager State

Pill Reordering

Pill Manager Reordering

Pill Parts

Pill Row

Pill Label

Pill Container

Pill

Pill Expander

Vertical Pills

Vertical Pill

Pill Manager Styling

Pill Manager Properties

PillManager

PillManager.Row

PillManager.Label

PillManager.Pill

PillManager.Expander

Next Steps

On this page