Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@ag-grid-enterprise/range-selection
Advanced tools
Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components
@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.
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);
```
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 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 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.
This project contains AG Grid Enterprise features.
See www.ag-grid.com for an overview and full documentation.
Framework specific Getting Started guides:
Angular 1 | Angular 2 | Javascript | Polymer | 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
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
To build:
npm install
npm install gulp -g
gulp
or gulp release
FAQs
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
The npm package @ag-grid-enterprise/range-selection receives a total of 81,874 weekly downloads. As such, @ag-grid-enterprise/range-selection popularity was classified as popular.
We found that @ag-grid-enterprise/range-selection demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.