Columns

Column Spanning

With LyteNyte Grid, cells can span multiple columns. When a cell spans, it extends into adjacent columns, and the grid skips rendering any cells it covers.

The colSpan property on a column definition controls how many columns a cell spans. It accepts either a number or a function.

Provide a number to apply the same span to all rows.
Provide a function that returns a number to vary the span per row.

Cells always span toward the end of the viewport. A spanning cell covers the next column, not the previous one.

Uniform Column Spans

When colSpan is a number, every cell in the column spans the same number of adjacent columns for all rows. The grid skips rendering any cells covered by the span. The demo below shows the USD Price column spanning over the adjacent GBP Price column.


17 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import { stockData } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import {
5
  AnalystRatingCell,
6
  PercentCell,
7
  CurrencyCell,
8
  SymbolCell,
9
  CompactNumberCell,
10
  PriceCell,
11
} from "./components.js";
12

13
type StockData = (typeof stockData)[number];
14

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

19
const columns: Grid.Column<GridSpec>[] = [
20
  { field: 0, id: "symbol", name: "Symbol", cellRenderer: SymbolCell, width: 220 },
21
  { field: 2, id: "analyst-rating", name: "Analyst Rating", cellRenderer: AnalystRatingCell, width: 130 },
22
  {
23
    field: 3,
24
    id: "price",
25
    name: "USD Price",
26
    type: "number",
27
    cellRenderer: PriceCell,
28
    width: 110,
29
    colSpan: 2,
30
  },
31
  { id: "price-gbp", name: "GBP Price", type: "number", width: 110 },
32
  { field: 5, id: "change", name: "Change", type: "number", cellRenderer: PercentCell, width: 130 },
33
  { field: 11, id: "eps", name: "EPS", type: "number", cellRenderer: CurrencyCell, width: 130 },
34
  { field: 6, id: "volume", name: "Volume", type: "number", cellRenderer: CompactNumberCell, width: 130 },
35
];
36

37
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1 };
38

39
export default function ColumnDemo() {
40
  const ds = useClientDataSource({ data: stockData });
41

42
  return (
43
    <div className="ln-grid ln-cell:text-xs ln-cell:font-light ln-header:text-xs" style={{ height: 500 }}>
44
      <Grid columns={columns} columnBase={base} rowSource={ds} />
45
    </div>
46
  );
47
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import { memo, type ReactNode } from "react";
3
import { logos } from "@1771technologies/grid-sample-data/stock-data-smaller";
4
import type { ClassValue } from "clsx";
5
import clsx from "clsx";
6
import { twMerge } from "tailwind-merge";
7
import type { GridSpec } from "./demo";
8

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

13
function AnalystRatingCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
14
  const field = api.columnField(column, row) as string;
15

16
  let Icon: (() => ReactNode) | null = null;
17
  const label = field || "-";
18
  let clx = "";
19
  if (label === "Strong buy") {
20
    Icon = StrongBuy;
21
    clx = "text-green-500";
22
  } else if (label === "Strong Sell") {
23
    Icon = StrongSell;
24
    clx = "text-red-500";
25
  } else if (label === "Neutral") {
26
    Icon = Minus;
27
  } else if (label === "Buy") {
28
    Icon = Buy;
29
    clx = "text-green-500";
30
  } else if (label === "Sell") {
31
    Icon = Sell;
32
    clx = "text-red-500";
33
  }
34

35
  return (
36
    <div className={tw("grid h-full grid-cols-[16px_1fr] items-center gap-4 text-nowrap", clx)}>
37
      {Icon && <Icon />}
38
      <div>{label}</div>
39
    </div>
40
  );
41
}
42

43
function Minus() {
44
  return (
45
    <svg
46
      xmlns="http://www.w3.org/2000/svg"
47
      fill="none"
48
      viewBox="0 0 24 24"
49
      strokeWidth={1.5}
50
      stroke="currentColor"
51
      width={16}
52
    >
53
      <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
54
    </svg>
55
  );
56
}
57

