@ag-grid-enterprise/range-selection

Basic Range Selection

This feature allows users to select a range of cells within the grid. The code sample demonstrates how to enable range selection by setting `enableRangeSelection` to `true` in the grid options.

```javascript
import { GridOptions } from 'ag-grid-community';
import '@ag-grid-enterprise/range-selection';

const gridOptions: GridOptions = {
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ],
  enableRangeSelection: true
};

// setup the grid after the page has finished loading
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
```

Range Selection Events

This feature allows users to listen for range selection events. The code sample demonstrates how to use the `onRangeSelectionChanged` event to log changes in the range selection.

```javascript
import { GridOptions } from 'ag-grid-community';
import '@ag-grid-enterprise/range-selection';

const gridOptions: GridOptions = {
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ],
  enableRangeSelection: true,
  onRangeSelectionChanged: (event) => {
    console.log('Range selection changed:', event);
  }
};

// setup the grid after the page has finished loading
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
```

Custom Range Selection Styles

This feature allows users to customize the styles of the selected range. The code sample demonstrates how to use the `getRangeSelectionStyle` callback to set a custom background color for the selected range.

```javascript
import { GridOptions } from 'ag-grid-community';
import '@ag-grid-enterprise/range-selection';

const gridOptions: GridOptions = {
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ],
  enableRangeSelection: true,
  getRangeSelectionStyle: (params) => {
    return {
      backgroundColor: 'lightblue'
    };
  }
};

// setup the grid after the page has finished loading
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
```