structure

defines the current data structure of Pivot

object structure;

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

Details

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"}, ...]
    }
*/
See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix ui widget library and page of javascript pivot grid product.