58
function Sell() {
59
  return (
60
    <svg
61
      xmlns="http://www.w3.org/2000/svg"
62
      fill="none"
63
      viewBox="0 0 24 24"
64
      strokeWidth={1.5}
65
      stroke="currentColor"
66
      width={16}
67
    >
68
      <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
69
    </svg>
70
  );
71
}
72

73
function Buy() {
74
  return (
75
    <svg
76
      xmlns="http://www.w3.org/2000/svg"
77
      fill="none"
78
      viewBox="0 0 24 24"
79
      strokeWidth={1.5}
80
      stroke="currentColor"
81
      width={16}
82
    >
83
      <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
84
    </svg>
85
  );
86
}
87

88
function StrongSell() {
89
  return (
90
    <svg
91
      xmlns="http://www.w3.org/2000/svg"
92
      fill="none"
93
      viewBox="0 0 24 24"
94
      strokeWidth={1.5}
95
      stroke="currentColor"
96
      width={16}
97
    >
98
      <path
99
        strokeLinecap="round"
100
        strokeLinejoin="round"
101
        d="m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5"
102
      />
103
    </svg>
104
  );
105
}
106

107
function StrongBuy() {
108
  return (
109
    <svg
110
      xmlns="http://www.w3.org/2000/svg"
111
      fill="none"
112
      viewBox="0 0 24 24"
113
      strokeWidth={1.5}
114
      stroke="currentColor"
115
      width={16}
116
    >
117
      <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 18.75 7.5-7.5 7.5 7.5" />
118
      <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 7.5-7.5 7.5 7.5" />
119
    </svg>
120
  );
121
}
122

123
export const AnalystRatingCell = memo(AnalystRatingCellImpl);
124

125
function CompactNumberCellImpl({ row, api, column }: Grid.T.CellRendererParams<GridSpec>) {
126
  const field = api.columnField(column, row);
127
  const [label, suffix] = typeof field === "number" ? formatCompactNumber(field) : ["-", ""];
128

129
  return (
130
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
131
      <span>{label}</span>
132
      <span className="font-semibold">{suffix}</span>
133
    </div>
134
  );
135
}
136

137
function PriceCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
138
  const field = api.columnField(column, row);
139

140
  const label = typeof field === "number" ? formatter.format(field) : "-";
141
  const labelGBP = typeof field === "number" ? formatter.format(field * 1.36) : "-";
142

143
  return (
144
    <div className="flex h-full w-full items-center justify-end gap-1 text-nowrap tabular-nums">
145
      <div className="flex items-baseline gap-1">
146
        <span>{label}</span>
147
        <span className="text-[9px]">USD</span>
148
      </div>
149
      <span>/</span>
150
      <div className="flex items-baseline gap-1">
151
        <span>{labelGBP}</span>
152
        <span className="text-[9px]">GBP</span>
153
        @1.36
154
      </div>
155
    </div>
156
  );
157
}
158

159
export const PriceCell = memo(PriceCellImpl);
160

161
export const CompactNumberCell = memo(CompactNumberCellImpl);
162
function formatCompactNumber(n: number) {
163
  const suffixes = ["", "K", "M", "B", "T"];
164
  let magnitude = 0;
165
  let num = Math.abs(n);
166

167
  while (num >= 1000 && magnitude < suffixes.length - 1) {
168
    num /= 1000;
169
    magnitude++;
170
  }
171

172
  const decimals = 2;
173
  const formatted = num.toFixed(decimals);
174

175
  return [`${n < 0 ? "-" : ""}${formatted}`, suffixes[magnitude]];
176
}
177

178
const formatter = new Intl.NumberFormat("en-US", {
179
  minimumFractionDigits: 2,
180
  maximumFractionDigits: 2,
181
});
182

183
function CurrencyCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
184
  const field = api.columnField(column, row);
185

186
  const label = typeof field === "number" ? formatter.format(field) : "-";
187

188
  return (
189
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
190
      <div className="flex items-baseline gap-1">
191
        <span>{label}</span>
192
        <span className="text-[9px]">USD</span>
193
      </div>
194
    </div>
195
  );
