Web Components Grid Clipboard Overview

Copy to clipboard operations are now available in the IgcGridComponent. This functionality provides a fast, easy and customizable way to copy data of the Web Components IgcGridComponent through the current multi cell data select. System Clipboard behavior gives the user ability to copy data from the IgcGridComponent into Excel or other external programs.

Web Components Grid Clipboard Example

EXAMPLE

DATA

TS

HTML

CSS

export class NwindDataItem {
    public constructor(init: Partial<NwindDataItem>) {
        Object.assign(this, init);
    }

    public ProductID: number;
    public ProductName: string;
    public SupplierID: number;
    public CategoryID: number;
    public QuantityPerUnit: string;
    public UnitPrice: number;
    public UnitsInStock: number;
    public UnitsOnOrder: number;
    public ReorderLevel: number;
    public Discontinued: boolean;
    public OrderDate: string;
    public Rating: number;
    public Locations: NwindDataItem_LocationsItem[];

}
export class NwindDataItem_LocationsItem {
    public constructor(init: Partial<NwindDataItem_LocationsItem>) {
        Object.assign(this, init);
    }

    public Shop: string;
    public LastInventory: string;

}
export class NwindData extends Array<NwindDataItem> {
    public constructor() {
        super();
        this.push(new NwindDataItem(
        {
            ProductID: 1,
            ProductName: `Chai`,
            SupplierID: 1,
            CategoryID: 1,
            QuantityPerUnit: `10 boxes x 20 bags`,
            UnitPrice: 18,
            UnitsInStock: 39,
            UnitsOnOrder: 30,
            ReorderLevel: 10,
            Discontinued: false,
            OrderDate: `2012-02-12`,
            Rating: 5,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Fun-Tasty Co.`,
                    LastInventory: `06/12/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 2,
            ProductName: `Chang`,
            SupplierID: 1,
            CategoryID: 1,
            QuantityPerUnit: `24 - 12 oz bottles`,
            UnitPrice: 19,
            UnitsInStock: 17,
            UnitsOnOrder: 40,
            ReorderLevel: 25,
            Discontinued: true,
            OrderDate: `2003-03-17`,
            Rating: 5,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Super Market`,
                    LastInventory: `09/09/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 3,
            ProductName: `Aniseed Syrup`,
            SupplierID: 1,
            CategoryID: 2,
            QuantityPerUnit: `12 - 550 ml bottles`,
            UnitPrice: 10,
            UnitsInStock: 13,
            UnitsOnOrder: 70,
            ReorderLevel: 25,
            Discontinued: false,
            OrderDate: `2006-03-17`,
            Rating: 3,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Street Market`,
                    LastInventory: `12/12/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `24/7 Market`,
                    LastInventory: `11/11/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 4,
            ProductName: `Chef Antons Cajun Seasoning`,
            SupplierID: 2,
            CategoryID: 2,
            QuantityPerUnit: `48 - 6 oz jars`,
            UnitPrice: 22,
            UnitsInStock: 53,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: false,
            OrderDate: `2016-03-17`,
            Rating: 3,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Fun-Tasty Co.`,
                    LastInventory: `06/12/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Street Market`,
                    LastInventory: `12/12/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 5,
            ProductName: `Chef Antons Gumbo Mix`,
            SupplierID: 2,
            CategoryID: 2,
            QuantityPerUnit: `36 boxes`,
            UnitPrice: 21.35,
            UnitsInStock: 0,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: true,
            OrderDate: `2011-11-11`,
            Rating: 5,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Super Market`,
                    LastInventory: `09/09/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 6,
            ProductName: `Grandmas Boysenberry Spread`,
            SupplierID: 3,
            CategoryID: 2,
            QuantityPerUnit: `12 - 8 oz jars`,
            UnitPrice: 25,
            UnitsInStock: 0,
            UnitsOnOrder: 30,
            ReorderLevel: 25,
            Discontinued: false,
            OrderDate: `2017-12-17`,
            Rating: 4,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Super Market`,
                    LastInventory: `09/09/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 7,
            ProductName: `Uncle Bobs Organic Dried Pears`,
            SupplierID: 3,
            CategoryID: 7,
            QuantityPerUnit: `12 - 1 lb pkgs.`,
            UnitPrice: 30,
            UnitsInStock: 150,
            UnitsOnOrder: 30,
            ReorderLevel: 10,
            Discontinued: false,
            OrderDate: `2016-07-17`,
            Rating: 5,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Fun-Tasty Co.`,
                    LastInventory: `06/12/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Street Market`,
                    LastInventory: `12/12/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 8,
            ProductName: `Northwoods Cranberry Sauce`,
            SupplierID: 3,
            CategoryID: 2,
            QuantityPerUnit: `12 - 12 oz jars`,
            UnitPrice: 40,
            UnitsInStock: 6,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: false,
            OrderDate: `2018-01-17`,
            Rating: 4,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Fun-Tasty Co.`,
                    LastInventory: `06/12/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 9,
            ProductName: `Mishi Kobe Niku`,
            SupplierID: 4,
            CategoryID: 6,
            QuantityPerUnit: `18 - 500 g pkgs.`,
            UnitPrice: 97,
            UnitsInStock: 29,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: true,
            OrderDate: `2010-02-17`,
            Rating: 4,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 10,
            ProductName: `Ikura`,
            SupplierID: 4,
            CategoryID: 8,
            QuantityPerUnit: `12 - 200 ml jars`,
            UnitPrice: 31,
            UnitsInStock: 31,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: false,
            OrderDate: `2008-05-17`,
            Rating: 3,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Wall Market`,
                    LastInventory: `12/06/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 11,
            ProductName: `Queso Cabrales`,
            SupplierID: 5,
            CategoryID: 4,
            QuantityPerUnit: `1 kg pkg.`,
            UnitPrice: 21,
            UnitsInStock: 22,
            UnitsOnOrder: 30,
            ReorderLevel: 30,
            Discontinued: false,
            OrderDate: `2009-01-17`,
            Rating: 5,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Fun-Tasty Co.`,
                    LastInventory: `06/12/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 12,
            ProductName: `Queso Manchego La Pastora`,
            SupplierID: 5,
            CategoryID: 4,
            QuantityPerUnit: `10 - 500 g pkgs.`,
            UnitPrice: 38,
            UnitsInStock: 86,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: false,
            OrderDate: `2015-11-17`,
            Rating: 3,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 13,
            ProductName: `Konbu`,
            SupplierID: 6,
            CategoryID: 8,
            QuantityPerUnit: `2 kg box`,
            UnitPrice: 6,
            UnitsInStock: 24,
            UnitsOnOrder: 30,
            ReorderLevel: 5,
            Discontinued: false,
            OrderDate: `2015-03-17`,
            Rating: 2,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Super Market`,
                    LastInventory: `09/09/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 14,
            ProductName: `Tofu`,
            SupplierID: 6,
            CategoryID: 7,
            QuantityPerUnit: `40 - 100 g pkgs.`,
            UnitPrice: 23.25,
            UnitsInStock: 35,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: false,
            OrderDate: `2017-06-17`,
            Rating: 4,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Street Market`,
                    LastInventory: `12/12/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 15,
            ProductName: `Genen Shouyu`,
            SupplierID: 6,
            CategoryID: 2,
            QuantityPerUnit: `24 - 250 ml bottles`,
            UnitPrice: 15.5,
            UnitsInStock: 39,
            UnitsOnOrder: 30,
            ReorderLevel: 5,
            Discontinued: false,
            OrderDate: `2014-03-17`,
            Rating: 4,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Local Market`,
                    LastInventory: `07/03/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Wall Market`,
                    LastInventory: `12/06/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 16,
            ProductName: `Pavlova`,
            SupplierID: 7,
            CategoryID: 3,
            QuantityPerUnit: `32 - 500 g boxes`,
            UnitPrice: 17.45,
            UnitsInStock: 29,
            UnitsOnOrder: 30,
            ReorderLevel: 10,
            Discontinued: false,
            OrderDate: `2018-03-28`,
            Rating: 2,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Street Market`,
                    LastInventory: `12/12/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `24/7 Market`,
                    LastInventory: `11/11/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 17,
            ProductName: `Alice Mutton`,
            SupplierID: 7,
            CategoryID: 6,
            QuantityPerUnit: `20 - 1 kg tins`,
            UnitPrice: 39,
            UnitsInStock: 0,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: true,
            OrderDate: `2015-08-17`,
            Rating: 2,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Farmer Market`,
                    LastInventory: `04/04/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 18,
            ProductName: `Carnarvon Tigers`,
            SupplierID: 7,
            CategoryID: 8,
            QuantityPerUnit: `16 kg pkg.`,
            UnitPrice: 62.5,
            UnitsInStock: 42,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: false,
            OrderDate: `2005-09-27`,
            Rating: 2,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `24/7 Market`,
                    LastInventory: `11/11/2018`
                }),
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Super Market`,
                    LastInventory: `09/09/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 19,
            ProductName: `Teatime Chocolate Biscuits`,
            SupplierID: 8,
            CategoryID: 3,
            QuantityPerUnit: ``,
            UnitPrice: 9.2,
            UnitsInStock: 25,
            UnitsOnOrder: 30,
            ReorderLevel: 5,
            Discontinued: false,
            OrderDate: `2001-03-17`,
            Rating: 2,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Local Market`,
                    LastInventory: `07/03/2018`
                })]

        }));
        this.push(new NwindDataItem(
        {
            ProductID: 20,
            ProductName: `Sir Rodneys Marmalade`,
            SupplierID: 8,
            CategoryID: 3,
            QuantityPerUnit: `4 - 100 ml jars`,
            UnitPrice: 4.5,
            UnitsInStock: 40,
            UnitsOnOrder: 30,
            ReorderLevel: 0,
            Discontinued: false,
            OrderDate: `2005-03-17`,
            Rating: 5,
            Locations: [
                new NwindDataItem_LocationsItem(
                {
                    Shop: `Super Market`,
                    LastInventory: `09/09/2018`
                })]

        }));
    }
}
tsCOPY CODE

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents, IgcButtonComponent, IgcInputComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
defineAllComponents();

import "./index.css";

export class Sample {
    private defaultSeparator: string;
    private grid: IgcGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        this.webGridClipboardOperationsColumnInit = this.webGridClipboardOperationsColumnInit.bind(this);

        this._bind = () => {
            grid.data = this.nwindData;
            grid.addEventListener("columnInit", this.webGridClipboardOperationsColumnInit);

            var copyBehaviorSwitch = document.getElementById("copy") as IgcSwitchComponent;
            copyBehaviorSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
                grid.clipboardOptions.enabled = ev.detail.checked;
            });

            var copyHeaderSwitch = document.getElementById("headerCopy") as IgcSwitchComponent;
            copyHeaderSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
                grid.clipboardOptions.copyHeaders = ev.detail.checked;
            });

            var formatterSwitch = document.getElementById("formatterCopy") as IgcSwitchComponent;
            formatterSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
                grid.clipboardOptions.copyFormatters = ev.detail.checked;
            });

            var selectionClearBtn = document.getElementById("selectionClear") as IgcButtonComponent;
            selectionClearBtn.addEventListener('click', (ev: any) => {
                grid.cellSelection = 'none';
                grid.cellSelection = 'multiple';
            });

            var input = document.getElementById("input") as IgcInputComponent;
            input.addEventListener("igcChange", (ev: CustomEvent) => {
                if (!this.defaultSeparator) {
                    this.defaultSeparator = grid.clipboardOptions.separator;
                }
                grid.clipboardOptions.separator = ev.detail || this.defaultSeparator;
            });
        }
        this._bind();
    }

    private _nwindData: NwindData = null;
    public get nwindData(): NwindData {
        if (this._nwindData == null)
        {
            this._nwindData = new NwindData();
        }
        return this._nwindData;
    }

    public webGridClipboardOperationsColumnInit(args: any): void {
        let column = args.detail;
        column.formatter = (e: any) => { return "** " + e + " **" };
        column.header = "🎉" + column.field;
    }
}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal" style="gap: 50px;">
      <igc-input id="input">
        <span slot="prefix">Change copy separator:</span>
        <span slot="helper-text">The default value is a single tabulation.</span>
      </igc-input>
      <igc-switch id="copy" label-position="before" checked>Grid copy behavior</igc-switch>
      <igc-switch id="headerCopy" label-position="before" checked>Copying of header labels</igc-switch>
      <igc-switch id="formatterCopy" label-position="before" checked>Copying column formatters</igc-switch>
      <igc-button id="selectionClear">Clear selection</igc-button>
    </div>

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        name="grid"
        id="grid"
        row-editable="true">
            <igc-column
            field="ProductID"
            header="Product ID">
            </igc-column>
            <igc-column
            field="ProductName"
            header="Product Name">
            </igc-column>
            <igc-column
            field="SupplierID"
            header="Supplier ID">
            </igc-column>
            <igc-column
            field="CategoryID"
            header="Category ID">
            </igc-column>
            <igc-column
            field="QuantityPerUnit"
            header="Quantity Per Unit">
            </igc-column>
            <igc-column
            field="UnitPrice"
            header="Unit Price">
            </igc-column>
            <igc-column
            field="UnitsInStock"
            header="Units In Stock">
            </igc-column>
        </igc-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssCOPY CODE

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Functionality

Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are:

• Windows/Unix based
  • Ctrl + C / Ctrl + Ins as a keyboard shortcut
  • Ctrl + V / Shift + Ins as a keyboard shortcut
  • Copy action through the browser menu
• macOS
  • ⌘ Cmd + C as a keyboard shortcut
  • ⌘ Cmd + V as a keyboard shortcut
  • Copy action through the browser menu

Limitations

• Both the cut and copy events are not natively supported in Internet Explorer. The exception is the paste event (IE 11) which is emitted but does not expose the ClipboardData property in the event.

In order to copy cells in IE 11, you can use the keyboard selection. Hold the shift key in order to make a multi-cell selection, press Ctrl + C in order to copy.

• The copy behavior is disabled while the grid is in edit mode.
• The current version of this feature covers only the copy from grid behavior. Later on we plan to expose paste within grid behavior.

API Usage

We expose clipboardOptions property, which handles the following options:

• Enabled Enables/disables copying of selected cells.
• CopyHeaders Include the associated headers when copying.
• CopyFormatters Apply any existing column formatters to the copied data.
• Separator The string separator to use the for formatting the data in the clipboard. Default is /t

Excel can automatically detect text that is separated by tabs (tab-delimited /t) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs.

• GridCopy Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the clipboardOptions.

Additional Resources

• Paging
• Filtering
• Sorting
• Summaries
• Summaries
• Column Pinning
• Selection
• Virtualization and Performance
• Multi-column headers

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub