Rows

Row Full Width

Create full width rows in LyteNyte Grid that render a single cell spanning the entire viewport.

Full Width Row Predicate

Use rowFullWidthPredicate property on the grid to determine whether a row renders as a full width row. A full width row spans the entire viewport and replaces the standard row that would otherwise render in the same position.

Full width rows always span the viewport and remain visible during horizontal scrolling. Use them for section headers, summary rows, or other specialized content within the grid.

In the demo below, full width rows group data by the exchange on which each crypto symbol trades. This pattern is a common use case for full width rows.


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

15
const data = Object.values(
16
  Object.groupBy(rawData, (x) => {
17
    return x.exchange;
18
  }),
19
).flatMap((x) => {
20
  return [{ exchange: x![0].exchange, fullWidth: true }, ...x!];
21
}) as DEXPerformanceData[];
22

23
export interface GridSpec {
24
  readonly data: DEXPerformanceData & { fullWidth?: boolean };
25
}
26

27
const columns: Grid.Column<GridSpec>[] = [
28
  { id: "symbol", cellRenderer: SymbolCell, width: 250, name: "Symbol" },
29
  { id: "network", cellRenderer: NetworkCell, width: 220, hide: true, name: "Network" },
30
  { id: "exchange", cellRenderer: ExchangeCell, width: 220, hide: true, name: "Exchange" },
31

32
  {
33
    id: "change24h",
34
    cellRenderer: PercentCellPositiveNegative,
35
    headerRenderer: makePerfHeaderCell("Change", "24h"),
36
    name: "Change % 24h",
37
    type: "number,",
38
  },
39

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

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

87
const fullWidthPredicate: Grid.Props<GridSpec>["rowFullWidthPredicate"] = (p) =>
88
  p.api.rowIsLeaf(p.row) && !!p.row.data.fullWidth;
89

90
export default function RowDemo() {
91
  const ds = useClientDataSource({ data: data });
92
  return (
93
    <div
94
      className="ln-grid ln-cell:text-xs ln-header:text-xs ln-header:text-ln-text-xlight"
95
      style={{ height: 500 }}
96
    >
97
      <Grid
98
        columns={columns}
99
        columnBase={base}
100
        rowSource={ds}
101
        rowFullWidthPredicate={fullWidthPredicate}
102
        rowFullWidthRenderer={FullWidthCell}
103
      />
104
    </div>
105
  );
106
}
107

108
function FullWidthCell({ api, row, rowIndex }: Grid.T.RowFullWidthRendererParams<GridSpec>) {
109
  if (!api.rowIsLeaf(row) || !row.data) return null;
110

111
  const name = row.data.exchange;
112
  const image = exchanges[name];
113

114
  return (
115
    <div
116
      className={tw(
117
        "bg-ln-gray-05 flex h-full w-full items-center justify-center gap-1.5 text-xs",
118
        rowIndex === 0 && "border-ln-border border-b",
119
        rowIndex !== 0 && "border-ln-border border-y",
120
      )}
121
    >
122
      <div>
123
        <img src={image} alt={`Logo for exchange ${name}`} className="size-5 overflow-hidden rounded-full" />
124
      </div>
125
      <div className="overflow-hidden text-ellipsis">{name}</div>
126
    </div>
127
  );
128
}

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

The demo uses rowFullWidthRenderer to provide a React component for rendering full width rows. This renderer can return any React component. In the demo, the component renders the exchange name and logo centered within the row, as shown below.

1
function FullWidthCell({ api, row }: Grid.T.RowFullWidthRendererParams<GridSpec>) {
2
  if (!api.rowIsLeaf(row) || !row.data) return null;
3

4
  const name = row.data.exchange;
5
  const image = exchanges[name];
6

7
  return (
8
    <div className="bg-ln-gray-05 flex h-full w-full items-center justify-center gap-1.5 text-xs">
9
      <div>
10
        <img src={image} alt={`Logo for exchange ${name}`} className="size-5 overflow-hidden rounded-full" />
11
      </div>
12
      <div className="overflow-hidden text-ellipsis">{name}</div>
13
    </div>
14
  );
15
}

Next Steps

Row Pinning: Freeze rows at the top or bottom of the viewport.
Row Spanning: Span cells across multiple rows.
Row Dragging: Drag and drop rows within or between LyteNyte grids, or into external drop zones and apps.

Row Full Width

Full Width Row Predicate

Full Width Rows

Next Steps

On this page