Skip to main content

DHTMLX Spreadsheet. Clipboard between Grid and Spreadsheet example

This demo shows how to enable clipboard data transfer between DHTMLX Grid and DHTMLX Spreadsheet using the Grid's clipboard configuration with copyModifier and pasteModifier callbacks.

Live example​

/* Define grid columns */
const columns = [
    { id: "productId", header: [{ text: "Product ID" }] },
    { id: "productName", header: [{ text: "Product Name" }], adjust: true },
    { id: "stock", header: [{ text: "Stock" }], type: "number" },
    { id: "price", header: [{ text: "Price" }], type: "number", numberMask: { prefix: "$" } }
];

// Set minimum width for all columns
columns.forEach(column => column.minWidth = 120);

// Initialize a new DHX Grid instance
const grid = new dhx.Grid("grid", {
    columns,
    data: gridData,
    autoWidth: true,
    blockSelection: {
        handle: { allowAxis: "y"}, // Restricts selection movement to the Y-axis
    },
    clipboard: {
        copyModifier,  // Customizes the format of copied data
        pasteModifier, // Customizes the format of pasted data
    },
    history: true,
    editable: true,    // Allows users to edit cell contents
});

grid.events.on("afterEditStart", (row, column) => {
    grid?.removeCellCss(row.id, column.id, "invalid-data");
});

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    menu: true // the menu is switched on, false - to switch it off
});

spreadsheet.parse(spreadsheetData);

<!-- component container -->
<section style="height: 100%; display: flex; flex-direction: column; margin: 0 auto">
    <div style="height: 50%" id="spreadsheet"></div>
    <div style="height: 50%;" id="grid"></div>
</section>

<!-- custom styles -->

<style>
.invalid-data {
        background: var(--dhx-color-danger-light-active);
    }
</style>

