Columns

Column Visibility

Learn how to manage column visibility in LyteNyte Grid and understand the difference between hidden columns and collapsed column groups.

LyteNyte Grid supports defining columns that are initially hidden. Developers can toggle column visibility during runtime. The grid also supports column groups, allowing related columns to be shown or hidden together.

Hiding Columns

Each column in LyteNyte Grid has a hide property in its specification. This property defaults to false. When set to true, the grid does not render the column in the viewport. The grid still includes the column internally, and queries against grid state will continue to return it.

In the demo below, the Network and Exchange columns start hidden. Clicking their pills toggles each column’s visibility. When a hidden column becomes visible, the grid inserts it based on its position in the column state.

Hiding Columns

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

The demo uses the Pill Manager provided by LyteNyte Grid. Clicking a pill toggles the visibility of its corresponding column. Since columns are updated at runtime, their column definitions are stored in React state.

The Pill Manager is a versatile component that manages column visibility, ordering, grouping, and additional functions. See the Pill Manager guide for more details.

Warning

Avoid updating a column’s visibility too frequently. Each update triggers a layout recalculation and DOM update, which can be expensive when performed many times per second.

Column Group Visibility

A column group is a developer-defined collection of related columns. A group may be collapsed, causing certain columns to appear only when the group is open.

When the grid collapses a group, it hides the affected columns visually. However, this behavior differs from setting hide on a column specification. The grid still considers these columns logically visible. In other words, their visibility state remains true even though the collapsed group hides them in the UI.

The example below demonstrates this behavior. The Market Info group is collapsed, which hides the Network and Exchange columns. The Pill Manager still shows them as visible because the grid treats them as visible in state, even though the collapsed group hides them visually.

Column Group Visibility

Columns

Symbol

Network

Exchange

Change % 24h

Perf % 1W

Perf % 1M

Perf % 3M

Perf % 6M

Perf % YTD

Volatility

Volatility 1M

demo.tsx
components.tsx


103 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
  HeaderGroupCell,
7
  makePerfHeaderCell,
8
  NetworkCell,
9
  PercentCell,
10
  PercentCellPositiveNegative,
11
  SymbolCell,
12
} from "./components.jsx";
13
import type { DEXPerformanceData } from "@1771technologies/grid-sample-data/dex-pairs-performance";
14
import { data } from "@1771technologies/grid-sample-data/dex-pairs-performance";
15
import { useState } from "react";
16
import { PillManager } from "@1771technologies/lytenyte-pro/components";
17

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

22
const initialColumns: Grid.Column<GridSpec>[] = [
23
  {
24
    id: "symbol",
25
    cellRenderer: SymbolCell,
26
    width: 220,
27
    name: "Symbol",
28
    groupPath: ["Market Info"],
29
    groupVisibility: "always",
30
  },
31
  {
32
    id: "network",
33
    cellRenderer: NetworkCell,
34
    width: 220,
35
    name: "Network",
36
    groupPath: ["Market Info"],
37
    groupVisibility: "open",
38
  },
39

40
  {
41
    id: "exchange",
42
    cellRenderer: ExchangeCell,
43
    width: 220,
44
    name: "Exchange",
45
    groupPath: ["Market Info"],
46
    groupVisibility: "open",
47
  },
48

49
  {
50
    id: "change24h",
51
    cellRenderer: PercentCellPositiveNegative,
52
    headerRenderer: makePerfHeaderCell("Change", "24h"),
53
    name: "Change % 24h",
54
    type: "number,",
55
  },
56

57
  {
58
    id: "perf1w",
59
    cellRenderer: PercentCellPositiveNegative,
60
    headerRenderer: makePerfHeaderCell("Perf %", "1w"),
61
    name: "Perf % 1W",
62
    type: "number,",
63
  },
64
  {
65
    id: "perf1m",
66
    cellRenderer: PercentCellPositiveNegative,
67
    headerRenderer: makePerfHeaderCell("Perf %", "1m"),
68
    name: "Perf % 1M",
69
    type: "number,",
70
  },
71
  {
72
    id: "perf3m",
73
    cellRenderer: PercentCellPositiveNegative,
74
    headerRenderer: makePerfHeaderCell("Perf %", "3m"),
75
    name: "Perf % 3M",
76
    type: "number,",
77
  },
78
  {
79
    id: "perf6m",
80
    cellRenderer: PercentCellPositiveNegative,
81
    headerRenderer: makePerfHeaderCell("Perf %", "6m"),
82
    name: "Perf % 6M",
83
    type: "number,",
84
  },
85
  {
86
    id: "perfYtd",
87
    cellRenderer: PercentCellPositiveNegative,
88
    headerRenderer: makePerfHeaderCell("Perf %", "YTD"),
89
    name: "Perf % YTD",
90
    type: "number,",
91
  },
92
  { id: "volatility", cellRenderer: PercentCell, name: "Volatility", type: "number" },
93
  {
94
    id: "volatility1m",
95
    cellRenderer: PercentCell,
96
    headerRenderer: makePerfHeaderCell("Volatility", "1m"),
97
    name: "Volatility 1M",
98
    type: "number,",
99
  },
100
];
101

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

