Is Tabulator downloadDataFormatter callback deprecated? - tabulator

I have a set of data that I want to download to an XLSX sheet with some pre-formatting of the data. For this purpose I was intending to use the documented downloadDataFormatter callback (https://tabulator.info/docs/5.4/callbacks#download).
When the page is rendered the data is present and can be exported to the XLSX file but without the formatting that I need. In the console of the browser it displays the following warning "Invalid table constructor option:","downloadDataFormatter".
Has this callback been removed or deprecated?
//Sample Data
var tableData = [
{name:"Bob",age:47},
{name:"Steve",age:17},
{name:"Jim",age:23},
]
//Example Table
var table = new Tabulator("#table", {
downloadDataFormatter:function(data){
//data - active table data array
data.forEach(function(row){
row.age = row.age >= 18 ? "adult" : "child";
});
return data;
},
data:tableData, //load data into table
height:200, //enable the virtual DOM
columns:[
{title:"Name", field:"name", width:200},
{title:"Age", field:"age", width:200},
],
});
function downloadData(){
table.download("xlsx", "data.xlsx", {sheetName:"MyData"});
}
.tabulator{
background-color:#f3f3ff;
}
<div id="table"></div>
<button onClick="downloadData()">
Download
</button>
<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#5.4.3/dist/js/tabulator.min.js"></script>
JSFiddle: https://jsfiddle.net/jfLtgcxp/

Related

Trying to create Downloadable Tabulator Table but the the buttons are not showing

I am trying to implement an downloadable table on my project, I have all the cdns required and the tabulator is already installed by node. I am programming in Laravel. This is my code so far:
<div id="example-table"></div>
<script type="text/javascript">
//Build Tabulator
var tabledata = [
{id:1, name:"Oli Bob", progress:"12", gender:"red", rating:"", col:"", dob:"", car:""}];
table.setData(tableData);
var table = new Tabulator("#example-table", {
data:tabledata,
height:"311px",
columns:[
{title:"Name", field:"name", width:200},
{title:"Progress", field:"progress", width:100, sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", width:80},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
{title:"Driver", field:"car", align:"center", formatter:"tickCross"},
],
});
//trigger download of data.csv file
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
//trigger download of data.json file
$("#download-json").click(function(){
table.download("json", "data.json");
});
//trigger download of data.xlsx file
$("#download-xlsx").click(function(){
table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
});
//trigger download of data.pdf file
$("#download-pdf").click(function(){
table.download("pdf", "data.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Example Report", //add title to report
});
});
</script>
<script type="text/javascript">
</script>
</div>
Tabulator only manages the area inside the table, it will not create buttons outside of the table itself.
You need to add a button to the page yourself:
<button id="download-csv">Download CSV</button>
And then add a click binding to trigger the action on your table:
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});

table.getdata returns an empty string

I want to save the table to a text file after making changes. When I click the save button tbldata is empty and my text file is overwritten and blank.
I have tested the button with: var tbldata = JSON.stringify([{"id":1, "name":"Bob"}]) and it works.
I am assuming I am using table.getData incorrectly. Where and how in my button function should var tbldata = table.getdata be located?
I cannot find a specific example in the documentation
<button class="button" id="save-data" >Save Data</button>
<script>
//create Tabulator on DOM element
var table = new Tabulator("#meetinfo-table", {
height:200, // set height of table (in CSS or here)
selectable:true, //make rows selectable
layout:"fitDataFill",//fit columns to fit data and width of table (optional)
//Sort data decending
initialSort:[
{column: "meetdate", dir:"desc"}],
//Define Table Columns
columns:[
{title:"Meeting Date", field:"meetdate", width:150, editor:"input"},
{title:"Topic", field:"topic", align:"left", editor:"input"},
{title:"Speaker", field:"speaker", editor:"input"},
{title:"Room", field:"room", editor:"input"},
{title:"CE", field:"ce", align:"left", editor:"input"},
{title:"RSVP Survey Code", field:"rsvpcode",editor: "input"},
{title:"RSVP Due Date", field:"rsvpduedate", editor:"input"},
],
});
//Saves entire table to JSON encoded string
var button = document.getElementById("save-data");
button.addEventListener("click", function(){
var tbldata = table.getdata;
var request= new XMLHttpRequest(); // new HttpRequest instance
request.open("POST", "process.php");
request.setRequestHeader("Content-type", "application/json");
//request.send(tbldata);
});
//loads data into the table
table.setData('meetinfo_array.txt');
</script>
There are two issues there, it is getData not getdata and you a not actually calling the function because you are missing the parenthesis after the function name. It should be:
var tbldata = table.getData();

