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.
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 accounts@ag-grid.com with your license key
Building
To build:
npm install
npm install gulp -g
gulp
or gulp release