Cell Selection

Graphite Grid supports two types of cell selection:

• "single": allows the selection of one cell at a time.
• "range": allows the selection of multiple cells at a time.

The cellSelectionMode property on the grid state determines the type of cell selection to use. By default, its value is "none", which disables cell selection.

Single Cell Selection

To enable single cell selection mode, set the cellSelectionMode property on the grid state to "single".

export function CellSelectionSingle() {
  const grid = useGraphiteGrid({
    initial: {
      cellSelectionMode: "single",
      // other props
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

Range Cell Selection

To enable range cell selection mode, set the cellSelectionMode property on the grid state to "range". Users can then select ranges of cells by clicking and dragging their pointer.

export function CellSelectionSingle() {
  const grid = useGraphiteGrid({
    initial: {
      cellSelectionMode: "range",
      // other props
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

Representing Selections

Graphite Grid represents a cell selection with a SelectionRect object:

export interface SelectionRect {
  readonly rowStart: number;
  readonly rowEnd: number;
  readonly columnStart: number;
  readonly columnEnd: number;
}CopyCopied!

Cell selections are based on the row and column index within the grid. When selecting a range or individual cell, the selection rectangle is populated with the current selection.