@ag-grid-enterprise/clipboard

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.

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 1 | Angular 2 | Javascript | Polymer | React | TypeScript | VueJS | Web Components | Aurelia

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 Members Forum.

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