Paste Values Without Formatting and styles in React Spreadsheet

30 Jun 202624 minutes to read

In the React Spreadsheet Editor, you can make the paste action insert only the raw values into the cells, without bringing any formatting or styles from the copied content. This can be done by using the actionBegin event, where the Spreadsheet provides the details of the action being performed. When the action is a clipboard operation, you can set the paste type to Values, ensuring that only plain values are pasted into the sheet.

The following example shows how to paste values without formatting.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { getDefaultData } from './datasource';

function App() {
  const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);

  const actionBegin = (args) => {
    // If the user is pasting, force paste to values only.
    if (args.action === "clipboard") {
      args.args.eventArgs.type = 'Values';
    }
  };

  return (
    <SpreadsheetComponent
      ref={spreadsheetRef}
      actionBegin={actionBegin}
      sheets={[
        {
          name: 'Sheet1',
          ranges: [
            {
              dataSource: getDefaultData(),
              startCell: 'A1'
            }
          ]
        }
      ]}
    >
    </SpreadsheetComponent>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { getDefaultData } from './datasource';

function App(): React.ReactElement {
  const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);

  const actionBegin = (args: any): void => {
    // If the user is pasting, force paste to values only.
    if (args.action === "clipboard") {
      args.args.eventArgs.type = 'Values';
    }
  };

  return (
    <SpreadsheetComponent
      ref={spreadsheetRef}
      actionBegin={actionBegin}
      sheets={[
        {
          name: 'Sheet1',
          ranges: [
            {
              dataSource: getDefaultData(),
              startCell: 'A1'
            }
          ]
        }
      ]}
    >
    </SpreadsheetComponent>
  );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

datasource.jsx

// Minimal sample data. You can replace later with your own.
export function getDefaultData() {
  return [
    {
      "Customer Name": "Romona Heaslip",
      "Model": "Taurus",
      "Color": "Aquamarine",
      "Payment Mode": "Debit Card",
      "Delivery Date": "07/11/2015",
      "Amount": "8529.22"
    },
    {
      "Customer Name": "Clare Batterton",
      "Model": "Sparrow",
      "Color": "Pink",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "7/13/2016",
      "Amount": "17866.19"
    },
    {
      "Customer Name": "Eamon Traise",
      "Model": "Grand Cherokee",
      "Color": "Blue",
      "Payment Mode": "Net Banking",
      "Delivery Date": "09/04/2015",
      "Amount": "13853.09"
    },
    {
      "Customer Name": "Julius Gorner",
      "Model": "GTO",
      "Color": "Aquamarine",
      "Payment Mode": "Credit Card",
      "Delivery Date": "12/15/2017",
      "Amount": "2338.74"
    },
    {
      "Customer Name": "Jenna Schoolfield",
      "Model": "LX",
      "Color": "Yellow",
      "Payment Mode": "Credit Card",
      "Delivery Date": "10/08/2014",
      "Amount": "9578.45"
    },
    {
      "Customer Name": "Marylynne Harring",
      "Model": "Catera",
      "Color": "Green",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "7/01/2017",
      "Amount": "19141.62"
    },
    {
      "Customer Name": "Vilhelmina Leipelt",
      "Model": "7 Series",
      "Color": "Goldenrod",
      "Payment Mode": "Credit Card",
      "Delivery Date": "12/20/2015",
      "Amount": "6543.30"
    },
    {
      "Customer Name": "Barby Heisler",
      "Model": "Corvette",
      "Color": "Red",
      "Payment Mode": "Credit Card",
      "Delivery Date": "11/24/2014",
      "Amount": "13035.06"
    },
    {
      "Customer Name": "Karyn Boik",
      "Model": "Regal",
      "Color": "Indigo",
      "Payment Mode": "Debit Card",
      "Delivery Date": "05/12/2014",
      "Amount": "18488.80"
    },
    {
      "Customer Name": "Jeanette Pamplin",
      "Model": "S4",
      "Color": "Fuscia",
      "Payment Mode": "Net Banking",
      "Delivery Date": "12/30/2014",
      "Amount": "12317.04"
    },
    {
      "Customer Name": "Cristi Espinos",
      "Model": "TL",
      "Color": "Aquamarine",
      "Payment Mode": "Credit Card",
      "Delivery Date": "12/18/2013",
      "Amount": "6230.13"
    },
    {
      "Customer Name": "Issy Humm",
      "Model": "Club Wagon",
      "Color": "Pink",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "02/02/2015",
      "Amount": "9709.49"
    },
    {
      "Customer Name": "Tuesday Fautly",
      "Model": "V8 Vantage",
      "Color": "Crimson",
      "Payment Mode": "Debit Card",
      "Delivery Date": "11/19/2014",
      "Amount": "9766.10"
    },
    {
      "Customer Name": "Rosemaria Thomann",
      "Model": "Caravan",
      "Color": "Violet",
      "Payment Mode": "Net Banking",
      "Delivery Date": "02/08/2014",
      "Amount": "7685.49"
    },
    {
      "Customer Name": "Lyell Fuentez",
      "Model": "Bravada",
      "Color": "Violet",
      "Payment Mode": "Debit Card",
      "Delivery Date": "08/05/2016",
      "Amount": "18012.45"
    },
    {
      "Customer Name": "Raynell Layne",
      "Model": "Colorado",
      "Color": "Pink",
      "Payment Mode": "Credit Card",
      "Delivery Date": "05/30/2016",
      "Amount": "2785.49"
    },
    {
      "Customer Name": "Raye Whines",
      "Model": "4Runner",
      "Color": "Red",
      "Payment Mode": "Debit Card",
      "Delivery Date": "12/10/2016",
      "Amount": "9967.74"
    },
    {
      "Customer Name": "Virgina Aharoni",
      "Model": "TSX",
      "Color": "Pink",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "10/23/2014",
      "Amount": "5584.33"
    },
    {
      "Customer Name": "Peta Cheshir",
      "Model": "Pathfinder",
      "Color": "Red",
      "Payment Mode": "Net Banking",
      "Delivery Date": "12/24/2015",
      "Amount": "5286.53"
    },
    {
      "Customer Name": "Jule Urion",
      "Model": "Charger",
      "Color": "Violet",
      "Payment Mode": "Debit Card",
      "Delivery Date": "11/20/2013",
      "Amount": "13511.91"
    },
    {
      "Customer Name": "Lew Gilyatt",
      "Model": "Bonneville",
      "Color": "Crimson",
      "Payment Mode": "Credit Card",
      "Delivery Date": "11/19/2013",
      "Amount": "6498.19"
    },
    {
      "Customer Name": "Jobey Fortun",
      "Model": "B-Series",
      "Color": "Blue",
      "Payment Mode": "Net Banking",
      "Delivery Date": "10/30/2014",
      "Amount": "10359.67"
    },
    {
      "Customer Name": "Blondie Crump",
      "Model": "Voyager",
      "Color": "Turquoise",
      "Payment Mode": "Credit Card",
      "Delivery Date": "04/06/2018",
      "Amount": "8118.39"
    },
    {
      "Customer Name": "Florentia Binns",
      "Model": "Grand Prix",
      "Color": "Orange",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "10/13/2016",
      "Amount": "10204.37"
    },
    {
      "Customer Name": "Jaquelin Galtone",
      "Model": "Sunbird",
      "Color": "Red",
      "Payment Mode": "Net Banking",
      "Delivery Date": "10/22/2013",
      "Amount": "6528.06"
    },
    {
      "Customer Name": "Hakeem Easseby",
      "Model": "Mirage",
      "Color": "Crimson",
      "Payment Mode": "Debit Card",
      "Delivery Date": "9/12/2014",
      "Amount": "5619.25"
    },
    {
      "Customer Name": "Nickolaus Gidman",
      "Model": "XK",
      "Color": "Orange",
      "Payment Mode": "Debit Card",
      "Delivery Date": "05/12/2016",
      "Amount": "5091.43"
    },
    {
      "Customer Name": "Jenine Iglesia",
      "Model": "Accord",
      "Color": "Orange",
      "Payment Mode": "Debit Card",
      "Delivery Date": "09/03/2018",
      "Amount": "14566.08"
    },
    {
      "Customer Name": "Fax Witherspoon",
      "Model": "Range Rover Sport",
      "Color": "Orange",
      "Payment Mode": "Credit Card",
      "Delivery Date": "2/22/2018",
      "Amount": "5284.87"
    }
  ];
}

datasource.tsx

// Minimal sample data. You can replace later with your own.
export function getDefaultData(): Array<Record<string, string>> {
  return [
    {
      "Customer Name": "Romona Heaslip",
      "Model": "Taurus",
      "Color": "Aquamarine",
      "Payment Mode": "Debit Card",
      "Delivery Date": "07/11/2015",
      "Amount": "8529.22"
    },
    {
      "Customer Name": "Clare Batterton",
      "Model": "Sparrow",
      "Color": "Pink",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "7/13/2016",
      "Amount": "17866.19"
    },
    {
      "Customer Name": "Eamon Traise",
      "Model": "Grand Cherokee",
      "Color": "Blue",
      "Payment Mode": "Net Banking",
      "Delivery Date": "09/04/2015",
      "Amount": "13853.09"
    },
    {
      "Customer Name": "Julius Gorner",
      "Model": "GTO",
      "Color": "Aquamarine",
      "Payment Mode": "Credit Card",
      "Delivery Date": "12/15/2017",
      "Amount": "2338.74"
    },
    {
      "Customer Name": "Jenna Schoolfield",
      "Model": "LX",
      "Color": "Yellow",
      "Payment Mode": "Credit Card",
      "Delivery Date": "10/08/2014",
      "Amount": "9578.45"
    },
    {
      "Customer Name": "Marylynne Harring",
      "Model": "Catera",
      "Color": "Green",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "7/01/2017",
      "Amount": "19141.62"
    },
    {
      "Customer Name": "Vilhelmina Leipelt",
      "Model": "7 Series",
      "Color": "Goldenrod",
      "Payment Mode": "Credit Card",
      "Delivery Date": "12/20/2015",
      "Amount": "6543.30"
    },
    {
      "Customer Name": "Barby Heisler",
      "Model": "Corvette",
      "Color": "Red",
      "Payment Mode": "Credit Card",
      "Delivery Date": "11/24/2014",
      "Amount": "13035.06"
    },
    {
      "Customer Name": "Karyn Boik",
      "Model": "Regal",
      "Color": "Indigo",
      "Payment Mode": "Debit Card",
      "Delivery Date": "05/12/2014",
      "Amount": "18488.80"
    },
    {
      "Customer Name": "Jeanette Pamplin",
      "Model": "S4",
      "Color": "Fuscia",
      "Payment Mode": "Net Banking",
      "Delivery Date": "12/30/2014",
      "Amount": "12317.04"
    },
    {
      "Customer Name": "Cristi Espinos",
      "Model": "TL",
      "Color": "Aquamarine",
      "Payment Mode": "Credit Card",
      "Delivery Date": "12/18/2013",
      "Amount": "6230.13"
    },
    {
      "Customer Name": "Issy Humm",
      "Model": "Club Wagon",
      "Color": "Pink",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "02/02/2015",
      "Amount": "9709.49"
    },
    {
      "Customer Name": "Tuesday Fautly",
      "Model": "V8 Vantage",
      "Color": "Crimson",
      "Payment Mode": "Debit Card",
      "Delivery Date": "11/19/2014",
      "Amount": "9766.10"
    },
    {
      "Customer Name": "Rosemaria Thomann",
      "Model": "Caravan",
      "Color": "Violet",
      "Payment Mode": "Net Banking",
      "Delivery Date": "02/08/2014",
      "Amount": "7685.49"
    },
    {
      "Customer Name": "Lyell Fuentez",
      "Model": "Bravada",
      "Color": "Violet",
      "Payment Mode": "Debit Card",
      "Delivery Date": "08/05/2016",
      "Amount": "18012.45"
    },
    {
      "Customer Name": "Raynell Layne",
      "Model": "Colorado",
      "Color": "Pink",
      "Payment Mode": "Credit Card",
      "Delivery Date": "05/30/2016",
      "Amount": "2785.49"
    },
    {
      "Customer Name": "Raye Whines",
      "Model": "4Runner",
      "Color": "Red",
      "Payment Mode": "Debit Card",
      "Delivery Date": "12/10/2016",
      "Amount": "9967.74"
    },
    {
      "Customer Name": "Virgina Aharoni",
      "Model": "TSX",
      "Color": "Pink",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "10/23/2014",
      "Amount": "5584.33"
    },
    {
      "Customer Name": "Peta Cheshir",
      "Model": "Pathfinder",
      "Color": "Red",
      "Payment Mode": "Net Banking",
      "Delivery Date": "12/24/2015",
      "Amount": "5286.53"
    },
    {
      "Customer Name": "Jule Urion",
      "Model": "Charger",
      "Color": "Violet",
      "Payment Mode": "Debit Card",
      "Delivery Date": "11/20/2013",
      "Amount": "13511.91"
    },
    {
      "Customer Name": "Lew Gilyatt",
      "Model": "Bonneville",
      "Color": "Crimson",
      "Payment Mode": "Credit Card",
      "Delivery Date": "11/19/2013",
      "Amount": "6498.19"
    },
    {
      "Customer Name": "Jobey Fortun",
      "Model": "B-Series",
      "Color": "Blue",
      "Payment Mode": "Net Banking",
      "Delivery Date": "10/30/2014",
      "Amount": "10359.67"
    },
    {
      "Customer Name": "Blondie Crump",
      "Model": "Voyager",
      "Color": "Turquoise",
      "Payment Mode": "Credit Card",
      "Delivery Date": "04/06/2018",
      "Amount": "8118.39"
    },
    {
      "Customer Name": "Florentia Binns",
      "Model": "Grand Prix",
      "Color": "Orange",
      "Payment Mode": "Cash On Delivery",
      "Delivery Date": "10/13/2016",
      "Amount": "10204.37"
    },
    {
      "Customer Name": "Jaquelin Galtone",
      "Model": "Sunbird",
      "Color": "Red",
      "Payment Mode": "Net Banking",
      "Delivery Date": "10/22/2013",
      "Amount": "6528.06"
    },
    {
      "Customer Name": "Hakeem Easseby",
      "Model": "Mirage",
      "Color": "Crimson",
      "Payment Mode": "Debit Card",
      "Delivery Date": "9/12/2014",
      "Amount": "5619.25"
    },
    {
      "Customer Name": "Nickolaus Gidman",
      "Model": "XK",
      "Color": "Orange",
      "Payment Mode": "Debit Card",
      "Delivery Date": "05/12/2016",
      "Amount": "5091.43"
    },
    {
      "Customer Name": "Jenine Iglesia",
      "Model": "Accord",
      "Color": "Orange",
      "Payment Mode": "Debit Card",
      "Delivery Date": "09/03/2018",
      "Amount": "14566.08"
    },
    {
      "Customer Name": "Fax Witherspoon",
      "Model": "Range Rover Sport",
      "Color": "Orange",
      "Payment Mode": "Credit Card",
      "Delivery Date": "2/22/2018",
      "Amount": "5284.87"
    }
  ];
}