196
}
197

198
export const CurrencyCell = memo(CurrencyCellImpl);
199

200
function CurrencyCellGBPImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
201
  const field = api.columnField(column, row);
202

203
  const label = typeof field === "number" ? formatter.format(field) : "-";
204

205
  return (
206
    <div className="flex h-full w-full items-center justify-end text-nowrap tabular-nums">
207
      <div className="flex items-baseline gap-1">
208
        <span>{label}</span>
209
        <span className="text-[9px]">GBP</span>
210
      </div>
211
    </div>
212
  );
213
}
214

215
export const CurrencyCellGBP = memo(CurrencyCellGBPImpl);
216

217
function PercentCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
218
  const field = api.columnField(column, row) as number;
219

220
  const label = typeof field === "number" ? formatter.format(field) + "%" : "-";
221

222
  return (
223
    <div className={tw("flex h-full w-full items-center justify-end text-nowrap tabular-nums")}>{label}</div>
224
  );
225
}
226

227
export const PercentCell = memo(PercentCellImpl);
228

229
function SymbolCellImpl({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
230
  if (!api.rowIsLeaf(row)) return null;
231

232
  const symbol = api.columnField(column, row) as string;
233
  const desc = row.data?.[1];
234

235
  return (
236
    <div className="grid h-full w-full grid-cols-[32px_1fr] items-center gap-3 overflow-hidden text-nowrap">
237
      <div className="flex h-8 min-h-8 w-8 min-w-8 items-center justify-center overflow-hidden rounded-full">
238
        <img
239
          src={logos[symbol]}
240
          alt=""
241
          width={26}
242
          height={26}
243
          className="h-6.5 min-h-6.5 w-6.5 pointer-events-none min-w-[26] rounded-full bg-black p-1"
244
        />
245
      </div>
246
      <div className="overflow-hidden text-ellipsis">{desc}</div>
247
    </div>
248
  );
249
}
250
export const SymbolCell = memo(SymbolCellImpl);

Uniform spans are uncommon and mainly appear in cases where the visual layout differs from the logical column structure. Hence, these types of column spans are used sparingly.

1
const columns: Grid.Column<GridSpec>[] = [
2
  // other columns,
3
  { field: 3, id: "price", type: "number", colSpan: 2 },
4
];

Function Column Spans

You can set colSpan to a function that returns the span for each row. This allows dynamic spans based on row data. The demo below merges cells for rows whose temperature values differ by less than 3.

Function Column Span

demo.tsx


4 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import type { MonthlyTemperature } from "@1771technologies/grid-sample-data/temperatures";
4
import { data } from "@1771technologies/grid-sample-data/temperatures";
5

6
interface GridSpec {
7
  data: MonthlyTemperature;
8
}
9

10
const ordering: (keyof MonthlyTemperature["temps"])[] = [
11
  "Jan",
12
  "Feb",
13
  "Mar",
14
  "Apr",
15
  "May",
16
  "Jun",
17
  "Jul",
18
  "Aug",
19
  "Sep",
20
  "Oct",
21
  "Nov",
22
  "Dec",
23
];
24

25
function joinSimilarTemps(x: Grid.T.CellParamsWithIndex<GridSpec>) {
26
  if (x.row.kind !== "leaf" || !x.row.data) return 1;
27
  const temps = x.row.data.temps;
28
  const myOrder = ordering[x.colIndex - 1];
29
  const value = temps[myOrder];
30

31
  let count = 1;
32
  let i = x.colIndex; // index is already offset by 1 due to the year column
33
  while (true) {
34
    const next = ordering[i];
35

36
    if (!next) break;
37

38
    const nextValue = temps[next];
39
    if (myOrder === "Jul") console.log(next);
40
    if (Math.abs(nextValue - value) < 3) {
41
      count++;
42
      i++;
43
    } else {
44
      break;
45
    }
46
  }
47

48
  return count;
49
}
50

51
const columns: Grid.Column<GridSpec>[] = [
52
  { id: "year", name: "Year", cellRenderer: YearCell, width: 100 },
53
  { id: "Jan", colSpan: joinSimilarTemps },
54
  { id: "Feb", colSpan: joinSimilarTemps },
55
  { id: "Mar", colSpan: joinSimilarTemps },
56
  { id: "Apr", colSpan: joinSimilarTemps },
57
  { id: "May", colSpan: joinSimilarTemps },
58
  { id: "Jun", colSpan: joinSimilarTemps },
59
  { id: "Jul", colSpan: joinSimilarTemps },
60
  { id: "Aug", colSpan: joinSimilarTemps },
61
  { id: "Sep", colSpan: joinSimilarTemps },
62
  { id: "Oct", colSpan: joinSimilarTemps },
63
  { id: "Nov", colSpan: joinSimilarTemps },
64
  { id: "Dec", colSpan: joinSimilarTemps },
65
];
66

67
const base: Grid.ColumnBase<GridSpec> = {
68
  widthMin: 30,
69
  widthMax: 50,
70
  widthFlex: 1,
71
  cellRenderer: HeatMapCell,
72
};
73

74
export default function ColumnDemo() {
75
  const ds = useClientDataSource({ data: data });
76

77
  return (
78
    <div
79
      className="ln-grid ln-cell:tabular-nums ln-header:tabular-nums ln-cell:px-0 ln-row-hover:bg-ln-primary-50/10 ln-cell:border-e ln-cell:border-ln-border-strong ln-header:justify-center"
80
      style={{ height: 500 }}
81
    >
82
      <Grid columnBase={base} rowSource={ds} columns={columns} />
83
    </div>
84
  );
85
}
37 collapsed lines
86

87
export function HeatMapCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
88
  if (!api.rowIsLeaf(row) || !row.data) return null;
89

90
  const value = row.data.temps[column.id as keyof MonthlyTemperature["temps"]];
91

92
  const bg = valueToColor(value);
93

94
  return (
95
    <div
96
      style={{ background: bg }}
97
      className="flex h-full w-full items-center justify-center text-white group-hover:opacity-70"
98
    >
99
      {value.toFixed(1)}°C
100
    </div>
101
  );
102
}
103

