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();
Related
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/
I have a tabulator. When loading, it will be dynamically populated with data from an ajax call.
I also have a custom add button add-new-task which adds new row to the table.
How to move the row which has been added now automatically and make any scroll disappear by expanding the table div as the data grows?
I would also be great if the focus shifts to the cell editor on the 'Task Name' column in that newly added row.
var workflowTasksTable = new Tabulator("#inputWorkflowTasks", {
layout:"fitColumns",
movableRows:true,
pagination: false,
columns:[
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, download:false},
{title:"Task ID", field:"task_id", headerSort:false, editor:false, width:50, minWidth:50, resizable:false, visible:true, download:false},
{title:"Task Name", field:"task_name", headerSort:false, editor:"input"},
{title:"Task Abbreviation", field:"task_abbr", headerSort:false, editor:"input"},
{formatter: actionsBtnList, title:"Action", headerSort:false, download:false, resizable:false},
],
});
// Action to be taken whenever the user clicks "Add Task"
$('#add-new-task').on('click', async function(e) {
workflowTasksTable.addRow({})
.then((row) => {
workflowTasksTable.scrollToRow(row.getPosition(),"center");
});
});
Thanks
I solved my issue. Hope this helps if anyone is looking for same.
Changing the layout from fitColumns to fitDataTable worked to adjust the table for new rows as the table grows without any scroll.
For focus to the first editable cell, rowAdded was helpful.
// Action to be triggered when a new row is added
workflowTasksTable.on("rowAdded", function(row){
setTimeout(function(){row.getCell("task_name").edit();},200);
});
Without timeout, rowAdded function doesn't work as the callback is triggered before the new row is rendered I suppose and therefore no cell components exist on the row.
Another solution to make the table adjust the height as the data grows is using fitData layout with width specifications and a div styling:
var workflowTasksTable = new Tabulator("#inputWorkflowTasks", {
index:"task_name",
layout:"fitData",
movableRows:true,
pagination: false,
columns:[
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, download:false},
{title:"Task ID", field:"task_id", headerSort:false, editor:false, resizable:false, visible:false, download:false, htmlOutput:false},
{title:"Task Name", field:"task_name", headerSort:false, editor:"input", validator:["required", "unique"], width:350, minWidth:100},
{title:"Task Abbreviation", field:"task_abbr", headerSort:false, editor:"input", validator:["required", "unique", "maxLength:3"], width:206, minWidth:50},
{formatter: actionsBtnList, title:"Action", headerSort:false, download:false, resizable:false, width:100},
],
validationMode:"manual"
});
<div id="inputWorkflowTasks" aria-describedby="workflowTasksHelp" style="min-height: 100px;overflow: hidden;"></div>
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");
});
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
},
});
I have a html.dropdownlist which have 4 options. I want it to display a placeholder text a defaut which is not included in the options. I implemented a similar thing with adding a default option to the list, however selected default option is causing div to expand and it distrups the page layout.
<div style="float:left; padding-left:13.4%;">
#Html.DropDownList("Adults", ViewData["Adults"] as List<SelectListItem>, new { #class = "dropdown2"})
</div>
And that is the controller code;
List<SelectListItem> adt = new List<SelectListItem>();
//adt.Add(new SelectListItem
//{
// Text = "1",
// Value = "1"
//});
adt.Add(new SelectListItem
{
Text = "1",
Value = "1"
});
adt.Add(new SelectListItem
{
Text = "2",
Value = "2"
});
adt.Add(new SelectListItem
{
Text = "3",
Value = "3"
});
adt.Add(new SelectListItem
{
Text = "4",
Value = "4"
});
ViewData["Adults"] = adt;
return View();
Im new with mvc and any contribution will be appreciated. Thank you.
Adding placeholder text when its not directly implemented is tricky if not impossible. I recommend using Chosen (JQuery Plugin) instead. It is very easy to use and makes the dropdown beautiful.
https://harvesthq.github.io/chosen/
Example of a dropdown with chosen:
#Html.DropDownListFor(model => model.Example, Model.Example, new { #class = "chosen", data_placeholder="Choose items"})
You can add jquery code to add option to the dropdownlist with the select attribute so the option will be set as a placeholder:
$('#selectid').append($('<option/>', {
value: value,
text : value
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectid'>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
If you are using ASP.NET MVC 5 then you can use overloaded method of #Html.DropDownList
with perameter type string optionLabel.
which will add a new option in select list at first index. will be default selected. and if your default options always selected then no need for placeholder.
#Html.DropDownList("Adults", ViewData["Adults"] as List<SelectListItem>, "Select Adult",new { #class = "dropdown2"})