Am I missing how add buttons properly?

I am currently working on building a new table with the functionality of adding and deleting rows. I see in the documentation of 4.0 how to add these buttons. I am able to make the buttons show up, however the functionality behind them are not there.
Any help or being pointed in the right direction with this issue would be wonderful. Thank you in advance.
<head>
<link href="dist/css/tabulator.css" rel="stylesheet">
<link rel="stylesheet" href="landing_css.css">
<meta charset="ISO-8859-1">
</head>
<body>
<div id="example-table"></div>
<div id="tabulator-controls">
<button name="add-row">
+ Add Row
</button>
</div>
<script type="text/javascript" src="dist/js/tabulator.js"></script>
<script type="text/javascript">
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
//data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
responsiveLayout:"hide", //hide columns that dont fit on the table
tooltips:true, //show tool tips on cells
addRowPos:"bottom", //when adding a new row, add it to the top of the table
history:true, //allow undo and redo actions on the table
pagination:"local", //paginate the data
paginationSize:10, //allow 10 rows per page of data
movableColumns:true, //allow column order to be changed
resizableRows:true, //allow row order to be changed
columns:[ //Define Table Columns
{title:"Admin (Yes/No)", field:"admin", width:150, editor:"select", editorParams:{"Yes":"Yes", "No":"No"}},
{title:"First Name", field:"firstname", width:150, editor:"input"},
{title:"Last Name", field:"lastname", width:150, editor:"input"},
{title:"Job Title", field:"job", width:150, editor:"input"},
{title:"Email Address", field:"email", width:150, editor:"input"},
});
$("#add-row").click(function(){
table.addRow({});
});
</script>
I
The issue is you are using the selector #add-row which means it is looking for an element with an id attribute of "add-row". Your button element has no id attribute but a name attribute with that value in which case you need to use the following selector:
$('[name="add-row"]').click(function(){
table.addRow({});
});

Tabulator JSON Ajax API data from URL

I'm trying to configure a tabulator table to display data from this JSON url:
https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=33
My code is below, I'm trying to get it to display the first name and assists for all players in the JSON file, any help is greatly appreciated! Thanks
HTML
<link href="https://unpkg.com/tabulator-
tables#4.0.5/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-
tables#4.0.5/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>
JS
//Build Tabulator
var table = new Tabulator("#example-table", {
ajaxURL: ("https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=29"),
height:"100px",
layout:"fitColumns",
placeholder:"Placeholder Data",
index: "id",
columns:[
{title:"Name", field:"firstName", sorter:"string"},
{title:"Assists", field:"assists", sorter:"number"},
],
});
You are having issues because your data is being returned as an array in the data property of an object rather than simply as an array.
To handle data in that format you will need to use the ajaxResponse callback to tell Tabulator where to look for the data array. so your constructor should look like this:
var table = new Tabulator("#example-table", {
ajaxURL: "https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=29",
height:100,
layout:"fitColumns",
placeholder:"Placeholder Data",
index: "id",
columns:[
{title:"Name", field:"firstName", sorter:"string"},
{title:"Assists", field:"assists", sorter:"number"},
],
ajaxResponse:function(url, params, response){
//url - the URL of the request
//params - the parameters passed with the request
//response - the JSON object returned in the body of the response.
return response.data; //pass the data array into Tabulator
},
});

How can I pass External date filters Inside the Embedded HTML Page

