What is @ag-grid-enterprise/clipboard?
@ag-grid-enterprise/clipboard is an npm package that provides clipboard functionality for AG Grid, a popular JavaScript data grid. This package allows users to copy and paste data to and from the grid, enhancing the user experience by enabling seamless data manipulation.
What are @ag-grid-enterprise/clipboard's main functionalities?
Copy to Clipboard
This feature allows users to copy selected cell data from the grid to the clipboard. The code sample demonstrates how to enable clipboard functionality in AG Grid by setting `enableClipboard` to true in the grid options.
```javascript
import { GridOptions } from 'ag-grid-community';
import '@ag-grid-enterprise/clipboard';
const gridOptions: GridOptions = {
columnDefs: [
{ field: 'make' },
{ field: 'model' },
{ field: 'price' }
],
defaultColDef: {
editable: true
},
enableRangeSelection: true,
enableClipboard: true
};
// Assuming you have a div with id 'myGrid'
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
```
Paste from Clipboard
This feature allows users to paste data from the clipboard into the grid. The code sample shows how to enable clipboard functionality and customize the processing of pasted data using the `processCellFromClipboard` callback.
```javascript
import { GridOptions } from 'ag-grid-community';
import '@ag-grid-enterprise/clipboard';
const gridOptions: GridOptions = {
columnDefs: [
{ field: 'make' },
{ field: 'model' },
{ field: 'price' }
],
defaultColDef: {
editable: true
},
enableRangeSelection: true,
enableClipboard: true,
processCellFromClipboard: params => {
// Custom processing of clipboard data
return params.value.toUpperCase();
}
};
// Assuming you have a div with id 'myGrid'
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
```
Copy with Headers
This feature allows users to copy selected cell data along with the column headers to the clipboard. The code sample demonstrates how to enable this functionality by setting `clipboardCopyHeaders` to true in the grid options.
```javascript
import { GridOptions } from 'ag-grid-community';
import '@ag-grid-enterprise/clipboard';
const gridOptions: GridOptions = {
columnDefs: [
{ field: 'make' },
{ field: 'model' },
{ field: 'price' }
],
defaultColDef: {
editable: true
},
enableRangeSelection: true,
enableClipboard: true,
clipboardCopyHeaders: true
};
// Assuming you have a div with id 'myGrid'
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
```
Other packages similar to @ag-grid-enterprise/clipboard
handsontable
Handsontable is a JavaScript/HTML5 data grid component with spreadsheet-like UX. It offers similar clipboard functionalities, such as copying and pasting data, but also includes a wide range of other features like data validation, sorting, and filtering. Compared to @ag-grid-enterprise/clipboard, Handsontable provides a more comprehensive set of features for spreadsheet-like applications.
react-data-grid
React Data Grid is a data grid component for React applications. It provides clipboard functionalities, including copy and paste, similar to @ag-grid-enterprise/clipboard. However, React Data Grid is specifically designed for React, whereas AG Grid can be used with various frameworks including Angular, Vue, and plain JavaScript.
slickgrid
SlickGrid is a JavaScript grid/spreadsheet component that offers high performance and a rich set of features, including clipboard operations. It is highly customizable and can handle large datasets efficiently. Compared to @ag-grid-enterprise/clipboard, SlickGrid is more focused on performance and customization.
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