[Vuejs]-How to copy a row from excel and paste in tabulator table keeping fields editable?

by

0👍

You don’t appear to have enabled the clipboard functionality in your table, without this enabled Tabulator will be unable to accept pasted data.

You will need to set the clipboard option in your table constructor

var table = new Tabulator("#example-table", {
    clipboard:"paste", //enable clipboard paste functionality
});

For full details see the Clipboard Documentation

0👍

The in-built paste parser of Tabulator does not support pasting in a cell for the entire table, rather it pastes in that individual cell as per DOM functionality.

I managed to resolve the issue with a workaround.
Works perfectly.

Considering you have already initiated the table and you have a table on the UI.

Basically, I am interrupting the paste event of the div and then adding my own custom paste parser, keeping the table cells editable.

// Global function to make all the tables on the page
function makeTabulatorTable(divID, columnList, rowData, clipboardPasteBool) {
    var tableObj = {
        columns: columnList,
        data: rowData,
        layout: "fitColumns",
        rowHeight: 25,
        columnHeaderVertAlign: "middle",
        tooltips: true,
        columnDefaults: {
            tooltip: true,
            headerTooltip: true,
        },
    };

    if (!clipboardPasteBool) {
        // Only copy function for display table
        tableObj.clipboard = "copy";
    }

    // Create table
    var table = new Tabulator("#" + divID, tableObj);

    return table;
}

// Render preview table
var previewTable = makeTabulatorTable("preview-table", previewTableColumns, [{}], true);

// Add a custom paste parser to the table, avoid pasting in cells
document.getElementById("preview-table").addEventListener("paste", (event) => {
    event.preventDefault();

    // Column names to parse
    const columnFields = ["sand", "silt", "clay", "pb", "th33", "th1500"];

    // Custom tabulator paste parser
    // Trim the clipboard data and then split into rows
    let rows = event.clipboardData.getData('Text').trim().split("\n");

    // Transform each row and convert to object
    let clipboardArray = rows.map(row => {
        // Prepend an empty cell for the ID and split by tabs
        let cells = [...row.split("\t")];

        // Convert the array of cells into an object based on the column fields using reduce
        let rowObj = columnFields.reduce((obj, field, index) => {
            obj[field] = cells[index];
            return obj;
        }, {});

        return rowObj;
    });

    // Enable buttons after paste
    enableDisableBtns(false);
    
    // Set data in table
    previewTable.setData(clipboardArray);
});

// Generate preview table columns
var previewTableColumns = [
    { title: "ID", formatter: "rownum", hozAlign: "center", width: 40 },
    { title: 'Sand <span style="color:teal;">(%)</span>', hozAlign: "end", field: "sand", editor: "number", formatter: floatFormatter },
    { title: 'Silt <span style="color:teal;">(%)</span>', hozAlign: "end", field: "silt", editor: "number", formatter: floatFormatter },
    { title: 'Clay <span style="color:teal;">(%)</span>', hozAlign: "end", field: "clay", editor: "number", formatter: floatFormatter },
    { title: '<i>&rho;<sub>b</sub></i> <span style="color:teal;">(g/cm<sup>3</sup>)</span>', hozAlign: "end", field: "pb", editor: "number", formatter: floatFormatter },
    { title: 'th33', hozAlign: "end", field: "th33", editor: "number", formatter: floatFormatter },
    { title: 'th1500', hozAlign: "end", field: "th1500", editor: "number", formatter: floatFormatter }
];

<div name='preview-table' id='preview-table'></div>

Leave a comment