Descripción general del portapapeles de React Grid
Las operaciones de copia al portapapeles ahora están disponibles en IgrGrid
. Esta funcionalidad proporciona una forma rápida, fácil y personalizable de copiar datos de React IgrGrid
a través de la selección de datos de múltiples celdas actual. El comportamiento del Portapapeles del sistema le brinda al usuario la capacidad de copiar datos de IgrGrid
a Excel u otros programas externos.
Ejemplo de portapapeles de React Grid
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`
})]
}));
}
}
tsimport 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
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Funcionalidad
El comportamiento de copia funciona con la interacción predeterminada definida por el navegador y el sistema operativo. Así, para los comportamientos de copiar y pegar, estos son:
- Basado en Windows/Unix
- Ctrl + C / Ctrl + Ins como atajo de teclado
- Ctrl + V / Shift + Ins como atajo de teclado
- Copiar acción a través del menú del navegador.
- Mac OS
- ⌘ Cmd + C como atajo de teclado
- ⌘ Cmd + V como atajo de teclado
- Copiar acción a través del menú del navegador.
Limitaciones
- Tanto los eventos de corte como los de copia no son compatibles de forma nativa con Internet Explorer. La excepción es el evento de pegado (IE 11), que se emite pero no expone la propiedad
ClipboardData
en el evento.
Para copiar celdas en IE 11, puede utilizar la selección del teclado. Mantenga presionada la tecla Mayús para realizar una selección de varias celdas, presione Ctrl + C para copiar.
- El comportamiento de copia está deshabilitado mientras la cuadrícula está en modo de edición.
- La versión actual de esta función cubre solo el comportamiento de copia desde la cuadrícula. Más adelante planeamos exponer el comportamiento
paste
dentro de la cuadrícula.
Uso de API
Exponemos la propiedad clipboardOptions
, que maneja las siguientes opciones:
Enabled
Habilita/deshabilita la copia de celdas seleccionadas.CopyHeaders
Incluye los encabezados asociados al copiar.CopyFormatters
Aplique cualquier formateador de columna existente a los datos copiados.Separator
El separador de cadena que se utilizará para formatear los datos en el portapapeles. El valor predeterminado es/t
Excel puede detectar automáticamente texto separado por tabulaciones (delimitado por tabulaciones /t) y pegar correctamente los datos en columnas separadas. Cuando el formato de pegado no funciona y todo lo que pega aparece en una sola columna, entonces el delimitador de Excel está configurado en otro carácter o su texto usa espacios en lugar de tabulaciones.
GridCopy
Se emite cuando se ejecuta una operación de copia. Se activa solo si el comportamiento de copia está habilitado a través declipboardOptions
.
Recursos adicionales
- Paginación
- Filtración
- Clasificación
- resúmenes
- resúmenes
- Fijación de columnas
- Selección
- Virtualización y rendimiento
- Encabezados de varias columnas
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.