@ag-grid-enterprise/range-selection

What is @ag-grid-enterprise/range-selection?

@ag-grid-enterprise/range-selection is an npm package that extends the capabilities of ag-Grid, a popular JavaScript data grid, by adding advanced range selection features. This package allows users to select ranges of cells, perform operations on those ranges, and customize the behavior of range selection.

What are @ag-grid-enterprise/range-selection's main functionalities?

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);
```

Other packages similar to @ag-grid-enterprise/range-selection

handsontable

Handsontable is a JavaScript/HTML5 data grid component with spreadsheet-like UI, supporting range selection, data validation, and other advanced features. It is similar to @ag-grid-enterprise/range-selection in terms of range selection capabilities but offers a more spreadsheet-like experience.

react-data-grid

React Data Grid is a powerful data grid component for React applications, offering features like range selection, sorting, filtering, and more. It is comparable to @ag-grid-enterprise/range-selection in terms of range selection functionality but is specifically designed for React.

slickgrid

SlickGrid is a JavaScript grid/spreadsheet component that offers high performance and a range of features including range selection. It is similar to @ag-grid-enterprise/range-selection but focuses on performance and scalability for large datasets.

README

AG Grid Enterprise

This project contains AG Grid Enterprise features.

See www.ag-grid.com for an overview and full documentation.

Frameworks Supported

Framework specific Getting Started guides:

Angular | Javascript | React | TypeScript | VueJS

This is not free software, this software is covered by copyright and to use you need a commercial license.

Please see files: LICENSE.md SUPPORT_AND_MAINTENANCE.md

Issue Reporting

If you are an Enterprise customer (or are evaluating AG Grid Enterprise) and wish to report a Bug or raise a new Feature Request please do so on our Support Portal.

To Sign Up: Send an email to [e-mail] with your license key

Building

To build:

• npm install
• npm install gulp -g
• gulp or gulp release