104
export default function ColumnDemo() {
105
  const ds = useClientDataSource({ data: data });
106
  const [columns, setColumns] = useState(initialColumns);
107

108
  return (
109
    <>
110
      <div>
111
        <PillManager
112
          onPillItemActiveChange={(p) => {
113
            setColumns((prev) => {
114
              return [...prev].map((x) => {
115
                if (p.item.id === x.id) {
116
                  return { ...x, hide: !p.item.active };
117
                }
118
                return x;
119
              });
120
            });
121
          }}
122
          rows={[
123
            {
124
              id: "columns",
125
              label: "Columns",
126
              type: "columns",
127
              pills: columns.map((c) => ({
128
                id: c.id,
129
                name: c.name,
130
                active: !c.hide,
131
                data: c,
132
                movable: false,
133
                removable: false,
134
              })),
135
            },
136
          ]}
137
        />
138
      </div>
139
      <div
140
        className="ln-grid ln-cell:text-xs ln-header:text-xs ln-header:text-ln-text-xlight ln-header-group:text-xs"
141
        style={{ height: 500 }}
142
      >
143
        <Grid
144
          columns={columns}
145
          columnBase={base}
146
          rowSource={ds}
147
          columnGroupRenderer={HeaderGroupCell}
148
          columnGroupDefaultExpansion={false}
149
        />
150
      </div>
151
    </>
152
  );
153
}

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
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
12

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

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

20
  return (
21
    <div className="grid grid-cols-[20px_auto_auto] items-center gap-1.5">
22
      <div>
23
        <img
24
          src={image}
25
          alt={`Logo for symbol ${symbol}`}
26
          className="h-full w-full overflow-hidden rounded-full"
27
        />
28
      </div>
29
      <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]">
30
        {ticker}
31
      </div>
32
      <div className="w-full overflow-hidden text-ellipsis">{symbol.split("/")[0]}</div>
33
    </div>
34
  );
35
}
36

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

121
export function HeaderGroupCell({
122
  groupPath,
123
  api,
124
  collapsible,
125
  collapsed,
126
}: Grid.T.HeaderGroupParams<GridSpec>) {
127
  return (
128
    <>
129
      <div className="flex-1">{groupPath.at(-1)!}</div>
130
      <button
131
        data-ln-button="secondary"
132
        data-ln-icon
133
        data-ln-size="sm"
134
        onClick={() => api.columnToggleGroup(groupPath)}
135
      >
136
        {collapsible && collapsed && <ChevronRightIcon />}
137
        {collapsible && !collapsed && <ChevronLeftIcon />}
138
      </button>
139
    </>
140
  );
141
}

Note

Hiding the Symbol column or both the Exchange and Network columns makes the column group no longer collapsible. A column group can be collapsed only if at least one column is visible when the group is open and at least one column is visible when it is closed.

For more on column groups, see our Column Groups guide.

Next Steps

Column Resizing: Change column widths programmatically or via user interaction.
Column ID & Name: Define user-friendly column names and ensure unique IDs.
Column Moving: Reorder columns programmatically or through drag-and-drop.
Column Groups: Create a column header hierarchy and associate columns with column groups.

Column Visibility

Hiding Columns

Hiding Columns

Warning

Column Group Visibility

Column Group Visibility

Note

Next Steps

On this page