LyteNyte Grid enables you to select individual cells or multiple cell ranges. Control selection
behavior with the cellSelectionMode
property in grid state, while the cellSelections
property
tracks which cells are currently selected.
Set the cellSelectionMode
to "single"
to limit users to selecting only one cell at a time.
"use client";
import {
LyteNyteGrid,
useLyteNytePro,
useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const columns: ColumnProReact[] = [
{ id: "age", type: "number" },
{ id: "job" },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
];
export function CellSelection() {
const ds = useClientDataSource({
data: bankDataSmall,
});
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
cellSelections: [{ rowStart: 2, rowEnd: 3, columnStart: 2, columnEnd: 3 }],
cellSelectionMode: "single",
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
Set the cellSelectionMode
to "range"
to allow users to select a continuous range of cells.
A range selection can be performed by clicking and dragging across cells
"use client";
import {
LyteNyteGrid,
useLyteNytePro,
useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const columns: ColumnProReact[] = [
{ id: "age", type: "number" },
{ id: "job" },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
];
export function CellSelectionRange() {
const ds = useClientDataSource({
data: bankDataSmall,
});
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
cellSelections: [{ rowStart: 2, rowEnd: 5, columnStart: 2, columnEnd: 4 }],
cellSelectionMode: "range",
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
Set the cellSelectionMode
to "multi-range"
to enable selection of multiple separate cell ranges.
Ranges may be added and remove programmatically, or whenever the user holds down the control key
to select more ranges.
"use client";
import {
LyteNyteGrid,
useLyteNytePro,
useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const columns: ColumnProReact[] = [
{ id: "age", type: "number" },
{ id: "job" },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
];
export function CellSelectionMultiRange() {
const ds = useClientDataSource({
data: bankDataSmall,
});
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
cellSelections: [
{ rowStart: 2, rowEnd: 5, columnStart: 2, columnEnd: 4 },
{ rowStart: 0, rowEnd: 6, columnStart: 0, columnEnd: 3 },
],
cellSelectionMode: "multi-range",
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
The cellSelections
property in grid state maintains the current cell selection state. LyteNyte Grid
represents each selection as a rectangle with starting and ending row indices and column indices.
From the grid's perspective, pinned rows are flattened into a single coordinate space. For example, if you pin two rows to the top, the first scrollable row will have an index of 2.
Extract data from selected cells using the exportDataRect
API method. This method accepts a rect
object defining the cells to retrieve, making it perfect for working with cell selections.
See the any data export guide for more details.