We Keep Coding

How to add a dynamic URL to tabulator cell?

I'm making a linked cell in Tabulator. I formatted the cell content as
formatterParams: {
labelField: "id",
url: "localhost:8080/taskEditor/value,
target: "_blank",
},
I tried with a function, but the url was not generated correctly. It only gave me localhost:8080/value.
I would like to know how I can program a url as in the code above, where value is replaced by a string id. The value is in fact the value in the cell. How can I get the cell value and turn the text into a hyperlink, clicking on which, the user is able to see more detail of clicked value.
I'm doing this in vue.js environment.
Thanks!

Not sure if I understand your question correctly, but try this:
Instead of using the "formatterParams", create the link using the "formatter".
First create a function like the one below:
function link(cell, formatterParams){
var url = cell.getValue();
return "<a href='/taskEditor/"+url+"'>"+url+"</a>";
}
then generate the column with the code below:
{title:"ID", field:"id", formatter:link, hozAlign:"center"},
Example here:
jsfiddle

Tabulator JS groupHeaderDownload how to create cells in Download

How can I create extra cells in my Excel export? I use groupHeaderDownload, this works but it only generates a string in the first column in the Excel sheet.
I am searching for a way to generate an extra cell, and an extra row.
I tried to pass arrays and an object but everything gets transformed to a single string.
Example:
groupHeaderDownload: function(value, count, data, group){
return [{ Nr:data[0].nr},{ Description:data[0].om}];
},

If you want to add extra rows of data to your download then i would suggest that you add them to your table using the addRow function before your then trigger the download function, you could then remove it after if you dont want it available generally:
var row = table.addRow({name:"Billy Bob", age:"12"}, true); //add new row to the top of the table
table.download("xlsx", "data.xlsx"); //download table
row.delete(); //remove row after download
If you want a column to only show up in a download then in the columns definition you should set the visible option to false and the download option to true, which will cause the column to only show up in downloads:
{title:"Example", field:"example", visible:false, download:true},

How to create/set dynamic headers in tabulator

How can we set dynamic header name. is is being passed from JSON. Also I want to know how can we hide multiple columns for eg you have an example of hiding a single column but i want to hide multiple columns and i want a same multiple columns to be shown on button click.
These feature or questions are related to comparison table we are tying to develop using tabulator where i want to compare multiple specific columns and I want to hide the columns which i don't want to see and show it again if i want

Tabulator has an option for auto column name generation based on the property names of the row data.
You can enable this by setting the autoColumns option to true:
var table = new Tabulator("#example-table", {
data:tabledata,
autoColumns:true,
});
Have a look at the Autocolumns Example to see it in action.
To hide multiple columns you need to call the hideColumn or showColumn function multiple times If you would prefer that the table is only redrawn once during this time, then you can use the blockRedraw function to prevent redrawing of the table until your updates are complete:
table.blockRedraw(); //block table redrawing
table.hideColumn("name") //hide the "name" column
table.hideColumn("age") //hide the "age" column
table.restoreRedraw(); //restore table redrawing

In order to hide a column you have to add visible:false as argument inside table's declaration.
example:
columns:[{title: "Test Column", field: "test", sorter:"number", width: 100,visible:false}]
In order to hide/show multiple columns first must identify which column to be hidden/un hidden
A simple approach is to make an object array of Boolean states, such as:
var visibility =[];
visibility.push({col1_Status:true,col2_Status:true,col3_Status:false});
then table's initialization will be like:
columns:[{title: "Test Col1", field: "test1", sorter:"number", width: 100,visible:visibility[0].col1_Status},
{title: "Test Col2", field: "test2", sorter:"number", width: 100,visible:visibility[0].col2_Status},
{title: "Test Col3", field: "test3", sorter:"number", width: 100,visible:visibility[0].col3_Status}]
Now you are ready to fetch your Jason Data and change the visibility according your needs.
The above procedure works independently also. Any time you can access multiple array values, change their status and re-update tabulator to hide/show columns.
You can apply the same method with column name also changing the title:
Note that once column is initialized inside table, it cannot be changed. The only way to alter Heading (data also) is to remove existing column and replace it with another.
To make this happen use:
table.deleteColumn("Column Name Here");
table.addColumn({title:"Name", field:"name"});
Hope that helps!

Appending row with checkbox in google scripts

Im writing a small google script for an excel sheet which appends a row on a POST request: depending on the POST parameters I either append the row to the end, or I insert it in between rows.
One of the columns of the is actually a boolean that Im trying to represent as a checkbox.
The problem is when I try to append a row
sheet.appendRow([e.parameter.parameter1, e.parameter.parameter2, "FALSE"]);
It simply writes false in that column.
On the other hand when I insert a row in between other rows:
sheet.insertRows(position);
sheet.getRange("A" + (position)).setValue(e.parameter.parameter1);
sheet.getRange("B" + (position)).setValue(e.parameter.parameter2);
sheet.getRange("C" + (position)).setValue("FALSE");
The checkbox column (takes the format from the surrounding rows?) and becomes a checkbox.
Is there a simple solution to append a row with a column as a checkbox?
Thank you.

You need to create a checkbox first with data validation
Sample:
var checkbox = SpreadsheetApp.newDataValidation().requireCheckbox().build();
sheet.getRange("C" + (position)).setDataValidation(checkbox).setValue("FALSE");

Get specific td data, use data in a link, replace td data with the link JavaScript

I have a table generated by open data tables it generates perfectly. I need to isolate the last four cells on each row, store those values in a variable, and then make a link using the text in each cell (url + “/“ + text variable + “>” text variable + “</a>”). This link will be unique to each cell and needs to overwrite current cell text in all of last 4 cells of each row in the table. It will eventually be called on an onload event but onclick event is fine for now (testing etc). This needs to be a JavaScript function or jQuery.
I have searched for a long time trying every possible way to do this and can come close but I can’t seal the deal. Any help would be greatly appreciated. The url for the table I’m working with is: http://mak-a-key.com/wp-content/themes/theme49645/tables/table-links.html

When you create the table, you can use the callback function createdCell and modify the cell's DOM.
cellData: gives you the actual data in the current cell
rowData: gives you the actual array of data in the current row
if you need the last 4 in one, just concatenate :
rowData.nameCell2 + rowData.nameCell3.... and use it in the URL part.
Example:
$('yourTable').DataTable({
columns: [
{data: 'dataCell1'},
{data: 'dataCell2',
createdCell: function(td, cellData, rowData, row, col){
// rowData contains all information for the actual row
// cellData contains information in your actual cell
$(td).html("");
}
}
]
});