104
export function YearCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
105
  const field = api.columnField(column, row);
106

107
  return <div className="flex h-full w-full items-center justify-center">{String(field)}</div>;
108
}
109

110
/**
111
 * Interpolate between two HSL colors based on value in [0, 30].
112
 * 0  -> hsl(173.4 80.4% 40%)
113
 * 30 -> hsl(0 84.2% 60.2%)
114
 */
115
export function valueToColor(value: number): string {
116
  const percentage = Math.min((value / 19) * 100, 100);
117

118
  const start = "174.7 83.9% 31.6%";
119
  const end = "178.6 84.3% 10%";
120

121
  return `color-mix(in hsl, hsl(${start}) ${100 - percentage}%, hsl(${end}) ${percentage}%)`;
122
}

The colSpan function below shows how flexible span logic can be:

1
function joinSimilarTemps(x: Grid.T.CellParamsWithIndex<GridSpec>) {
2
  if (x.row.kind !== "leaf" || !x.row.data) return 1;
3
  const temps = x.row.data.temps;
4
  const myOrder = ordering[x.colIndex - 1];
5
  const value = temps[myOrder];
6

7
  let count = 1;
8
  let i = x.colIndex; // index is already offset by 1 due to the year column
9
  while (true) {
10
    const next = ordering[i];
11

12
    if (!next) break;
13

14
    const nextValue = temps[next];
15
    if (myOrder === "Jul") console.log(next);
16
    if (Math.abs(nextValue - value) < 3) {
17
      count++;
18
      i++;
19
    } else {
20
      break;
21
    }
22
  }
23

24
  return count;
25
}

Next Steps

Column Base: Learn how to specify default configuration options for columns.
Column Resizing: Change column widths programmatically or via user interaction.
Column ID & Name: Define user-friendly column names and ensure unique IDs.
Column Field: Control how a column retrieves its value for each cell.