When working with cell selection, it can be useful to have a handle inside the last cell to enable the size of the current range to be adjusted.
Enabling the Range Handle Copy Link
To enable the Range Handle, set cellSelection.handle to { mode: 'range' } in the gridOptions.
const gridOptions = {
cellSelection: {
handle: {
mode: 'range',
}
},
// other grid options ...
}The example below demonstrates simple range selection with a range handle.
import {
ClientSideRowModelModule,
GridApi,
GridOptions,
ModuleRegistry,
createGrid,
enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, CellSelectionModule]);
let gridApi: GridApi<IOlympicData>;
const gridOptions: GridOptions<IOlympicData> = {
columnDefs: [
{ field: "athlete", minWidth: 150 },
{ field: "age", maxWidth: 90 },
{ field: "country", minWidth: 150 },
{ field: "year", maxWidth: 90 },
{ field: "date", minWidth: 150 },
{ field: "sport", minWidth: 150 },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
{ field: "total" },
],
defaultColDef: {
flex: 1,
minWidth: 100,
},
cellSelection: { handle: { mode: "range" } },
};
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((response) => response.json())
.then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
<div id="myGrid" style="height: 100%"></div>
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
}