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

onGridSelectionChange

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

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 allowPartial is set no inflation behavior will be enforced.

PreviousInput Interaction NextCustom Cells

Last updated 1 year ago

Was this helpful?

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 }

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

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