I am using table.download to export and table.import for saving and retrieving the data to my table. All is well until I utilize

moveableRows: true,
rowHeader:{headerSort:false, rowHandle: true, formatter:"handle"},

It's only when using the handle that shows with 'formatter: "handle"' AND try and import that I run into issues. I can still move the rows without the handle and all is OK, but I like the handle on the left side of the row, and it appears to be the use of the handle configuration that causes errors when reading a csv file into the table.

The actual error I am seeing is that the first field in the rows is missing when the csv data is read into the table.

Any pointers would be appreciated.

My setup is below;

var tableCues = new Tabulator("#cueTable", {
    rowHeight: 30,
    movableRows: true,
    rowHeader:{headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},
    selectableRows: true,
    placeholder: "Awaiting Data, Please Load File",
            columns: [
            { title: "Name", field: "name", width: 150, editor:"input" },
            { title: "Item", field: "item", editor:"input"},
            { title: "ABS Move", field: "absmove", editor:"input"},
            { title: "Speed", field: "speed", editor: "input"},
            { title: "Accel", field: "accell", editor: "input"},
            { title: "Decel", field: "decel", editor: "input"},
            { title: "Position", field: "posnow", editor: "input"},
            { title: "Progress", field: "progress", formatter: "progress", sorter: "number" },
            { title: "Done", field: "car", hozAlign: "center", editor: true, formatter:
                "tickCross", formatterParams: { crossElement: false },
                headerSort: false, editable: true },
            { formatter:"buttonCross", align:"center", title:"del", headerSort:false, cellClick:function(e, cell){
                if(confirm('Are you sure you want to delete this entry?'))
                cell.getRow().delete();
                }
            }


            ],


});

//trigger download of data.csv file
document.getElementById("download-csv").addEventListener("click", function(){
    tableCues.download("csv", "data.csv");
    });

//trigger AJAX load on "Load Data via AJAX" button click
document.getElementById("file-load-trigger").addEventListener("click", function () {
    tableCues.import("csv", "buffer");
});

Update: I can get the csv file to load properly if I start each line with a blank field - two quotes and a comma - or if set autoColumns to true (in which case I lose other formatting ability). Now I will attempt to find how I can get the table.download function to add an extra empty field...

I am using table.download to export and table.import for saving and retrieving the data to my table. All is well until I utilize

moveableRows: true,
rowHeader:{headerSort:false, rowHandle: true, formatter:"handle"},

It's only when using the handle that shows with 'formatter: "handle"' AND try and import that I run into issues. I can still move the rows without the handle and all is OK, but I like the handle on the left side of the row, and it appears to be the use of the handle configuration that causes errors when reading a csv file into the table.

The actual error I am seeing is that the first field in the rows is missing when the csv data is read into the table.

Any pointers would be appreciated.

My setup is below;

var tableCues = new Tabulator("#cueTable", {
    rowHeight: 30,
    movableRows: true,
    rowHeader:{headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},
    selectableRows: true,
    placeholder: "Awaiting Data, Please Load File",
            columns: [
            { title: "Name", field: "name", width: 150, editor:"input" },
            { title: "Item", field: "item", editor:"input"},
            { title: "ABS Move", field: "absmove", editor:"input"},
            { title: "Speed", field: "speed", editor: "input"},
            { title: "Accel", field: "accell", editor: "input"},
            { title: "Decel", field: "decel", editor: "input"},
            { title: "Position", field: "posnow", editor: "input"},
            { title: "Progress", field: "progress", formatter: "progress", sorter: "number" },
            { title: "Done", field: "car", hozAlign: "center", editor: true, formatter:
                "tickCross", formatterParams: { crossElement: false },
                headerSort: false, editable: true },
            { formatter:"buttonCross", align:"center", title:"del", headerSort:false, cellClick:function(e, cell){
                if(confirm('Are you sure you want to delete this entry?'))
                cell.getRow().delete();
                }
            }


            ],


});

//trigger download of data.csv file
document.getElementById("download-csv").addEventListener("click", function(){
    tableCues.download("csv", "data.csv");
    });

//trigger AJAX load on "Load Data via AJAX" button click
document.getElementById("file-load-trigger").addEventListener("click", function () {
    tableCues.import("csv", "buffer");
});

Update: I can get the csv file to load properly if I start each line with a blank field - two quotes and a comma - or if set autoColumns to true (in which case I lose other formatting ability). Now I will attempt to find how I can get the table.download function to add an extra empty field...

• javascript
• tabulator
• formatter

1 Answer 1

So here is my work-around. Before I download to a csv file, I add a column, and following the save, I make the column invisible. If I save again the same data it does not add another column, probably because the column is the same name.

Solution is not ideal but unless someone can come up with something cleaner, it works! Code for download change is below;

document.getElementById("download-csv").addEventListener("click", function(){
    tableCues.addColumn({title:"id", field:"id"},true);
    tableCues.download("csv", "data.csv");
    tableCues.hideColumn("id");
    });