React Grid クリップボードの概要

クリップボードへのコピー操作が IgrGrid で可能になりました。この機能は、現在の複数セル データ選択を通して React IgrGrid のデータをすばやくコピーするための簡単でカスタマイズ可能な方法を提供します。システム クリップボードの動作により、ユーザーは IgrGrid から Excel または他の外部プログラムにデータをコピーできます。

React Grid クリップボードの例

EXAMPLE

DATA

TSX

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`
                })]

        }));
    }
}
tsコピー

import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrButton, IgrInput, IgrSwitch, IgrCheckboxChangeEventArgs, IgrComponentDataValueChangedEventArgs, IgrComponentValueChangedEventArgs } from "@infragistics/igniteui-react";
import { IgrGridBaseDirective, IgrGridModule, IgrColumnComponentEventArgs } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { NwindData } from './NwindData';

import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";

const mods: any[] = [
    IgrGridModule
];
mods.forEach((m) => m.register());

export default function App() {
    let defaultSeparator = " ";
    const data = new NwindData();
    const gridRef = useRef<IgrGrid>(null);

    useEffect(() => {
        defaultSeparator = gridRef.current.clipboardOptions.separator;
    }, []);

    const onColumnInit = (grid: IgrGridBaseDirective, args: IgrColumnComponentEventArgs) => {
        let column = args.detail;
        column.formatter = (val: any) => "** " + val + " **"
        column.header = "🎉" + column.field;
    }

    const changeCopySeparator = (inputComponent: IgrInput, args: IgrComponentValueChangedEventArgs): void => {
        gridRef.current.clipboardOptions.separator = args.detail || defaultSeparator;
    }

    const changeGridCopyBehavior = (switchComponent: any, args: IgrCheckboxChangeEventArgs): void => {
        gridRef.current.clipboardOptions.enabled = args.detail.checked;
    }

    const changeGridCopyHeadersBehavior = (switchComponent: any, args: IgrCheckboxChangeEventArgs): void => {
        gridRef.current.clipboardOptions.copyHeaders = args.detail.checked;
    }

    const changeGridCopyFormattersBehavior = (switchComponent: any, args: IgrCheckboxChangeEventArgs): void => {
        gridRef.current.clipboardOptions.copyFormatters = args.detail.checked;
    }

    const clearSelection = () => {
        gridRef.current.clearCellSelection();
    }

    return (
        <>
            <div className="container sample">      
                <div className="options horizontal" style={{gap: "1rem", alignItems: "center", margin: "1rem"}}>
                    <IgrInput placeholder='The default value is a single tabulation' style={{flex: "1 0 auto"}} change={changeCopySeparator}>
                        <span key="prefix" slot="prefix">Change copy separator:</span>
                    </IgrInput>
                    <IgrSwitch labelPosition="before" checked change={changeGridCopyBehavior}>
                        <span key="gridCopy">Grid copy behavior</span>
                    </IgrSwitch>
                    <IgrSwitch labelPosition="before" checked change={changeGridCopyHeadersBehavior}>
                        <span key="gridCopyHeaders">Copying of header labels</span>
                    </IgrSwitch>
                    <IgrSwitch labelPosition="before" checked change={changeGridCopyFormattersBehavior}>
                        <span key="gridCopyFormatters">Copying column formatters</span>
                    </IgrSwitch>
                    <IgrButton clicked={clearSelection}>
                        <span key="clearSelection">Clear selection</span>
                    </IgrButton>
                </div>
                <div className="container fill">
                    <IgrGrid autoGenerate={false} cellSelection="multiple" data={data} ref={gridRef} columnInit={onColumnInit}>
                        <IgrColumn field="ProductID" header="Product ID">
                        </IgrColumn>
                        <IgrColumn field="ProductName" header="Product Name">
                        </IgrColumn>
                        <IgrColumn field="SupplierID" header="Supplier ID">
                        </IgrColumn>
                        <IgrColumn field="CategoryID" header="Category ID">
                        </IgrColumn>
                        <IgrColumn field="QuantityPerUnit" header="Quantity Per Unit">
                        </IgrColumn>
                        <IgrColumn field="UnitPrice" header="Unit Price">
                        </IgrColumn>
                        <IgrColumn field="UnitsInStock" header="Units In Stock">
                        </IgrColumn>
                    </IgrGrid>
                </div>
            </div>
        </>
        );
}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
tsxコピー

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

.wrapper {
    justify-content: space-evenly;
    margin: 1rem;
}cssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

機能

コピー動作は、ブラウザーとオペレーティング システムで定義されているデフォルトのインタラクションで動作します。以下は、コピー＆ペースト動作の場合です。

• Windows または Unix
  • キーボード ショートカット: Ctrl + C / Ctrl + Ins
  • キーボード ショートカット: Ctrl + V / Shift + Ins
  • ブラウザー メニューからのコピー操作
• macOS
  • キーボード ショートカット: ⌘ Cmd + C
  • キーボード ショートカット: ⌘ Cmd + V
  • ブラウザー メニューからのコピー操作

制限

• カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。paste イベント (IE 11) は発生されますが、イベントの ClipboardData プロパティを公開しません。

IE 11のセルをコピーするためには、キーボード選択を使用できます。複数セルを選択するには Shift キー を押しながらコピーするには Ctrl + C を押します。

• グリッドが編集モードの間、コピー動作は無効になります。
• この機能の現在のバージョンは、グリッドからのコピー動作のみをカバーします。今後、グリッドの動作内で貼り付けを公開する予定です。

API の使用

次のオプションを処理する clipboardOptions プロパティを公開します。

• Enabled は選択したセルのコピーを有効または無効にします。
• CopyHeaders は、コピー時に関連付けられているヘッダーを含めます。
• CopyFormatters は、既存の列フォーマッタをコピーしたデータに適用します。
• Separator は、クリップボードのデータのフォーマットに使用する文字列の区切り文字。デフォルトは /t です。

Excel は、タブで区切られたテキスト (タブ区切り /t) を自動的に検出し、データを別々の列に正しく貼り付けることができます。貼り付け形式が機能せず、貼り付けたものがすべて 1 列に表示される場合は、Excel の区切り文字が別の文字に設定されている、またはテキストがタブではなくスペースを使用しています。

• GridCopy は、コピー操作が実行されたときに発生します。clipboardOptions を使用してコピー動作が有効になっている場合のみ発生します。

その他のリソース

• ページング
• フィルタリング
• ソート
• 集計
• 列のピン固定
• 選択
• 仮想化とパフォーマンス
• 複数列ヘッダー

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)