Hey guys! The new FAQ article is ready. Last time we were talking about Webix licenses. The new topic is Webix Pivot.
To begin with, Pivot is a cool JavaScript widget that is perfect for making interactive table reports and pivot charts. You can easily embed it into your web page or new app. Pivot is based on Webix Tree Table JS, consequently your data will have a tree-like structure. Why Webix Pivot? Because it allows automatically organizing, summarizing and comparing complex data from database files. To get the whole idea, you may check out our online samples.
Now let’s take a look at Pivot table FAQ:
- How to group columns in the Pivot?
You can use the onBeforeRender event to customize the header of the table.
Live pivot demo - Is it possible to apply a custom number format (for example, how to add a separator)?
By default, number formatting is not implemented. But it is possible to configure columns through the Pivot event `onHeaderInit` and the `format` property from the DataTable API. It allows more precise columns’ configuration, including formatting rules for each column.on:{
onHeaderInit: function(columns){
for(var i=0; i< columns.length;i++){
columns[i].format = webix.Number.numToStr({
groupDelimiter:"'",
groupSize:3,
decimalDelimiter:".",
decimalSize:2
});
}
}
} - How can a developer get an idea about Pivot Table rows Sorting?
For initial rows sorting, you can use the $sort key of the data scheme:scheme:{
$sort: {
by: "name",
dir: "asc"
}
}, - Is it possible to use cell selection instead of row selection? If so, is it possible to edit a cell value?
The selection pattern in Pivot table can be changed via the Datatable API only. The “datatable” option can contain settings for table configuration:Note that the cell values can’t be edited, since they just showcase the result of aggregation and not subject to editing.webix.ui({
view:"pivot",
datatable:{ select:"cell" },
...
}) - Is there any way to adjust the size of the Pivot table to the size of its container?
By default, Pivot adjusts to the size of its container. Also, you can force auto-sizing by using the code similar to this one:webix.event(window, "resize", function(){ $$("pivot").resize(); }); - Let’s say the developer has about 100 properties. It’s very hard to find the necessary one in the ‘Fields’ list. Is there a way to sort them in alphabetical order?
You can call the sort function for the “Fields” list:$$("pivot").attachEvent("onPopup", function(popup){
// fields view
var fieldsList = popup.$$("fields");</span></span></span></span></span></span>// sorting
fieldsList.attachEvent("onAfterLoad", function(){
this.sort("text","asc");
});
}); - How can I define the “total” column?
To calculate the total sum for each row or column, you can use our built-in counter:footer:true,
totalColumn:true, - If you need to calculate the sum only for the rows/columns which already have the “sum” operation, set the “sumOnly” value instead of ‘true’:footer: “sumOnly”
- Is there a way to set the tooltip to the Pivot table?
You can enable the tooltip for the inner datatable:$$("pivot").$$("data").define("tooltip", true);
If you haven’t tried Webix Pivot widget yet, you are super welcome to download our Trial version. And our Pivot tutorial will help you to begin your journey.
There are a couple of ways, how you can get this widget:
- If you are a single developer and would love to implement Pivot widget into your app, you can get it with single Developer license. But no support.
- Are you the only developer in your team, with a need of Pivot and support? Perfect option for you is our Webix Developer Pack!
- 2 other options are Webix Team Pack and Webix Enterprise Pack, depending on how many developers there are in your team, which other extensions you need… and how much money you are ready to spend 😉 Just joking, our prices are as cool, as our components are!
If you are still in doubt, feel free to contact us via e-mail. We will offer you the best solution and will answer all your questions.
Start now, enjoy Webix and see you next week!
