structure

defines the current data structure of Pivot

Example

webix.ui({
    view:"pivot",
    structure: { 
        rows: ["form", "name"],
        columns: ["year"],
        values: [
            { name: "gdp", operation: "sum"},
            { name: "oil", operation: "sum"}
        ],
        filters: [{name: "form"}]
    }
});

Related samples

The property stores the current data structure. Contains the following settings:

• rows (array) - an array of the rows. The rows are displayed in the treetable
• columns (array) - an array of the columns. The columns are displayed above the datatable area. Equivalent to the groupBy property in the "chart" mode
• values (array) - an array of value object settings. Each object includes the following fields:
  • name (string) - field name
  • operation (string, array) - operation name. Built-in ("sum", "min", "max", "count", "avg", "wavg", "counta", "countunique", "median", "product", "var", "varp", "stdev", "stdevp", "any") or a custom one. Can be a single name or an array of names
  • format (function) - a formatting function for this value in the related column
  • color (string) - color for this chart series.
• filters (array) - an array of fields that are used as filters.
• groupBy (string) - name of the field to group values by. Used in the chart mode. Equivalent to the columns field in the "table" and "tree" modes.

Setting structure dynamically

As it is a reactive property you can also access and alter it via the widget state during application runtime:

$$("pivot").getState().structure = {/* new config */};

Another way to set structure at runtime is to call the setStructure method passing a structure object as a parameter:

$$("structures").attachEvent("onItemClick", function(id) {
    var str = webix.copy(this.getItem(id).structure);
    $$("pivot").setStructure(str);
});

Getting structure

You can retrieve the current structure via the widget state:

$$("pivot").getState().structure;

Or using a dedicated getStructure method:

const structure = $$("pivot").getStructure();
/*
    {
        columns: ["year"],
        filters: [ ... ],
        groupBy: "year",
        rows: ["form", 'name"],
        values: [{name: "oil", operation: "min", color: "#e33fc7"}, ...]
    }
*/