<script>
const spreadsheetData = {
        styles: {
            bold: {
                "font-weight": "bold",
            },
            right: {
                "justify-content": "flex-end",
                "text-align": "right",
            },
        },
        data: [
            { cell: "a1", value: "Product ID", css:"bold" },
            { cell: "b1", value: "Product Name", css:"bold" },
            { cell: "c1", value: "Stock", css:"right bold" },
            { cell: "d1", value: "Price", css:"right bold" },

            { cell: "a2", value: "A001" },
            { cell: "b2", value: "Smart Thermostat" },
            { cell: "c2", value: 430 },
            { cell: "d2", value: 2872.4, format: "currency" },

            { cell: "a3", value: "A002" },
            { cell: "b3", value: "Blender" },
            { cell: "c3", value: 600 },
            { cell: "d3", value: 2250, format: "currency" },

            { cell: "a4", value: "A003" },
            { cell: "b4", value: "Electric Grill" },
            { cell: "c4", value: 740 },
            { cell: "d4", value: 5690.6, format: "currency" },

            { cell: "a5", value: "A004" },
            { cell: "b5", value: "Smartwatch" },
            { cell: "c5", value: 560 },
            { cell: "d5", value: 3281.6, format: "currency" },

            { cell: "a6", value: "A005" },
            { cell: "b6", value: "Headphones" },
            { cell: "c6", value: 800 },
            { cell: "d6", value: 6864, format: "currency" },

            { cell: "a7", value: "A006" },
            { cell: "b7", value: "Couch" },
            { cell: "c7", value: 650 },
            { cell: "d7", value: 5928, format: "currency" },

            { cell: "a8", value: "A007" },
            { cell: "b8", value: "Laptop" },
            { cell: "c8", value: 300 },
            { cell: "d8", value: 2901, format: "currency" }
        ],
    };

    const gridData = [
        { id: "1", productId: "P001", productName: "Laptop", category: "Electronics", stock: 120, price: 999.99, receivedDate: "2025-01-15", managerName: "Alex Smith" },
        { id: "2", productId: "P002", productName: "Smartphone", category: "Electronics", stock: 300, price: 599.99, receivedDate: "2025-02-10", managerName: "Maria Johnson" },
        { id: "3", productId: "P003", productName: "Desk Chair", category: "Furniture", stock: 50, price: 149.99, receivedDate: "2025-03-05", managerName: "John Brown" },
        { id: "4", productId: "P004", productName: "Monitor", category: "Electronics", stock: 80, price: 249.99, receivedDate: "2025-01-20", managerName: "Emma Wilson" },
        { id: "5", productId: "P005", productName: "Table Lamp", category: "Furniture", stock: 200, price: 29.99, receivedDate: "2025-04-12", managerName: "Sarah Davis" },
        { id: "6", productId: "P006", productName: "Wireless Mouse", category: "Electronics", stock: 150, price: 39.99, receivedDate: "2025-02-25", managerName: "Alex Smith" },
        { id: "7", productId: "P007", productName: "Gaming Keyboard", category: "Electronics", stock: 100, price: 79.99, receivedDate: "2025-03-15", managerName: "Maria Johnson" },
        { id: "8", productId: "P008", productName: "Office Desk", category: "Furniture", stock: 40, price: 199.99, receivedDate: "2025-01-30", managerName: "John Brown" },
        { id: "9", productId: "P009", productName: "USB Flash Drive", category: "Electronics", stock: 500, price: 14.99, receivedDate: "2025-04-01", managerName: "Emma Wilson" },
        { id: "10", productId: "P010", productName: "Headphones", category: "Electronics", stock: 250, price: 129.99, receivedDate: "2025-02-18", managerName: "Sarah Davis" },
        { id: "11", productId: "P011", productName: "Bluetooth Speaker", category: "Electronics", stock: 180, price: 89.99, receivedDate: "2025-03-22", managerName: "Alex Smith" },
        { id: "12", productId: "P012", productName: "Smartwatch", category: "Electronics", stock: 130, price: 299.99, receivedDate: "2025-01-25", managerName: "Maria Johnson" },
        { id: "13", productId: "P013", productName: "Coffee Table", category: "Furniture", stock: 60, price: 99.99, receivedDate: "2025-04-10", managerName: "John Brown" },
        { id: "14", productId: "P014", productName: "Air Purifier", category: "Electronics", stock: 75, price: 159.99, receivedDate: "2025-02-05", managerName: "Emma Wilson" },
        { id: "15", productId: "P015", productName: "Tablet", category: "Electronics", stock: 220, price: 499.99, receivedDate: "2025-03-10", managerName: "Sarah Davis" },
        { id: "16", productId: "P016", productName: "Floor Lamp", category: "Furniture", stock: 150, price: 69.99, receivedDate: "2025-01-12", managerName: "Alex Smith" },
        { id: "17", productId: "P017", productName: "Portable Hard Drive", category: "Electronics", stock: 200, price: 89.99, receivedDate: "2025-04-15", managerName: "Maria Johnson" },
        { id: "18", productId: "P018", productName: "Smart Home Hub", category: "Electronics", stock: 90, price: 149.99, receivedDate: "2025-02-20", managerName: "John Brown" },
        { id: "19", productId: "P019", productName: "Standing Desk", category: "Furniture", stock: 35, price: 249.99, receivedDate: "2025-03-25", managerName: "Emma Wilson" },
        { id: "20", productId: "P020", productName: "Noise Cancelling Headphones", category: "Electronics", stock: 120, price: 199.99, receivedDate: "2025-01-18", managerName: "Sarah Davis" },
        { id: "21", productId: "P021", productName: "Desk Organizer", category: "Furniture", stock: 300, price: 39.99, receivedDate: "2025-04-20", managerName: "Alex Smith" },
        { id: "22", productId: "P022", productName: "Laptop Stand", category: "Electronics", stock: 160, price: 49.99, receivedDate: "2025-02-15", managerName: "Maria Johnson" },
        { id: "23", productId: "P023", productName: "Wireless Charger", category: "Electronics", stock: 180, price: 29.99, receivedDate: "2025-03-30", managerName: "John Brown" },
        { id: "24", productId: "P024", productName: "LED Monitor", category: "Electronics", stock: 110, price: 279.99, receivedDate: "2025-01-22", managerName: "Emma Wilson" },
        { id: "25", productId: "P025", productName: "Electric Kettle", category: "Appliances", stock: 140, price: 59.99, receivedDate: "2025-04-05", managerName: "Sarah Davis" },
        { id: "26", productId: "P026", productName: "Bookshelf", category: "Furniture", stock: 80, price: 149.99, receivedDate: "2025-02-28", managerName: "Alex Smith" },
        { id: "27", productId: "P027", productName: "Couch", category: "Furniture", stock: 25, price: 499.99, receivedDate: "2025-03-12", managerName: "Maria Johnson" },
        { id: "28", productId: "P028", productName: "Smart Bulbs", category: "Electronics", stock: 200, price: 19.99, receivedDate: "2025-01-28", managerName: "John Brown" },
        { id: "29", productId: "P029", productName: "Keyboard Wrist Rest", category: "Electronics", stock: 220, price: 14.99, receivedDate: "2025-04-25", managerName: "Emma Wilson" },
        { id: "30", productId: "P030", productName: "Home Security Camera", category: "Electronics", stock: 90, price: 199.99, receivedDate: "2025-02-22", managerName: "Sarah Davis" },
        { id: "31", productId: "P031", productName: "Microwave Oven", category: "Appliances", stock: 60, price: 129.99, receivedDate: "2025-03-18", managerName: "Alex Smith" },
        { id: "32", productId: "P032", productName: "Electric Toothbrush", category: "Appliances", stock: 300, price: 49.99, receivedDate: "2025-01-10", managerName: "Maria Johnson" },
        { id: "33", productId: "P033", productName: "Air Fryer", category: "Appliances", stock: 110, price: 179.99, receivedDate: "2025-04-08", managerName: "John Brown" },
        { id: "34", productId: "P034", productName: "Water Bottle", category: "Fitness", stock: 400, price: 24.99, receivedDate: "2025-02-12", managerName: "Emma Wilson" },
        { id: "35", productId: "P035", productName: "Adjustable Dumbbells", category: "Fitness", stock: 75, price: 199.99, receivedDate: "2025-03-28", managerName: "Sarah Davis" },
        { id: "36", productId: "P036", productName: "Yoga Mat", category: "Fitness", stock: 250, price: 39.99, receivedDate: "2025-01-15", managerName: "Alex Smith" },
        { id: "37", productId: "P037", productName: "Fitness Tracker", category: "Fitness", stock: 150, price: 89.99, receivedDate: "2025-04-22", managerName: "Maria Johnson" },
        { id: "38", productId: "P038", productName: "Electric Scooter", category: "Electronics", stock: 50, price: 399.99, receivedDate: "2025-02-17", managerName: "John Brown" },
        { id: "39", productId: "P039", productName: "Gaming Console", category: "Electronics", stock: 90, price: 499.99, receivedDate: "2025-03-23", managerName: "Emma Wilson" },
        { id: "40", productId: "P040", productName: "VR Headset", category: "Electronics", stock: 80, price: 349.99, receivedDate: "2025-01-27", managerName: "Sarah Davis" },
        { id: "41", productId: "P041", productName: "Soundbar", category: "Electronics", stock: 100, price: 149.99, receivedDate: "2025-04-18", managerName: "Alex Smith" },
        { id: "42", productId: "P042", productName: "Wireless Earbuds", category: "Electronics", stock: 180, price: 129.99, receivedDate: "2025-02-24", managerName: "Maria Johnson" },
        { id: "43", productId: "P043", productName: "Power Bank", category: "Electronics", stock: 220, price: 49.99, receivedDate: "2025-03-14", managerName: "John Brown" },
        { id: "44", productId: "P044", productName: "Portable Projector", category: "Electronics", stock: 60, price: 289.99, receivedDate: "2025-01-23", managerName: "Emma Wilson" },
        { id: "45", productId: "P045", productName: "Electric Grill", category: "Appliances", stock: 70, price: 119.99, receivedDate: "2025-04-14", managerName: "Sarah Davis" },
        { id: "46", productId: "P046", productName: "Blender", category: "Appliances", stock: 120, price: 79.99, receivedDate: "2025-02-19", managerName: "Alex Smith" },
        { id: "47", productId: "P047", productName: "Refrigerator", category: "Appliances", stock: 45, price: 799.99, receivedDate: "2025-03-27", managerName: "Maria Johnson" },
        { id: "48", productId: "P048", productName: "Smart Thermostat", category: "Electronics", stock: 90, price: 159.99, receivedDate: "2025-01-16", managerName: "John Brown" },
        { id: "49", productId: "P049", productName: "Electric Heater", category: "Appliances", stock: 50, price: 89.99, receivedDate: "2025-04-19", managerName: "Emma Wilson" },
        { id: "50", productId: "P050", productName: "Ceiling Fan", category: "Appliances", stock: 100, price: 129.99, receivedDate: "2025-02-26", managerName: "Sarah Davis" }
    ];

    // Displays an error message
    function errorMessage(message) {
        dhx.message({
            icon: "dxi dxi-close",
            css: "dhx_message--error",
            text: message,
            expire: 2000
        });
    }

    // Modifies cell value for copying based on column type
    function copyModifier(value, cell) {
        // Handle empty or undefined values
        if (!value && value !== 0) {
            return "";
        }
        // Format numbers with currency prefix and two decimal places
        if (cell.column.type === "number" && cell.column.numberMask) {
            const numValue = parseFloat(value);
            return `$${numValue.toFixed(2)}`; // e.g., 10 becomes $10.00
        }
        return value; // Return unchanged value for other types
    }

    // Modifies pasted value based on column type
    function pasteModifier(value, cell) {
        // Handle empty or undefined values
        if (!value && value !== "0") {
            return "";
        }
        // Handle pasted numeric values
        if (cell.column.type === "number") {
            const cleaned = value.replace(/[^0-9.]/g, ""); // Remove non-numeric characters
            const numValue = parseFloat(cleaned);
            if (isNaN(numValue)) {
                errorMessage(`Invalid number format for ${cell.column.id}`);
                grid?.addCellCss(cell.row.id, cell.column.id, "invalid-data");
                return value;
            }
            grid?.removeCellCss(cell.row.id, cell.column.id, "invalid-data");
            return numValue; // Return parsed number
        }
        return value; // Return unchanged value for other types
    }
