# Selection Handling ```typescript 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 ```ts 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 ```ts 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 ```typescript drawFocusRing?: boolean; ``` Controls drawing of the focus ring. If disabled the user will not easily see the selection. *** ### highlightRegions ```ts 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 ```ts 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. ```ts interface GridSelection { readonly current?: { readonly cell: Item; readonly range: Readonly; readonly rangeStack: readonly Readonly[]; }; 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`](#spanrangebehavior) set. *** ### onGridSelectionChange ```typescript onGridSelectionChange?: ((newSelection) => void); ``` Emitted whenever the grid selection changes. This value must be passed back as the new [`gridSelection`](#gridselection) for the change to have any effect. *** ### onSelectionCleared ```ts 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 ```ts spanRangeBehavior?: "default" | "allowPartial"; ``` If set to `default` the [`gridSelection`](#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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.grid.glideapps.com/api/dataeditor/selection-handling.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.