How can I pass External date filters(Like start and end date), inside the custom HTML Page so that report gets rendered when I pass those values and clicks on submit I have the below HTML Page which gives a embedded report but I am trying to work those input box's how can I do this?
Is this possible or still present inside the ideas tab? Please guide my on it as How should I achieve this?
My HTML Code:-
<html>
<body>
<h2>PowerBI Embedded Report</h2>
<form action="/action_page.php">
<input type="text" name="sdate" placeholder="Start Date"><br>
<input type="text" name="edate" placeholder="End Date"><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
window.onload = function () {
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
accessToken: 'H4sIAAAAAAAEAC2Wx8rGDHaD7-XfOuDeArNw7717Z7_uvbeQe88XZvaCA8-RhP7nHzt7hzkr_vnvf0wUrmKBLexiTDSgmbSBLCFMqVC6-C2i2HSVSJG9OiWtTMjFe-ozi5tfZwsJuH3jRKiWsWGkrJ8kTbfMnVzTj4OKVV9RRz7RZpAwcm40K-EEJQtxbTXppsVoOEkOSnS_vLLEuOgmXJVLj4Z-mVWAoP93FnZcFOOtt5qIhUr68Ey7OjCNk9kjWIJuF8XvESV5RlTJrqiIQtVCcgDiEb6EZby7zRKpFpnIK4_icXPfZt60foH2YSNBtQHYQHrcyRxfpC3FbPcJAwu4H4TQVbtU9FxatuKrgxj7wIgscp_S4lV0XD6zRZ4sXnvbMjhKCFzNVVBFK3Z_3GXY-2idfi7HrvPNC2H1ZnaK-spl4-ZBAuZkahc_n4VMyc9TXfrH41G0YMZ8jA4gPpXGD_A2INi7u4ryh2dTI7IGQLcGVJ5d5XE-vCah0-A992s4Z79skvXXUDmrrsFOQtMAaL38AxqJyYujTXRPVXcW1Lp5UbeqbHGo1214b0TanpkhAdVL9DKEcRwYorfZQuSYqBfifFNzEcaDEj7plWpfEsIjLUPKYCgKpTj8XUiXgPnbbh9aQcZj9A8bXVVJ7T66yq0w6yBK4Y4bbgAUdBsvQEAlwnbhlnfHJFQpEbfnI2ai27xv7wCbJQmPk1RjKAuNW4kyInXvyrlDqEGdWTXIBYrsNWRQzW4VHYaUwTVc2pJ1ca4REmG1XqEgUIqbVY5ZKp0qsiRlSlH_gJiKbOuSDwF-QB7rz1uqc0aB3SJYy1-a8aB7WAnikHqm_1RI2mUvd-P1jLAMNgUIED93o4J1VMNzrPxCZCf2sVMxVxKRG7JmpcW2Z6F-TUlNQXijBdfjIedowwqqvZxxrjHX1xadvDBfG8jvYw_7PDjNBmjXiuI15sW0p-Plb8FS7FY-6vP6bPpMX2xnUWdMF_MFpfEeRRFshol_oHYd5LUSN5FOKicqD46h_kXUPRjPjCbjpD9b3G2lQ2IDEDtHCcd98HyycVCoj1CWd2FHtJMl3y47dZtejF6L9csgg4yJXL_91EQ9nh51IQzVRNTH1CK71jH-IXKkyaMfDrS0xL_lJ4s-bgPr6Uc82FjDdxcCa1sz-Vu_2-iKCEGlN0kJ-GRsgqT2oF_fDQ3WH-xY8-LpISOWs63iuCQ85_o6-l1aY-tjOnyfNIhZzSQuFk7k1bNdLQYIvBae4aBEoGLuMeLzibLWgXL8UoIfgrAJdWPqI1AQs4w1StLipBo6UtvtAqVU6YSqrV8PoLL3zWY5po7RbmibofrbcFH3c5r-U1cS-PqnK9e7p1g9xr4iouek8_m7ZBsYdOcm9fNPnjbRjB1fystufOkjdG8TCAK3SYziSLWejh8mFWg8dhDQfBu8aAKXKxxgO5XOSwLIabNBpvyA_UpKMk_vUWLt4YYkT1HHqbvXW9bxWak6gtCgu5jRCt0tZAcBBge1H1iYip9ZGonoVKjql50clPxVD5JD5UCcUcsfJygcCRC8lc_nJpJpYykXltkwQdg29Ayaw4z9mTcrVMOUlUECcz_x5I99NUwpVwHOxkYlaD37Yo1M1OcMC4DoBnQZQXOXj_6nB1bvsCUK_IGX9FLn0zAM2fvGnAVGDpnMVKA_s_QkHuP-kS1Jh6i95Qi2Ef-fU3KWUJdTgvqrsM_yUubWGyMmY1v7NZ9ghRzn1fVzIAgooVqc4Ioi-SNYTyJNe-rm8uNE204qSw18D_74YIdLncOKQCiztDsRVR3SoaGkZCRKcvJvOiyixD7bI8EKuViPe3oaCS6X9MmlwRFgIPn2AzG5_DPP44wRMsLMlazx3MRWy7x0RFKnPXl_8XJmxtn0GXhkJk6n6Vx3YJeIzgPWvGn9bMn-fhA_HPO4XB-QwBQHZmRfpT7RMtfnSNFy_mnyJMs64j0KnnPRNOU_qFPTseR3VOK5nNFcwrMEAG37QgLcBeKLDfHeKzRY3nkif93uIaaXfdm1c2sicAPO6i6OQVpNppoU9_uv3t5X82YX0qFquk1Mhh1cckAjq9HVAl5DG0G9CQ4i0WOEwvbmgqIPXZdKbjaXctwnuS11dGl_sfxtSCR9oi7Ov9LS-de__vmvf7jtXY5ZK9-_maCHuhkdZADin0C4F0AXWt7AnERSEfneiU5xz_3M3pwPObY0x1WEezH2b_iL6FJiCHuX8hpqqOt74FCd00p7KK8e-d3iy-svelX5oJ8_R8HPKlHSELHCEP_y06NU0wsZM7V-oJxb3rttIOjlKy3VqZw5IFiUitUKYECjTEH2cKCicPt57De29lKSi0LGjoFAQbj2wQu8HZ8jh1MLAda_OwarS8bYACiFKT6fmJ0JpHnT0nLFWqIQN6xHvCZOTm4Y_4Hxj03_1oQZcmDgSZs1Iqz9ANESlLYkDtOMjMvrzrBC8c1qCLmWa4nJI4ldKIp7oPwrdrTGEuaiYi8WODETWCqq_QfzuzTlpoR_lMXoMToQpp6Y75VyYpir6Zx_q7y2nrLj3Mo_WVn8mGR68N4UIbiemwf7WzE5BXNkUiFc0_ayqynxmcbVT7SERI5Q7ew7GfPXom9z0GZBvgVFY8Jl2wBy1oJx5dh7O1yBNZU7yvURaM7GCqJSl99qZOUo04LrPfGcsuEND9SDykxfvpQFbPel7RBlFgsdLdOz-YhcqxHKtEEYZcIfMLDpI9h1b7Dx8TQ5bLr-2nkfhfPgzHXHd2goAFT1B6Uhf0zWcvUUkZ43_5w5ZfaFyfm9dO7k7COMT5sbuZguvkNLdHMwS6qVWXKjBktgbmbyzE2u3lAmMwN88YDl-mCCz5upiqPkCGSOu7Lmi0Q5YP1m98f3h06UeweqzeumWVB1_Yf5f_8PAgjN0hoLAAA=',
id: 'cd0cbb78-41ca-4db1-b739-e982f59694a2',
tokenType: models.TokenType.Embed,
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=cd0cbb78-41ca-4db1-b739-e982f59694a2&groupId=a78aa4c1-fa2f-4e4d-b21e-3d47bb89618e'
};
var report;
var $reportContainer = $('#reportContainer');
report= powerbi.embed($reportContainer.get(0), embedConfiguration);
var Filter1 = {
$schema: "http://powerbi.com/product/schema#advanced",
target: {
table: "reporting_validation_agg_group",
column: "aggregation_end_date_local_1"
},
logicalOperator: "AND",
conditions: [
{
operator: "LessThanOrEqual",
value: "12/20/2017"
}
]
}
var Filter2 = {
$schema: "http://powerbi.com/product/schema#advanced",
target: {
table: "reporting_validation_agg_group",
column: "aggregation_end_date_local_1"
},
logicalOperator: "AND",
conditions: [
{
operator: "GreaterThan",
value: "12/10/2017"
}
]
}
report.on('loaded', event => {
report.getFilters()
.then(filters => {
filters.push(Filter1);
filters.push(Filter2);
return report.setFilters(filters);
});
});
}
function reloadreport(){
var $reportContainer = $('#reportContainer');
powerbi.embedNew($reportContainer.get(0), embedConfiguration);
};
</script>
<script src="jquery.js"></script>
<script src="es6-promise.js"></script>
<script src="powerbi.js"></script>
<div id="reportContainer"></div>
</body>
</html>
See if this solution helps you too:
https://community.powerbi.com/t5/Desktop/Power-BI-JavaScript-filter-between-2-dates/td-p/312204
Basically, you define an ADVANCED filter with the 'AND' operator referring to the intersection of the 2 dates.
You would, however, need to parse your input text (or datepicker) to the format required by the filter..
Please note that you can define the filters as part of the loadConfig by using the property filters: [filter1, filter2] as well..

Resources