Selection Handling

interface DataEditorProps {

    // ...other props

    columnSelect?: "none" | "single" | "multi";
    columnSelectionBlending?: SelectionBlending;
    drawFocusRing?: boolean;
    fillHandle?: boolean;
    gridSelection?: GridSelection;
    highlightRegions?: readonly Highlight[];
    onGridSelectionChange?: ((newSelection) => void);
    onSelectionCleared?: (() => void);
    rangeSelect?: "rect" | "none" | "cell" | "multi-cell" | "multi-rect";
    rangeSelectionBlending?: SelectionBlending;
    rowSelect?: "none" | "single" | "multi";
    rowSelectionBlending?: SelectionBlending;
    spanRangeBehavior?: "default" | "allowPartial";
    
    // ...other props
    
}

---

column/range/rowSelect

rangeSelect?: "none" | "cell" | "rect" | "multi-cell" | "multi-rect"; // default rect
columnSelect?: "none" | "single" | "multi"; // default multi
rowSelect?: "none" | "single" | "multi"; // default multi

Controls if multi-selection is allowed. If disabled, shift/ctrl/command clicking will work as if no modifiers are pressed.

When range select is set to cell, only one cell may be selected at a time. When set to rect one one rect at a time. The multi variants allow for multiples of the rect or cell to be selected.

---

column/range/rowSelectionBlending

rangeSelectionBlending?: "exclusive" | "mixed"; // default exclusive
columnSelectionBlending?: "exclusive" | "mixed"; // default exclusive
rowSelectionBlending?: "exclusive" | "mixed"; // default exclusive

Controls which types of selections can exist at the same time in the grid. If selection blending is set to exclusive, the grid will clear other types of selections when the exclusive selection is made. By default row, column, and range selections are exclusive.

---

drawFocusRing

drawFocusRing?: boolean;

Controls drawing of the focus ring. If disabled the user will not easily see the selection.

---

highlightRegions

interface Highlight {
    readonly color: string;
    readonly range: Rectangle;
}

highlightRegions?: readonly Highlight[];

Highlight regions are regions on the grid which get drawn with a background color and a dashed line around the region. The color string must be css parseable and the opacity will be removed for the drawing of the dashed line. Opacity should be used to allow overlapping selections to properly blend in background colors.

---

fillHandle

fillHandle?: boolean;

Controls the visibility of the fill handle used for filling cells with the mouse.

---

gridSelection

GridSelection is the most basic representation of the selected cells, rows, and columns in the data grid. The current property accounts for the selected cell and the range of cells selected as well. It is the selection which is modified by keyboard and mouse interaction when clicking on the cells themselves.

The rows and columns properties both account for the columns or rows which have been explicitly selected by the user. Selecting a range which encompases the entire set of cells within a column/row does not implicitly set it into this part of the collection. This allows for distinguishing between cases when the user wishes to delete all contents of a row/column and delete the row/column itself.

interface GridSelection {
    readonly current?: {
        readonly cell: Item;
        readonly range: Readonly<Rectangle>;
        readonly rangeStack: readonly Readonly<Rectangle>[];
    };
    readonly columns: CompactSelection;
    readonly rows: CompactSelection;
}

The cell is the [col, row] formatted cell which will have the focus ring drawn around it. The range should always include the cell and represents additional cells which can be edited via copy, delete and other events. The range may or may not include partial spans depending on the spanRangeBehavior set.

---

onGridSelectionChange

onGridSelectionChange?: ((newSelection) => void);

Emitted whenever the grid selection changes. This value must be passed back as the new gridSelection for the change to have any effect.

---

onSelectionCleared

onSelectionCleared?: () => void;

Emitted when the current selection is cleared, usually when the user presses "Escape". rowSelection, columnSelection, and gridSelection should all be empty when this event is emitted. This event only emits when the user explicitly attempts to clear the selection.

---

spanRangeBehavior

spanRangeBehavior?: "default" | "allowPartial";

If set to default the gridSelection will always be expanded to fully include any spans within it. This means in some cases the range of the selection may be inflated to the size of the entire sheet, however the user will be unable to highlight partial spans.

If allowPartial is set no inflation behavior will be enforced.