CODEWITHSUNDEEP
copy-pastetabulator
rpowell6
rpowell6

Reputation: 251

Tabulator copyToClipboard method isn't working as anticipated

I am new to the Tabulator plug-in and I am attempting to copy data from one table to another using the Tabulator copyToClipboard method but with no success.

In my application I have created eleven <div> elements (one for the [Crew Leader] and one each for up to ten [Crew Members]) to serve as containers for the Tabulator tables to be instantiated. I am hoping to copy data from the [Crew Leader] table and paste it into each of the affected [Crew Member] tables thus mitigating data re-entry. This sequence of copy/paste events is triggered by the click event bound to a <button> in the header of the [Crew Leader] table. The following function is called by the <button> click event:

        function CloneTable() {

            // Verify the [Crew Leader] Tabulator table is present....
            var tableLeader = Tabulator.prototype.findTable("#CrewLeaderTable");
            if (tableLeader.length > 0) {
                alert("The Tabulator table #CrewLeaderTable was found.\ntable.length = " + tableLeader.length);
                tableLeader.copyToClipboard("all");
                alert("The table contents were copied to the clipboard.");
            }
            else {
                alert("The Tabulator table #CrewLeaderTable was not found.");
            }
        }

The first alert message verifies that the #CrewLeaderTable object has been found as anticipated. However, the second alert verification is never received thus indicating failure of the Tabulator copyToClipboard method.

I have read through as much of the relevant Tabulator documentation as I can find and I am hoping I have simply overlooked something in my setup.

The following is a copy of my Tabulator constructor:

            var table = new Tabulator(divid, {
                height: "100%",
                layout: "fitDataFill",
                movableRows: true, //enable user movable rows
                tabEndNewRow: true, //create empty new row on tab
                rowContextMenu: myActionContextMenu,
                keybindings: {
                    "navUp": true, //enable navUp keybinding using the "up arrow" key
                    "navDown": true, //enable navDown keybinding using the "down arrow" key
                },
                columns: [
                    { title: "Phase Code", field: "phaseCode", width: 144, editor: "select", editorParams: { values: function (cell) { return window.laborPhaseCodes; } } },
                    { title: "Date Worked", field: "dateComp", hozAlign: "center", sorter: "date", editor: dateEditor },
                    { title: "Start Time", field: "timeStart", hozAlign: "center", sorter: "time", editor: timeEditor },
                    { title: "Finish Time", field: "timeFinish", hozAlign: "center", sorter: "time", editor: timeEditor },
                    { title: "Memo", field: "memo", width: 144, hozAlign: "left", editor: "input" },
                    { title: "<button type='button' id='btnClone' class='btn btn-success btn-sm py-0' style='font-size:10px;'>Clone</button>", headerSort: false, headerClick: tabCloneTable }
                ],
                cellEdited: function (cell) {
                }
            });

I have spent a couple of days trying to figure out the best way to "clone" the data from one table into another. The Tabulator documentation is fairly comprehensive but I fear I have overlooked something. Any assistance is greatly appreciated.

Upvotes: 0

Views: 955

Answers (1)

nrayburn-tech
nrayburn-tech

Reputation: 968

It looks like copyToClipboard doesn't return the data, it is maintained internally and not accessible. But, with what you are doing set/getData works fine. Here is an example, https://jsfiddle.net/nrayburn/19sjg74k/7/.

Basically, what you want to do is call getData on the parent table and setData on the child table.

  const crewLeaderTable = Tabulator.prototype.findTable('#CrewLeaderTable')[0];
  const crewMemberTable = Tabulator.prototype.findTable('#CrewMember1Table')[0];
  const crewLeaderData = crewLeaderTable.getData();
  // You could also use replaceData or addData, depending on the requirements
  crewMemberTable.setData(crewLeaderData);

Upvotes: 1

Related Questions