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({});
});
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/
Firstly, love the product!
Secondly, is it possible to change the expand and collapse icons for tree module within Tabulator? It would really help with the consistency of my project if I were to instead use the block arrows (Alt 16 & Alt 30).
I've already manipulated the CSS to the remove the border, etc.
The data and columns are substituted within the software package I am compiling this within.
var table = new Tabulator("#example-table", {
height:400,
data: [ **TableData** ]
dataTree:true,
dataTreeStartExpanded:true,
dataTreeBranchElement: false,
dataTreeChildIndent: 9,
dataTreeCollapseElement: !1,
dataTreeStartExpanded: !1,
layout:"fitColumns",
columns:[ **ColumnData** ],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("ID " + row.getData().id + " Selected");
},
});
I am pairing this with
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
You can use the dataTreeExpandElement and dataTreeCollapseElement setup options for this in your table constructor
var table = new Tabulator("#example-table", {
dataTree:true,
dataTreeCollapseElement:"<span>►</span>",
dataTreeExpandElement:"<span>▼</span>",
});
Full details on how to use this feature can be found in the Data Tree Documentation
Checking the source code for Tabulator, dataTreeCollapseElement and dataTreeExpandElement are either looking for a string or DOM element. Try specifying an empty element that won't show:
dataTreeCollapseElement: '<i/>',
dataTreeExpandElement: '<i/>',
I'm using the drilldown pie chart to drill down into children of a node, etc. The problem is that at some point, the children do not contain any data. Is there a way to display a message or something similar inside the chart instead of a white area (because of no series data) that informs the user that there is no more data to display?
Very good question! Inside of your JSON configuration you can define the nodata attribute.
var myConfig = {
type: "bar",
noData:{
text:"Empty Series",
backgroundColor: "#20b2db"
},
series:[
{
values:[]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
You can even use background image like a loading screen. In the following example I'm displaying spongebob while I'm waiting for chart data to come in. So I initially render a chart with no series values and nodata defined. The image is displayed while the Ajax call happens asynchronously.
demo
I have a smiple select control bound to model that contains 2 values: id -the value i want to bind to selected index, and cities= array i want ooptions populated from.
here is the JS:
var VM=function ViewModel() {
self=this;
this.id = ko.observable(102);
this.cities=ko.observableArray([]);
this.getCities=function(){
self.cities( [{"Key":"-1","Value":"choose city"},{"Key":"100","Value":"leningrad"}, {"Key":"102","Value":"moscow"}]);
} ;
}
var vm=new VM();
ko.applyBindings(vm);
I want cities to be populted after user clicked button, but the selected city must stay Moscow (because initialy the "id" was 102)
here is my HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<select data-bind="options:cities,optionsText:'Value',optionsValue:'Key',value:id"></select>
<button data-bind="click:getCities">get cities</button>
</body>
</html>
My problem is that selected index got lost after cities is loaded
Please help
Thanks
I figured out where my problem is:
the 'value' binding is two directional, so when firstly bound to select without options -the 'id' became -1.
When i cahnged to :
<select data-bind="options:cities,optionsText:'Value',optionsValue:'Key'"></select>
and added:
this.getCities=function(){
self.cities( [{"Key":"-1","Value":"choose city"},{"Key":"100","Value":"leningrad"}, {"Key":"102","Value":"moscow"}]
);
$('select').val(self.id());
} ;
The things started to work,
but problem now is how to collect value if user chooses some city after select populated:
my solution is to attach select change to unobtrusive jquery handler:
var VM=function ViewModel() {
self=this;
this.id = ko.observable(102);
this.cities=ko.observableArray([]);
this.getCities=function(){
self.cities( [{"Key":"-1","Value":"choose city"},{"Key":"100","Value":"leningrad"}, {"Key":"102","Value":"moscow"}]
);
$('select').val(self.id());
} ;
};
var f=function(){
vm.id($('select').val())
}
var vm=new VM();
ko.applyBindings(vm);
$('select').change(f)
I hope it will help somebody who experienced my problem...
Following the documentation of the YUI DataTable control i've inferred the following code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></SCRIPT>
<SCRIPT type="text/javascript">
// Create a new YUI instance and populate it with the required modules.
YUI().use('datatable', function (Y) {
// Columns must match data object property names
var data = [
{ id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
{ id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
{ id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
];
var table = new Y.DataTable({
columns: ["id", "name", "price"],
data: data,
// Optionally configure your table with a caption
caption: "My first DataTable!",
// and/or a summary (table attribute)
summary: "Example DataTable showing basic instantiation configuration"
});
table.render("#example");
});
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
The insulting thing is that the documentation says:
This code produces this table:
except that this code produces this table:
So obviously i'm missing something pretty fundamental about how to render a YUI data table. What is the correct way to render a YUI data table?
Q. How to render a YUI datatable?
Another page mentions including a <div>, changing my <BODY> from empty to:
<BODY>
<div class="example yui3-skin-sam">
<div id="simple"></div>
<div id="labels"></div>
</div>
</BODY>
but does not change the look of the control.
Add class="yui3-skin-sam" in body tag, table css is written corresponding to this class.
Move the <script>s to the bottom of the <body>, or at least after the <div> that will contain the DataTable. That will avoid a race condition where the scripts may be loaded before the DOM is set up.
render('#example') is telling the DataTable to render into an element with an id of 'example' The markup sample you included has a div with a class of 'example', then two divs with ids 'simple' and 'labels'. You need to make sure you're rendering inside a parent element with class yui3-skin-sam. If you tell a YUI widget to render into an element it can't find, it falls back to rendering it inside the <body>. You can fix this in a few ways:
add the class to the <body> tag instead of a <div> (not a bad idea, but you should still fix the render target selector)
use a render(?) target selector that matches an element on the page, such as render('.example'), render('#simple'), or render('#labels').
In any case, make sure your render target is inside an element with class="yui3-skin-sam"