Cells

Cell Selection

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.

Cell Selection Mode

Single Cell Selection

Set the cellSelectionMode to "single" to limit users to selecting only one cell at a time.

Single Cell Selection

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

Range

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

Range Cell Selection

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

Multi-Range

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.

Multi Range Cell Selection

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

Managing Cell Selections

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.

Retrieve Selected Data

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.

PreviousCell Editing

Next Row Grouping