</script>

Many business applications display summary data in a grid while maintaining detailed records in a spreadsheet. Users frequently need to move data between the two without manual re-entry, such as transferring product prices from an inventory grid into a financial spreadsheet for analysis.

This example places a DHTMLX Grid and a DHTMLX Spreadsheet on the same page. The Grid is configured with clipboard settings including copyModifier and pasteModifier functions that transform cell values during copy and paste operations. Block selection is enabled on the Grid, and users transfer values between the two separate components with standard clipboard actions such as Ctrl+C and Ctrl+V.

Solution overview​

  1. Initialize the Grid with new dhx.Grid("grid", config) and enable editable: true
  2. Set clipboard: { copyModifier, pasteModifier } in Grid config to transform data during copy/paste
  3. Enable blockSelection on the Grid to support range selection for clipboard operations
  4. Initialize the Spreadsheet with new dhx.Spreadsheet("spreadsheet", config) and load data via spreadsheet.parse(spreadsheetData)
  5. Use standard Ctrl+C / Ctrl+V keyboard shortcuts to transfer data between components

Key points​

  • Block selection: The Grid clipboard module works with range selection, and the example enables blockSelection so users can select ranges conveniently before copying and pasting
  • Data format alignment: copyModifier and pasteModifier ensure that Grid cell values are converted into a format compatible with the Spreadsheet's expected input
  • History support: Enabling history: true on the Grid provides undo and redo support for Grid-side changes

API reference​

  • clipboard: Enables clipboard support and customization in Grid.
  • blockSelection: Enables block selection for multi-cell operations in Grid.
  • parse(): Loads data into the Spreadsheet.

Additional resources​